RAKUIN

WordPressサイトのHTTPS(SSL)化でやったこと、やるべきこと

SSLの導入が済んだら、次はサイトをHTTPS化するという作業が始まります。さくらのサーバの場合は常時SSL化プラグインもあるんですが、プラグインが動かない=https アクセスできなくなるらしいので、やはり手作業で対応することにしました。

タスクはザッとこんな感じで全7工程。

なんと面倒な… 可能ならぜひともサイト立ち上げ時からHTTPS対応しておきたい所。では1つずつクリアしていきましょう。


WordPressのアドレス変更

WordPress管理画面で設定>一般と進み、WordPressアドレスとサイトアドレスを https に変更しましょう。

カンタン。はい次。

wp-config.phpの修正

次はwp-config.php の先頭に以下のコードを追記します。

wp-config.php

if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
  $_SERVER['HTTPS']       = 'on';
  $_ENV['HTTPS']          = 'on';
  $_SERVER['HTTP_HOST']   = 'example.com';
  $_SERVER['SERVER_NAME'] = 'example.com';
  $_ENV['HTTP_HOST']      = 'example.com';
  $_ENV['SERVER_NAME']    = 'example.com';
}

example.com はもちろん自分のドメインに書き換えましょう。

各ソースの絶対パス変更

CSS、PHPなどの絶対パスを全て https に変更します。一括置換で終わらせたいところですが、外部サービスのプラグインなどの中には http でないとダメな場合があるので要注意。

投稿内の絶対パス変更

WordPress には一括置換機能がないんですよね。なのでプラグイン導入。

一番メジャーな Search Regex は、Webページとしては置換されているのに、投稿編集画面だとなぜか置換されておらず、その状態で編集したら置換前に先祖返りする現象に遭遇。仕様なのか何なのか、原因は追求していませんが面倒なので使用を断念。

で、代わりに Search & Replace というプラグインを使って一括置換しました。Better Search Replace とそっくりですが、置換内容をプレビューできるのが良かったのでこちらに。

Dry Run で確認し、問題なさそうであれば置換実行。取り消しはできないのでくれぐれも慎重に。もちろんバックアップもお忘れなく。

Search & Replace の画面。プレビューは上にリンクが表れ、それクリックで確認できます。

.htaccessの設定(さくらのサーバ)

まずは記述したコードから。

.htaccess

RewriteEngine On
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]

さくらのサーバならではの注意点

  1. %{HTTPS}でSSL情報をうまく取得できないため特定の記述(HTTP:X-Sakura-Forwarded-For)が必要
  2. %{HTTP_HOST}で www の有無を判別できないため、RewriteRule はhttps://%{HTTP_HOST}%{REQUEST_URI}とせずに直接記述が必要

さくらは上記の点がイレギュラーで、一般的な方法ではダメなんですね。特に2つ目はリダイレクトループにはまるので要注意。加えて www 有り/無しで統一しようとするとさらにややこしく、ここで随分悩まされました。

参考サイト

.htaccess – さくらサーバーのhtaccessでhttpsを検知するには – スタック・オーバーフロー

こちらの回答の中に、www 有り/無しの統一方法も紹介されていました。神でした。

さくらのサーバでちょっと凝ったことをする時は、方法を知っててもまずググる方が良いかもしれませんね。

Google Analytics と Search Console の設定変更

忘れられがちな作業ですが、これをやらないと認識されないので必須です。正直一番しんどい箇所でした。

ここも落とし穴があって、Search Console は https に修正するのではなく、https 化したものを新規登録しなければならないということを知らず、またしても随分悩まされました。

冷静に考えれば、ミスの早期発見のためにも http を残す方が得策なんですが、すぐ変更してしまおう!と思ってしまったんですよね。

こちらは以下の参考サイトのお陰で無事にクリア。誠に感謝でございます。

参考サイト

動作確認

最終工程。サイトを実際に https で表示してみましょう。アドレスバーの鍵アイコンが緑になっていればOKです。

もしアイコンがグレーになっている、×が付いている、警告アイコンが付いている、そもそも鍵じゃない等の状態だった場合は、どこかに http が残っている可能性があります。Chrome なら、デベロッパーツール>Security で右上の警告マークをクリックすれば個数と箇所をカンタンに確認できます。サクッと修正しましょう。

最後に念のため、Firefox なら鍵アイコンをクリック、Chrome ならデベロッパーツール>Security で認証局をチェックし、間違いがないか確認してみましょう。

OKな場合、Valid HTTPSと言ってもらえます。嬉しい。

NGな場合はこうやって叱られます。でも理由をちゃんと教えてくれるから嬉しい。人はこうやって成長していくんですね。

以上でサイトのHTTPS化は完了です。お疲れさまでした。