契約中のレンタルサーバが無料の独自SSL「Let's Encrypt」の提供を開始したので、当ウェブサイトを常時SSL化しました。
SSL（Secure Socket Layer）とは、ウェブブラウザとウェブサーバ間で通信されるデータを暗号化する技術のことです。
※レンタルサーバは、ネットオウルのファイアバードです。現在はサービスを統合して、スターサーバーという名称になっています。
WordPressのSSL化の手順
大きく分けて、「SSL化する作業」と「SSL化で起こるエラーの検証・修正作業」の2つになります。
SSL化する作業
- データベースをバックアップ
- SSLを有効にする
- WordPress管理画面でURLを変更
- 記事内（データベース）のURLを変更
- .htaccessにリダイレクト用のコードを追加
SSL化で起こるエラーの検証・修正作業
- WordPressのテーマをチェック
- SSL通信時のエラーの検証と修正
- 他サービスの設定変更
WordPressのデータベースをバックアップ
簡単な作業でも何があるか分からないので、バックアップはMustですね。
データベースのバックアップには、WordPressプラグインのBackWPupを使用しました。
レンタルサーバが提供しているphpMyAdminなどの管理ツールでも可能ですが、BackWPupはワンクリックでローカルにダウンロードできるのでお手軽です。
バックアップの手順は、プラグインをインストールして有効化後、WordPress管理画面のメニュー「BackWPup」の「ダッシュボード」をクリック。
ダッシュボード画面が表示されたら、「1クリックバックアップ」の「データベースのバックアップをダウンロード」ボタンをクリックするとローカルにダウンロードされます。
レンタルサーバでSSL（Let's Encrypt）を有効にする
ファイアバード（現スターサーバー）の場合になりますが、サーバー管理ツールにログイン後にメニューの「ドメイン」->「SSL設定」を開きます。対象ドメインを選択し、「無料独自SSL追加」からSSL設定が可能です。クリックのみで完了するのでお手軽ですね。
無料独自SSLを設定した直後に https://ドメイン名 にアクセスすると以下のような警告が表示されますが、55分ほどでSSLが有効になり、正常にアクセスできるようになりました。
WordPress管理画面でURLスキーム（http→https）を変更
https://ドメイン名 で表示できるようにWordPress管理画面のメニュー「設定」->「一般」にある、WordPress アドレス (URL)の http を https に変更します。
WordPressを別ディレクトリにインストールしている場合は、入力済みのサイトアドレス (URL)の変更もお忘れなく。
この作業で、投稿記事以外の部分（関数 home_url() などのディレクトリURLを取得して表示している部分）が全て変更になりました。
データベースの「http://ドメイン名」部分を書き換える
投稿記事に挿入した画像やサイト内リンクは、httpから取得＆httpへリンクしている状態なので、WordPressのプラグインを使って、投稿記事内にある http://ドメイン名 を https://ドメイン名 に書き換えます。
一括置換にはSearch Regexプラグインが有名ですが、現時点で最終更新が2年前なので、Search & Replaceを使用しました。
※Search & Replaceのバージョン3.1.2は、正規表現で一括置換の機能はありません。
Search Regexプラグインのタブにある「Search & Replace」から一括置換が可能です。
※「Dry Run」をチェックするとテスト状態になり、実際に書き換わる部分を確認できます。実際にデータベースを変更する場合は、Dry Runのチェックを外して実行「Do Search & Replace」してください。
.htaccessに301リダイレクト用のコードを追加
現時点では、http と https のウェブサイトが2つある状態になりますので、https へ転送（リダイレクト）する必要があります。
リダイレクトのステータスコードは、301を使用します。
301は、URLが恒久的に変更された場合に用いる転送処理のステータスコードになるので、検索エンジンの評価をそのまま引き継くことができます。
以下、.htaccessに追加している301リダイレクトのコードです。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
ブラウザのURL欄に https: では無く、http://ドメイン名 を入力してアクセス。
URL欄に「鍵」のアイコンが表示されていれば、SSL通信をしている状態です。
※お使いのブラウザによって表示は異なります。
ここまでの作業で、ウェブサイトの常時SSL化の作業は終了です！
あとは、SSLのエラーの検証・修正作業やGoogle Analyticsなど利用しているサービスの設定変更が必要になります。
ここまでの作業（SSL化）で気になった点
robot.txt のURL
サーバのルートに配置されている robot.txt に記載のSitemap URLも忘れず変更を。
.htaccessの意図しないリダイレクト
https へのリダイレクトは、.htaccessの一番最初に記載するのが正しいかと思いますが、私の環境の場合、トップページにリダイレクトする現象が起こり難儀しました。トップページとWordPressのインストールディレクトリが異なる場合は、#BEGIN WordPress 〜省略〜 #END WordPress が自動で追加されるので、順番にご注意ください。
ウェブブラウザのキャッシュ
次の項目の検証作業で、ウェブブラウザのキャッシュが残っていると http から画像などを読み込んでいると認識（混在コンテンツ）して、SSLエラーが表示される場合がありますので、キャッシュクリアをおすすめします。
SSL通信時のエラーの検証と修正
SSL化したウェブサイトの場合、http から画像やファイルを読み込むと、暗号化され保護された通信と暗号化されていない通信が混在する状態になるので、「混在コンテンツ（Mixed Content）」として、以下のようにエラーが表示されます。
検証する箇所ですが、ここまでの作業でWordPressのプログラム部分は完了しているので、残りは投稿記事内で http から読み込んでいる以下になるかと思います。
- 画像ファイル（CDNやアフェリエイトなど）
- iframe（YouTubeなど）
1ページずつ確認するのは手間がかかるので、まずは、WordPressの管理画面の「投稿一覧」にある「投稿を検索」で、「http://」を検索して、修正する必要のある記事をリストアップして、作業の目安を把握するのが良いかと思います。
私の場合、かなり前のAmazonリンク画像とYouTubeの動画が数カ所ありましたが、手動で設定しました。
変更箇所が大量の場合でもアフェリエイトやYouTubeなどのタグの場合、規則性をもったタグを吐き出しているので、差異を把握して、Search Regexなどの「正規表現（regular expression）」の機能があるWordPressプラグインで一括置換すれば、手間がかからず正確で早いかと思います。
正規表現ですが、以下の例だとサブドメイン部分以外が合致している箇所を検索できます。
http://abc.example.jp/img/dummmy.gif など。
http://.*\.example.jp/img/dummmy.gif
ウェブブラウザでSSLのエラー部分を確認するには、コンソールで確認が可能です。以下はMacのブラウザでのコンソールの表示の仕方になります。
Safariは、メニューの「開発」->「Webインスペクタを表示」を選択。Webインスペクタが表示されたら「コンソール」タブをクリック。
Chromeは、メニューの「表示」->「開発/管理」->「デベロッパー ツール」を選択。デベロッパー ツールが表示されたら「Console」タブをクリック。
Firefox Quantumは、メニューの「ツール」->「ウェブ開発」->「ウェブコンソール」から可能です。
WordPressテーマのURIスキーム（http, https）のチェック
私の場合、Bonesというブランクテーマをベースにjsやcssファイルの読み込みなど色々と編集・追加をしているので、WordPressのテーマを一括検索しました。
テーマは、wp-content/themes/ のディレクトリに格納されています。
テキストエディタ（Atom）で一括検索したところ、
http://www.ken-g.com は、自分で追加したOPG設定（header.php）、CSS、http から読み込んでいるGravatarのアバター画像の3箇所ありました。
Gravatarのアバター画像は、画像をキャッシュするために functions.php に追加した部分で、以下を参考に https に変更しました。
Gravatar - グローバルに認識されるアバター (Globally Recognized Avatars)
※「//」（スラッシュ2つ）から始まるURLは、先頭のURLスキームを判別してくれるので、変更する必要はありません。例えば、Google Analysisのタグ内でJavaScriptを呼び出しているURLは、「//」から始まりますね。
他サービスの設定変更
ここまでの作業で、ウェブサイトのSSL化の作業は終了ですが、利用しているサービス・ツールなどの設定を変更する必要があります。
私が使用しているサービス・ツールで設定を変更したものをいくつか掲載します。
SSL化に伴うGoogle Search Consoleの設定変更
https は別サイト扱いになるので、新規サイトとして追加する必要があります。
Google Search Consoleにログイン後、「プロパティを追加」ボタンから https のプロパティを作成。プロパティの追加後は、サイトマップの送信、Google Analyticsとの関連付けで完了です。
Google Analyticsとの関連付けは、メニューの「管理」->「プロパティ設定」の「Search Console」にある「Search Console を調整」から可能です。
追加したhttpsのウェブサイトは、別サイトとして扱われるので、インデックスされていない状態になります。私のウェブサイトの場合、2018年1月4日にSSL化 → 1月6日頃からインデックスされ始め、1月13日にほぼインデックスされました。
Googleの検索結果に表示されるURLですが、1月6日頃には主要なページは https となっていたので、Search Consoleへの反映はタイムラグがあるようです。
SSL化に伴うGoogle Analyticsの設定変更
Google Analyticsにログイン後、メニューの「管理」->「プロパティ設定」の「デフォルトの URL」を https に。
SSL化してもSNSのシェア数を引き継ぐ
WordPressのプラグインSNS Count Cacheを利用している場合になりますが、設定の「HTTPからHTTPSへのスキーム移行モード」を「有効」にして「設定の更新」ボタンをクリックすると合算されるようになります。
ウェブサイトをSSL化してみて
SSL化によるメリットとデメリットがありますが、何よりもウェブサイトのセキュリティが強化されたことが一番ですね。