【体験談】エックスサーバー、WordPress、賢威で常時SSL（https）化～エラーとの戦い？

SSL化というのは簡単に言えば、URLの最初の部分をを

「http」

から

「https」

に変えるだけのことです。

これで通信が暗号化されるわけですが、パスワードとかクレジットカード番号を入力するページでもない限り、特に必要性はないわけです・・・

が！

Googleさんが

「これからはhttpsのほうを標準にするよ！」

と前々からおっしゃっているので、とうとう私もワードプレスブログのSSL化に着手することにしました。

SSL（https）化の手順～チェックリスト

手順自体はそれほど難しくはありません。以下の通り。

①エックスサーバーの管理画面でSSL設定（数クリックで終了）
②全ページ、httpからhttpsへリダイレクト（転送）
③WordPress管理画面の設定でhttpをhttpsに変える
④サイト内に書いてあるURLをすべてhttpsに変える
⑤新しいURLをサーチコンソールに登録

これだけです。

まあブラックSEOをやっている人は⑤は省略するかもしれませんね。

順番に説明しましょう。

エックスサーバーの管理画面でSSL設定

これは非常に簡単です。

エックスサーバーにログインして、

設定したいドメインを選択
→SSL設定
→独自SSL設定の追加
→独自SSL設定を追加する（確定）

これだけです。

このあと、設定が反映されるまで１時間程度かかりますので少し待ちます。

「https」のほうのURLでサイトが表示されるようになったら次の手順に進みます。

全ページ、httpからhttpsへリダイレクト

私はここで少しつまずきました。

エックスサーバーのマニュアルにある通り、エックスサーバー管理画面の「.htaccess編集」から、以下のリダイレクトコードを追加してもトップページしかリダイレクトされなかったんです。

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

これはなぜなのか・・・考えてもわけがわかりませんので調べてみた結果、以下のコードを特定の場所に記入することで解決しました。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

ご覧の通り、エックスサーバーが指定しているコードとは微妙に違いますね。

それで、「特定の場所」というのは・・・「# BEGIN WordPress」の前です。そこに上記コードを記入することで、リダイレクトもうまくいきました。

WordPress管理画面の設定でhttpをhttpsに変える

これはWordPressの管理画面にログインして、「設定」をクリックすると、

「WordPress アドレス (URL)」
「サイトアドレス (URL)」

というのがありますよね。ここをhttpsに書き換えるだけです。「s」って付け加えるだけです。

ただここにまったく違うURLを記入してしまうと、ログインできなくなりますので緊張はしました。^^;

まあ「s」って付け加えるだけなんですが。^^;

サイト内に書いてあるURLをすべてhttpsに変える

これは、サイトのバナー画像のURLとか、記事内に書いてある画像やリンクのURLをhttpsに変えるということです。

ここでhttpが残っていると、ブラウザでサイトを表示したときに、

「このサイトへの接続は完全には保護されていません」

なんて表示されて気分が悪いです。^^;

この通り。

どこに表示されるのかというと、ブラウザのURL欄の左側にあるアイコンをクリックすると表示されます。これはGoogle Chromeの例です。

他のブラウザでもアイコンの位置は同じです。デザインは違うでしょうけど。

記事内のURLについては「Search Regex」というプラグインを使えば一括で変換できるので楽です。

ただそれでもhttpはどこかに残ってしまいますので、そこは調べて書き換えなければなりません。

上記バナー画像以外では、たとえば・・・

・ウィジェット内の記述
・はてなブックマークボタンなどの画像URL
・その他画像URL

こういうところが怪しいです。

「このサイトへの接続は完全には保護されていません」と表示されるページのソースを表示させて、それをテキストエディタに貼り付けて「http://」を検索して探すと早いです。

で、見つけたら手作業で書き換えると。

例えば、サイトのヘッドバナーですが、賢威の場合は、

外観→テーマ編集→「design.css」

と進むと、ヘッドバナーのURLを見つけることができます。

はてなブックマークの場合は「hatena.php」にURLが出ています。

こういうところを手作業で書き換えていきます。

※ただ賢威の「はてなブックマーク」アイコンは書き換えてもダメなことがあるので（謎ですが）その場合は消してしまうのもいいと思います。「social-button.php」で「<li class=”sb-hatebu”></li>」を削除します。

まとめ

ということで。

WordPressSSL化の手順でいちばん面倒だったのはサイト内のURLの書き換えでした。

プラグインで一括置換しても残ってしまいますからね。^^;

これが通常のHTMLサイトですと、置換ソフトを使って一気に書き換えることもできると思います。

WordPressの場合は、どこに手をつければ修正できるのかわかりにくくて、そこで悩んでしまうわけですが。^^;

「細かいことは気にしないよ！」

という人は、目立つところだけ修正しておけばいいのかもしれませんね。