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

  1. 公開日:
  2. WordPress
  3. 0
3
SHARES
B!

グーグル、HTTPページへの警告表示を強化へ--10月リリース予定の「Chrome 62」からなど、各地で報じられているように、そのWebページにおいてユーザの入力を促すもの(例えば、キーワード検索のためのINPUTフィールド)が存在する場合、HTTPページに接続しようとすると、今秋にリリースされるGoogle Chromeの正式版では「安全な接続ではない旨」の警告ダイアログが表示されるようになります。

個人ブログ運営者にとっては、検索フォームを用意するだけでもこうした警告が表示されるようになるため傍迷惑な話ですが、弊サイトでは検索フォームを利用してくださる読者の方々もいらっしゃるようなので、対応しないわけにはいきません。そこで、今回は大手レンタルサーバである「エックスサーバ」を対象として、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://<Domain Name>」から「https://<Domain Name>」に置換して保存します。

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

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

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

「Search pattern」に旧URL(弊サイトの場合、「http://ottan.xyz」)、「Replace pattern」に新URL(弊サイトの場合、「https://ottan.xyz)を入力します。そのまま「Replace & Save」をクリックすれば置換完了なのですが、正しく置換されるかどうか、まずは「Search」ボタンをクリックして置換対象を検索してみましょう。

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

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

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

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

「.htaccess」ファイル編集後に、旧URL(弊サイトの場合、「http://ottan.xyz」)にアクセスして、新URL(弊サイトの場合、「https://ottan.xyz)にリダイレクトされることを確認してください。

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

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

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

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

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

この記事が気に入ったらいいねしよう!
こちらの記事も読まれています
ご意見ボード
匿名で管理人に送信されます。※送信専用です。返信はできません。
ご指摘・ご意見
Top