WordPress サイトに SSL/TLS を導入して https 化してみた

PC
スポンサーリンク

前回、静的サイトを SSL/TLS 化しました。

さくらVPS Debian jessie に Certbot で SSL/TLS を導入してみた
Google が https 対応したサイトを検索順位に優遇すると発表したことで、うちのサイトも対応しないとなーと思っていました。調べていると、最近は証明書も無料で取得できるところもあったりするので、時代の流れを感じます。今回は、L...

意外にあっさりと移行できることがわかりましたので、今回は WordPress を使っているこのサイトを SSL/TLS 化してみました。

いろいろと面倒なところがありましたので、僕が進めた作業をそのままの順番で載せていきます。

[q3-adsense01]

スポンサーリンク

SSL/TLS を導入した WordPress 情報

  • WordPress 4.8.2
  • Xeory_Base の子テーマ

事前にデータベースのバックアップを取る

これは非常に大事です。

何か新しいことをする場合は、必ずしておく癖を付けておきましょう。

僕は、バズ部のバックアップ方法を参考にしています。

BackWPUpで確実にWordPressのバックアップを取る方法

Certbot を使った SSL/TLS サーバ証明書の取得

このサイトも前回と同じ さくらVPS に入っています。

同じ方法でサーバ証明書を取得していきます。

取得方法は、前回の記事を参照してください。

今回も常時 SSL/TLS 化にするので、「2: Secure」を選択しました。

サイトの確認

https になるか、普通にサイトを開いてみましょう。

トップページはエラーもなくきちんと表示されていますね。

緑色で鍵マーク、「保護された通信|https://」になっていればきちんと SSL/TLS 化が出来ています。

画像もサイト内リンクも「https://」になっていました。

WordPress設定でURLを変更する

SSL/TLS 化が出来たら、まずは設定する箇所があります。

「設定」→「一般」を開きます。

アドレスを「http://」から「https://」へ変更します。

「変更を保存」を押して終了です。

 

[q3-adsense01]

記事ページはエラー(これは僕の設定ミス)

記事ページを見てみると、きちんと SSL/TLS になっていません。

ページの中に「http://」が入っているとこのように暗号化されなくなります。

エラー場所確認

どこでエラーになっているのか調べてみましょう。

Google Chrome のデベロッパーツールを使います。

ページを開いたら「F12」を押します。

Console」タブをクリックすると、エラー一覧が表示されます。

黄色くなっているエラーをよく見ると、http じゃないですよっていうメッセージがありますね。

どのリンクがエラーになっているかクリックしてみると、

この画像がエラーになっている!

ちなみにどこに表示されているか調べてみました。

ここですね。

アバター画像を表示する時に、「http://」でリンクを貼っています。

これは、僕がオリジナルアバターの画像先を「http://」で設定していたのが原因でした。

このアドレスを変更します。

http:」を削除することで、httphttps も対応してくれます。

保存して再確認してみると、無事に SSL/TLS 化されました。

Google アナリティクスの設定&サーチコンソールの新規追加

これも前回やったことをそのまま同じように設定します。

さくらVPS Debian jessie に Certbot で SSL/TLS を導入してみた
Google が https 対応したサイトを検索順位に優遇すると発表したことで、うちのサイトも対応しないとなーと思っていました。調べていると、最近は証明書も無料で取得できるところもあったりするので、時代の流れを感じます。今回は、L...

さいごに

僕の設定ミス以外は全く問題なく終わりました。

ただ、すべてのページを見れているわけではありませんので、おかしいところがあれば順次直していこうと思います。

今回は記事内リンクのアドレス変換とか、データベースのアドレス変換とか、そういうこともする必要もありませんでした。

これは、Wordpress のバージョンが新しくなったのがよかったのか、

バズ部のテーマ Xeory Base がよかったのか、

Certbot で設定したのがよかったのか、

それとも総合的によかったのかわかりませんが、同じように設定すれば簡単に移行することができることがわかりました。

この組み合わせは本当に神なのかもしれません。

他の WordPress もどんどん移行していこうと思います。

 

[q3-adsense01]

コメント