エックスサーバーでWordPressを運用する場合に独自SSLを設定する方法

Webページにおいてユーザの入力を促すものが存在する場合、HTTPページに接続しようとすると、「安全な接続ではない旨」の警告ダイアログが表示されます。

弊サイトでは検索フォームを利用してくださる読者の方々もいらっしゃるようなので、対応しないわけにはいきません。そこで、今回は大手レンタルサーバである「エックスサーバ」を対象として、WordPressをHTTPS化する手順をご紹介します。

WordPressをHTTPからHTTPSへ

WordPressのバックアップ

設定ファイル、プラグイン、データベース等、必要に応じてバックアップをあらかじめ取得しておきましょう。HTTPS化に伴い不都合が生じた場合の復旧に必要です。また、日常的にバックアップを取得することを心がけましょう。

エックスサーバでSSL設定を行う

続いて、エックスサーバの「サーバーパネル」にログインします。

「サーバーパネル」右上に「SSL設定」という項目があるためクリックします。

「独自SSL設定の追加」タブをクリックします。設定対象ドメインを選択して、「独自SSL設定を追加する(確定)」をクリックします。（「CSR情報を入力する」はチェックオフのままで構いません）

数分後、SSL設定が完了します。上図に記載の通り、SSL設定が完全に完了するまで最大1時間程度かかりますので気長に待ちましょう。実は、SSLの設定自体はこれで完了です。

SSL設定が完了していない段階で、Google Chromeから接続しようとすると「安全ではない接続」として上記のような画面が表示されます。

WordPressのURLを変更する

続いて、Google Chromeからアクセスして上記の警告が表示されないようになったら、WordPressのURLをHTTPからHTTPSに切り替えます。

WordPressのダッシュボードにログイン後、「設定」→「一般設定」で「WordPressアドレス」「サイトアドレス」を変更します。各々「http\://」から「https\://」に置換して保存します。

「Search Regex」プラグインで内部リンクをすべてHTTPSに置換する

WordPressのURL変更後、自動的に内部リンクをすべてHTTPS接続に置換してくれると非常に便利なのですが、WordPressはそこまでやってくれません。そこで、投稿の中で旧URL（HTTP）を使用している場合は（画像ファイル、内部リンク等）、すべて新URL（HTTPS）に置換します。

投稿数が10程度であれば、まだ手動でなんとかなりそうなものですが、投稿数が増えれば増えるほど手間が増加するため、ここでは「Search Regex」というプラグインを使用して一斉置換します。WordPressにインストールしていない場合は、プラグインの新規インストールからインストールしてください。インストール後、ダッシュボードのサイドメニューから「ツール」→「Search Regex」を選択します。

「Search pattern」に旧URL、「Replace pattern」に新URLを入力します。そのまま「Replace & Save」をクリックすれば置換完了です。まずは、「Search」ボタンをクリックして、正しく置換されるか置換対象を検索してみましょう。

このように置換される箇所が表示されますので、置換前のURLが正しいこと、置換後のURLが正しいことを再度確認して、一息おいたら「Replace & Save」ボタンをクリックします。

.htaccessファイルを編集してHTTP接続をHTTPS接続へリダイレクトする

最後に、「HTTP」で接続してきた場合にすべて「HTTPS」へリダイレクトする設定を追加します。リダイレクトの方法はさまざまですが、WordPressの場合は、WordPressインストールディレクトリの配下にある「.htaccess」ファイルを置き換えます。なお、このファイルの修正を誤ると、正しく表示されなくなる場合があります。「.htaccess」ファイルを開いて、最上部に以下の記述を追加します。

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

「.htaccess」ファイル編集後に、旧URLにアクセスして、新URLにリダイレクトされることを確認してください。

以上で、「HTTP」から「HTTPS」ヘの切り替え作業はすべて完了です。

Google Chromeのデベロッパーコンソールで確認

最後に、Google Chromeで「HTTPS」が有効になっていることを確認します。任意のページにアクセスして、上記のようにアドレスバーに「保護された通信」と表示されていれば正常に完了しています。

しかし、このように「保護された通信」と表示されていない場合は、そのページ内に「HTTP」リンクが混在している可能性があります。そのような場合には、Google Chromeのデベロッパーコンソールを開きます。Macの場合、⌥（option）+⌘（command）+Iで開くことができます。

原因は、画像ファイルの一部が「HTTPS」ではなく「HTTP」であることでした。とくに、Webサイトを運営するために広告等を表示している場合に、「HTTPS」に切り替わっていない場合、上記のように「保護された通信」と表示されません。すべてのリンクが「HTTPS」担っているか入念に確認しておきましょう！

comments powered by Disqus