WordPressサイトをSSL化した時注意すること

先日の記事でLet’s Encryptを使ってSSL証明書を簡単に取得して使える事を書きました。

Let's EncryptでサイトをSSL化する流れ
SSLの導入というと少し前までは証明書がなかなかお安い値段ではないこともあって敷居がやや高く、主に個人情報等を取り扱うWEBサービスやECサ...
サーバー側に関しては証明書を取得してそれを読みこませればそれでOKなのですが、サイト全体をSSL化しようとした場合それだけだとちょっと不十分な場合があります。
キッチリSSL化が成功していれば大抵のブラウザでは先日の記事のように気持ちのいい緑色が現れるのですが、
606a61e6f1dd089093267f68c87a2808
すでにあるサイトにSSL証明書を適用してhttpsでアクセスしただけだとこんな感じで灰色の表示になることがあります。
これは気持よくないです。
上の画像はGoogle Chromeのものですが、FireFoxでアクセスしてみると原因がよくわかります。
34777ff0c220225ec40fdd6af0d2b4c5
「このページの一部(画像など)は安全ではありません」と出ます。
要するに、このページそのもの(htmlやphpファイル)はSSLで接続できているのに、そこから取得して使用しているCSSやjs、画像などのファイルに対してのリンクがhttpsではなくhttpになってしまっている場合こういう表示になります。

ペラのhtmlで出来ているならばファイルを直接いじって、リンクの箇所をhttpからhttpsに置換するか、相対パスでリンクを張ればいいのですが、WordPressを使用してサイトを構築している場合はWordPress側の設定と、記事内に記述してあるリンクを置き換える必要があります。

まずはWordPressサイトのhomeとWordPressのインストール先のURLを変更します。
5d3e13d4d5431774097b091895c35f18
ダッシュボードにログインし、設定>一般から上記2箇所をhttpからhttpsに変更します。
これでWordPressが生成するリンクのURLがすべてhttpsになりますので、テンプレート内のhome_url()等の関数やパーマリンクのURLが変更できたことになります。
WordPress上で記事を書いてエディターからリンクやメディアを追加した場合もhttpsでのリンクになりますので、今後追加する記事に関してはこれでOK。

次は過去の記事に含まれているメディア等のURLを置き換えます。
こちらは数が多いと大変ですので、DB内のポストの文字列を全置換します。
DBに対して直接SQL文やphpmyadminで置換してもいいのですが、こういう時便利なプラグインがありますのでソイツを使うのがおすすめです。

Search Regex は、検索のための完全な正規表現をサポートし、WordPressに強力な標準検索機能と置き換え機能を追加します。 …

このSearch Regexが基本的によろしいかと。
インストールと有効化ができたら、ツール>Search Regexを開きます。
58a3fbd14a0210652d2e4df1c5c516ef
使い方は非常に簡単で、Search patternに入力した文字列をSourceから検索し、下段のReplace patternに入力したものに置換する、というだけです。
記事本文はPost content内にありますのでこれを選択し、「http://ドメイン名」で検索し「https://ドメイン名」に置換します。
httpのみをhttpsに置換すると関係ない外部リンクなども置換してしまうのでそういう凡ミスはしないように。
入力したらSearchを押すと検索でヒットした箇所を一覧表示、Replaceを押すと置換するとどうなるかを表示し、Replace&Saveで実際にDB内のデータ置換を実行します。

ここまでで一通りWordPressサイト内はSSL接続になりブラウザのURL表示も気持ちいい緑色になったと思います。
もしこれでまだ灰色のまま……という人は見落としやすいところとして、ウィジェット内に手書きテキストで作ったリンク、自作テンプレート内にフルパスで記述してしまっている箇所、アフィリエイトサイトの場合ASPのトラッキング用のリンクなどがありますのでそれらを一度確認してみるとよろしいかと思います。

スポンサーリンク