ようやく重い腰を上げて当ブログを常時SSL(HTTPS)化しましたので、WordPressサイトを常時SSL化するための手順をまとめておきたいと思います。
作業の流れとしましては、以下のような感じになります。
ステップ1: SSL証明書のインストール
ステップ2: Better Search ReplaceでURLを置換
ステップ3: WordPressのアドレス設定を変更
ステップ4: テーマカスタマイザーで画像の再設定
ステップ5: ウィジェット内のURLを変更
ステップ6: カスタムメニューのURLを変更
ステップ7: テーマ内のURLを変更
ステップ8: プラグインで指定しているURLを再設定
ステップ9: .htaccessでリダイレクト設定
ステップ10: サイトの表示確認
ステップ11: GoogleアナリティクスとSearch Consoleの設定を変更
WordPressサイトを常時SSL化する手順
ステップ1: SSL証明書のインストール
まずは、対象のサイトに対してSSL証明書を発行・インストールします。エックスサーバーでのSSL証明書インストール手順は、こちらの記事を参考にしていただければと思います。
ステップ2: Better Search ReplaceでURLを置換
Better Search Replaceを使って、投稿内のURLをhttpからhttpsに置換します。当ブログの場合は、「http://techmemo.biz」→「https://techmemo.biz」に置換します。URLの一括置換は、Database Search and Replace Script in PHPを使ってもOKです。
また、アフィリエイトや外部サービスのタグを設置している場合は、それらのタグもSSL対応のURLに変更が必要です。以下は、主要なASPや外部サービスのURLです。「SSL非対応」のURLで検索して、「SSL対応」のURLに置換します。
| ASP/サービス名 | SSL非対応 | SSL対応 |
|---|---|---|
| A8.net | http://px.a8.net | https://px.a8.net |
| Amazonアソシエイト | http://www.amazon.co.jp | https://www.amazon.co.jp |
| Amazonアソシエイト(画像) | http://ecx.images-amazon.com | https://images-fe.ssl-images-amazon.com |
| 楽天アフィリエイト | http://thumbnail.image.rakuten.co.jp | https://thumbnail.image.rakuten.co.jp |
| バリューコマース(パターン1) | http://ck.jp.ap.valuecommerce.com | //ck.jp.ap.valuecommerce.com |
| バリューコマース(パターン2) | http://ad.jp.ap.valuecommerce.com | //ad.jp.ap.valuecommerce.com |
| バリューコマース(パターン3) | http://atq.ad.valuecommerce.com | //atq.ad.valuecommerce.com |
| もしもアフィリエイト(パターン1) | http://c.af.moshimo.com | //af.moshimo.com |
| もしもアフィリエイト(パターン2) | http://i.af.moshimo.com | //i.moshimo.com |
| もしもアフィリエイト(画像) | http://image.moshimo.com | //image.moshimo.com |
| レントラックス | http://www.rentracks.jp | https://www.rentracks.jp |
| レントラックス(画像) | http://www.image-rentracks.com | https://www.image-rentracks.com |
| Google Map | http://maps.google.co.jp | https://maps.google.co.jp |
| はてなブログカード | http://hatenablog.com/embed?url= | https://hatenablog-parts.com/embed?url= |
| Feedly | http://s3.feedly.com | https://s3.feedly.com |
| ShareHTML | http://capture.heartrails.com | https://capture.heartrails.com |
同じASPでもURLのパターンがいくつか存在している場合があるので、ご注意ください。
ステップ3: WordPressのアドレス設定を変更
[設定] – [一般]の中にある「WordPressアドレス」と「サイトアドレス」をhttpsで始まるURLに変更します。
ステップ4: テーマカスタマイザーで画像の再設定
[外観] – [カスタマイズ]で設定しているロゴやサイトアイコンの画像を再登録します。
ステップ5: ウィジェット内のURLを変更
ウィジェット内で記述されているサイトのURLや画像パスをhttpからhttpsに変更します。「カスタムHTML」ウィジェットを設置している場合は、URLや画像パスが”http”になっていないかチェックしてみてください。
ステップ6. カスタムメニューのURLを変更
[外観] – [メニュー]にアクセスし、カスタムリンクで直接URLを指定している箇所があったら、https://から始まるURLに変更します。
ステップ7: テーマ内のURLを変更
テーマ内に直接URLを記述している箇所がある場合は、URLをhttpからhttpsに変更します。
できればURLを直接記述するのではなく、get_theme_file_uri()やhome_url()などの関数を使って指定した方が良いです。
ステップ8: プラグインで指定しているURLを再設定
プラグインの設定でURLを指定している箇所がある場合は、httpsで始まるURLに変更しましょう。意外と見落としがちな部分ですね。
例えば、プラグインを使ってユーザープロフィールの画像を設定している場合などは、面倒ではありますが画像を再設定する必要があります。
ステップ9: .htaccessでリダイレクト設定
ルートディレクトリにある.htaccessに以下を追加して、リダイレクトを設定します。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>WordPressの場合、インストール時にリダイレクトの記述が追加されていますので、SSL化のリダイレクト設定はそれよりも上に追加するようにしましょう。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPressWordPressが追加するリダイレクトの記述の最後尾に、SSL化用の記述(RewriteCondとRewriteRule)を追加しても動作します。ですが、サイトによってはトップページ以外がうまくリダイレクトされないことがありました。確実に設定するなら、WordPress用の記述とSSL化用の記述は分けておいた方が良いです。
ステップ10: サイトの表示確認
ここまで設定できたら、サイトの表示確認を行いましょう。Google Chromeの場合、アドレスバーに「保護された通信」と出ていれば問題ありません。
「保護された通信」とならない場合は、画像などがHTTPで読み込まれていて、混在コンテンツとなっている可能性があります。その場合、デベロッパーツールの[Console]タブで、どの部分が混在コンテンツになっているか確認できます。
Mixed Content: The page at 'https://techmemo.biz/' was loaded over HTTPS, but requested an insecure image 'http://techmemo.biz/wp-content/uploads/2016/05/techmemologo.png'. This content should also be served over HTTPS.メッセージを確認して、HTTPで読み込まれているコンテンツを修正しましょう。
ステップ11: GoogleアナリティクスとSearch Consoleの設定を変更
Googleアナリティクスは、プロパティ設定で「デフォルトのURL」をhttpからhttpsに変更します。Googleアナリティクスのプロパティ設定は、管理画面の左側にある[管理]からアクセスできます。
Search ConsoleはURLの変更ができないので、httpsで始まるURLを新たに登録しましょう。サイトマップの送信もお忘れなく！
ちなみに、SSL証明書が適用されてすぐにSearch Consoleに登録すると、「SSL/TLS証明書にドメイン名 https://techmemo.biz/ がありません」という警告メッセージが届く場合があります。メッセージの詳細は以下の通りです。
https://techmemo.biz/ のウェブマスター様
https://techmemo.biz/ で使用されている現在の SSL / TLS 証明書にドメイン名 https://techmemo.biz/ が含まれていないことが判明しました。このためブラウザによっては、貴サイトを安全ではないウェブサイトとして認識している可能性があります。この結果、多くのウェブブラウザが、貴サイトにアクセスしたユーザーにセキュリティ警告メッセージを表示してユーザーをブロックすることになります。これは、安全でないサイトで起こりうる、第三者によるユーザーの閲覧の傍受を防ぐための措置です。
すでに TLS 証明書を置き換えている場合は、このメッセージを無視してください。ウェブサイトの安全性の向上にご協力いただき、ありがとうございます。
推奨される対処方法:証明書を更新する
この問題を修正するには、現在の証明書を更新して証明書で保護されているドメインの一覧にドメイン名を追加するか、ドメインの SSL / TLS 証明書を新たに取得していただく必要があります。証明書は、ウェブブラウザによって信頼されている認証局（CA）から発行されたものをご使用ください。
このメッセージは、SSL証明書のインストールが完全に完了する前にSearch Consoleに登録した場合に送られてきます。「すでに TLS 証明書を置き換えている場合は、このメッセージを無視してください」とあるように、メッセージは無視しても問題ありません。
SSL証明書のインストールから数時間以上経過していたのにメッセージが届いた場合は、SSL証明書を発行したサーバー会社にお問い合わせください。
あとがき
手動で常時SSL化するための手順をご紹介しましたが、プラグインを使う場合は「Really Simple SSL」を導入すると楽にSSL対応できます。
また、サーバーがwpXの場合は「SSL化補助機能」という機能があり、ワンクリックで以下の項目を変更できます。
- 管理画面のWordPressアドレスとサイトアドレス
- 投稿記事・固定ページの本文に記載のサイトURL
- テーマフォルダ内のファイルに記述のURL
- リダイレクト設定
なかなか面倒で神経を使う作業ではありますが、SSL化への流れは年々強まっていますし、セキュリティの観点からも対応しておきたいですね。