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

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

サーバー側に関しては証明書を取得してそれを読みこませればそれでOKなのですが、サイト全体をSSL化しようとした場合それだけだとちょっと不十分な場合があります。
キッチリSSL化が成功していれば大抵のブラウザでは先日の記事のように気持ちのいい緑色が現れるのですが、

すでにあるサイトにSSL証明書を適用してhttpsでアクセスしただけだとこんな感じで灰色の表示になることがあります。
これは気持よくないです。
上の画像はGoogle Chromeのものですが、FireFoxでアクセスしてみると原因がよくわかります。

「このページの一部(画像など)は安全ではありません」と出ます。
要するに、このページそのもの(htmlやphpファイル)はSSLで接続できているのに、そこから取得して使用しているCSSやjs、画像などのファイルに対してのリンクがhttpsではなくhttpになってしまっている場合こういう表示になります。

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

まずはWordPressサイトのhomeとWordPressのインストール先のURLを変更します。

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

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

このSearch Regexが基本的によろしいかと。
インストールと有効化ができたら、ツール>Search Regexを開きます。

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

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