【体験談】エックスサーバー、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設定を追加する(確定)
これだけです。
このあと、設定が反映されるまで1時間程度かかりますので少し待ちます。
「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の場合は、どこに手をつければ修正できるのかわかりにくくて、そこで悩んでしまうわけですが。^^;
「細かいことは気にしないよ!」
という人は、目立つところだけ修正しておけばいいのかもしれませんね。
最短距離で成果に到達し、将来も安定して報酬を得続けるために
こちらで私の持つ知識をまるごとお伝えしています。
速水鏡の東大式「パソコンで収入を作る」講座
ネットビジネスで生き残るための「3つの必須スキル」プレゼント中
何でも気軽にお問い合わせください。また、「これについて解説してほしい」というのがあれば知らせてください。^^