意外に簡単？WordPress環境のSSL化 （エックスサーバー）

エックスサーバーでは無償で独自SSLを使用できます。

近年、あらゆるサイトがSSL化しているので、本サイトもSSL化してみました。

ついでに手順を記録しておきます。

実施した際、本サイトは複雑な構造を持っていなかったからだとは思いますが、結構簡単でした。

１．ＳＳＬ設定＠Ｘserver サーバーパネル

SSLの設定をXserverサーバーパネルから行います。待ち時間はありますが、簡単手順です。エックスサーバーの仕組みで勝手にやってくれるので、ほぼクリックだけで終わります。（素晴らしい）

1.1. ”Xserverサーバーパネル”を開く

エックスサーバーのインフォパネルからサーバーパネルを開きます。

1.2. ”ドメイン”枠の”SSL設定”をクリック

”SSL設定”をクリックして、SSL設定画面へ移動します。

1.3. SSL化したいドメインの”選択する”をクリック

所持しているドメインがリストされますので、SSL化したいドメインの右の”選択する”をクリックします。

1.4. ”独自SSL設定の追加”タブから”独自SSL設定を追加する（確定）”を押下

最初、”SSL設定”のタブが選択されているので、”独自SSL設定の追加”タブを選択（クリック）します。

ドメインが正しいことを確認し、”独自SSL設定を追加する（確定）”ボタンをクリックします。この際、”設定対象ドメイン”、”サイト”が正しいかどうかを今一度ご確認ください。

また、CSR情報は無くても良いと思います。（エックスサーバーのマニュアルにも無くて良いと書いてあります）

1.5. 1時間ぐらい待つ

1時間ぐらいかかるという表示がでるので1時間程待ちます。実際３０～４０分あれば完了すると思います。

完了後に”https://<あなたのドメイン名>”でアクセスできるようになります。

1.x. 証明書の更新

証明書は90日有効です。有効期限の30日前（つまり60日後）に自動更新されます。何らかの理由で自動更新に失敗した場合はメールで通達が来るようです。

1.6. WordPress URL設定の変更＠ご自分のドメイン

“WordPress アドレス (URL)”と”サイトアドレス (URL)”を変更します。（ご自分のドメインのWordPress設定画面からの変更です）

“設定”＞”一般” から変更できます。現状はどちらも”http://”ではじまっていますので、“https://”に変更します。

変更後に“変更の保存”を押下してください。

２．リンクの置換

現在、”https://<あなたのドメイン名>”でアクセスできますし、自分の投稿は何事もなく参照できるはずです。

しかし、画像、サイト内リンクはまだ”http”で記載されたままで、完全にSSL化されていません。

完全にSSL化されていないとブラウザが信頼できないと判断してしまい、SSL化した意味がなくなってしまいます。（寧ろ怪しいサイトと思われるかもしれません）

そこで、投稿と固定ページに存在する”http”を”https”に置換する作業を行います。これには”Search Regex”というプラグインを使います。

デフォルトではインストールされていないプラグインですので、インストールしてから、置換作業をします。（WordPress設定画面で行います）

2.1. Search Regex の検索

”プラグイン＞新規追加”から、”Search Regex”を検索します。

右側のペインに検索できる画面が出てきますので、”Search Regex”を入力します。（入力と共に検索されます）

“お使いのバージョンのWordPressではテストされていません”と出ています。この手順を確認した環境はWordPress4.8でしたが問題なく使えています。

尚、使用したSearch Regexのバージョンは”1.4.16”です。

2.2. Search Regexのインストール

見つかったら、”今すぐインストール”ボタンを押下します。

2.3. Search Regexの有効化

インストールが終わると”今すぐインストール”のボタンが”有効化”のボタンに変わりますので、”有効化”のボタンを押下します。

2.4. Search Regexによる置換

ツールにSearch Regexが表示されています。

”Search Regex”をクリックして、置換していきます。

以下のように入力します。

何が起きるかを確認するために、まずは”Replace”ボタンを押下してみてください。何が置換されるのかを表示してくれます。

ここまでは、サイトの情報としては何も変更されていません。この次の作業でコンテンツに変更がかかりますので、ご注意ください。

内容を確認したうえで、”Replace＆Save”ボタンをクリックして確定します。

これで、各投稿の記事内の画像リンク、URLリンク記載がhttpsに変更され、完全なSSL対応となります。（今時の）ブラウザから参照してみるとURL表示の横に鍵マークが付き、保護されているかどうかがわかります。

2.5. SSL対応できていない場合

ブラウザで参照した際に、もしも、部分的にSSL対応していない場合、鍵が壊れている、鍵がかかっていないようなアイコンになります。（このサイトは保護されていません）

この場合、何かを変更しなければなりません。変更している個所を特定するのにブラウザ付属の”開発者ツール”（または”デベロッパーツール”）を使えば、SSL対応していない原因箇所はわかります。

原因箇所から、何から何へ置換すれば良いのかを判断し、Search Regexで変換して直していきます。残念ながら、一律の方法は無いので、パターンを見て（取り込んでいる部品を調べて）対応していく必要があります。

当サイトではかなりピュアな環境だったので、そのようなものはありませんでした。

2.6. Search Regexの無効化／削除

おそらくは当面使わないのでプラグインの一覧から無効化／削除します。元に戻したくなった場合にまた使うこともあるかもしれませんので、削除はこの時点でしなくてもいいかと思います。

ちなみに無効化や削除しても、変更内容が元に戻ったりはしません。

３．httpからhttpsへのリダイレクト

”http://<あなたのドメイン名>”でも今後アクセスされるかもしれません。その際に”https://<あなたのドメイン名>”に飛んでもらう必要があります。

3.1. ”Xserverサーバーパネル”を開く

エックスサーバーのインフォパネルからサーバーパネルを開きます。

3.2. “ホームページ”枠の”.htaccess編集”ボタンを押下

所持しているドメインがリストされますので、SSL化したドメインの右の”選択する”をクリックします。

※FTPでやる場合、”/<あなたのドメイン名>/public_html/”ディレクトリにある”.htaccess”が対象になります。

3.3. “.htaccess”の編集

“.htaccess”は書き方を間違えると予期せぬことが起こるファイルですので、念のため内容をコピーして置いておきましょう。

私の環境では以下のような状態がデフォルトでした。

これを以下のように書き換えます。

書き方はいくつもあると思います。とりあえず、赤字の部分をコピペしていただければOKだと思います。

試験的にやりたい場合はR=302で、移行作業が完了してからR=301にするのも良いかと思います。検索エンジンのBOTが周回して、その後に”SSL化やめた！”となると不利益があるかもしれません。ここまでやってから、止めることはないと思いますが。。。

Ｘ．もとに戻したい場合

きちんと検証したわけではありませんが、”.htaccess”をもとに戻し、”Search Regex”で逆方向に変換して、サーバーパネルからSSL設定の削除を行うともとに戻せるはずです。（つまり手順を逆にやっていく）

まとめ

思ったよりもかなり簡単にできました。手順１の”SSL設定”でほとんどやってくれるのでとても楽ですね。エックスサーバー様様です。

気づいたら、メジャーなサイトはすべてSSL化されています。今後、SSL非対応のサイトはデフォルトで参照できない時代が来るかもしれませんね。