Wordpressを常時SSL化する時のやることリスト

みなさんこんにちは、とーますです。
タイトルの常時SSL化については、年々対応してないサイトへのペナルティが増してきました。
そして2019年10月にGoogleは、自社のブラウザソフト「Google Chrome」にて、2020年2月のアップデートで「混合コンテンツ(SSL未対応)ページの画像を非表示する」と発表しました。
これは...大変なことだ!!ということで既に対応を済まされてる方が多いかと思いますが、私がやるときに確認したリストを共有します。


1.サーバーサイトで独自SSLの設定を行う

最初は「https〜」のURLでアクセスすら出来ないはずです。
常時SSL対応したいドメインに対して、独自SSLの設定を行いましょう。
基本的には、無料SSL証明証で大丈夫です。


2.Webサイトのバックアップを行う

完全に常時SSLに移行する前に、バックアップを取っておきましょう。
何かあった場合に、その前の状態に戻せるようにしておきます。
バックアップは、プラグイン「BackWPup」で取る分で十分です。
具体的な使い方はこちらの4番目を参考にして下さい↓


3.WordPressの設定でURLを変更する

ここからWordPressの管理画面に移ります。
設定 > 一般 より下記のURLを変更します。
・WordPressアドレス(URL)
・サイトアドレス(URL)
http:〜のURLを、https:〜に変更します。
必ず2つのURLを同時にs付けてください。

すると再ログインすることになると思います。
これで、https:〜のURLで表示が一応できるようになります。
次の工程からは、ちゃんと常時SSL化を行ってブラウザソフトのURL欄に鍵マークが表示されるようにしていきます。


4.Search Regexを使って、ブログ・固定ページ等の記述URLを置換する

プラグイン「Search Regex」を使用して、サイト内でベタ書きしている「http:〜」から始まるURLを置換していきます。
というのは、ページ内に「http:〜」から始まるURLがあると、混合コンテンツと見なされて、そのページはSSL化とならないのです。

カスタム投稿ポストを使用している場合は、通常のSearch Regexでは置換対象に含められません。
ですが、カスタム投稿ポストも置換対象に含める方法を紹介されているブログがあります。下記を参考にしてください↓

追記:
このSearch Regexはとても便利なのですが、「数年更新されてないから危険」というご指摘を頂きました。しかし、現在代替プラグインがないため使用するしかなさそうです。
使用する際は、使うときだけインストールして、使い終わったら削除してしまいましょう。


5. メニュー内のカスタムリンクを修正

WordPress管理画面の外観 > メニュー で、カスタムリンクを使用している場合は修正が必要です。このカスタムリンクは任意のURLを手動で入れられるため、ちゃんとsを付けてあげる必要があります。


6.テーマ独自設定のhttp箇所を修正

例えば、TCDのテーマであれば、外観 > テーマオプションという編集画面があって、トップページのバナーのURLを手動入力できるテキストボックスがあります。そこのURLを全て変更します。

私がハマった画像がhttpsにならない問題
URLと同じように、バナー画像もこちらで設定します。
しかし、バナー画像のURLにsが付かないのです。悩んだ挙句、登録されているバナー画像を削除して、もう一度同じ画像を登録すると...sが付きました。それだけのことです。

他にも、functions.phpの中にURLをhttp:〜で直書きしているところがあるとか、テーマによって修正する箇所が異なりますが、全て対応します。


7.全ページアクセスして、常時SSL化となっているか確認

ここまできたら、確認作業です。
基本的には常時SSL化となっているかと思いますが、鍵マークが付いていないページがあれば「ソースコードを表示」して、どの箇所に「http:〜」から始まるURLが含まれているか確認しましょう。


見落としがちな常時SSL未対応の原因

ソースコードで見ると、http:〜始まるURLをどこから編集すればいいのかわからなかったり、http:〜のURLがないのに鍵マークが付かなかったり、私がハマった問題を共有します。

ブログのユーザープロフィール画像
コメントの返信欄とかにも表示されるプロフィールアイコンですね。プラグイン「Simple Local Avatars」とか使っている場合は、画像を登録し直すとsが付きます。

CSSの背景画像
phpファイルを徹底的に修正し尽くして、サイトを見てみたら鍵マークが付かない。ソースコードを見ても「http:〜」始まるURLはない...その場合はstyle.css内に「http:〜」を直書きしているケースでしょう。修正しましょう。
基本的にstyle.cssの中に直書きはよくないですけどね...

font-awesomeでアイコンを使う場合は、読み込みURLをhttp→httpsに
原因ではないですが...URLの中には、sを付けなくても鍵マークが付くものもあります。(HTML5の宣言内容とかは逆にsを付けない方が良いとされていたり)
ただ、ヘッダーに書いているfont-awesomeの読み込みURLにはsを付けないとアイコンが非表示になってしまうので、s付けましょう。


その他:Googleアナリティスクの設定変更

下記の2箇所のURL設定を変更してください。
・プロパティ
・ビュー
サーチコンソールを使ってる方は、そちらも忘れずに。


その他:.htaccessにリダイレクト用のコードを追記

サーバーによっては、親切にリダイレクトしてくれる所もあるかもしれませんが、基本的には自分でやる感じかと思います。
下記のコードをFTP上にある.htaccessの一番上に追記します。

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

http:〜のURLでアクセスしたら、トップページも下層ページもリダイレクトしてくれます。参考はこちら↓


はい、という感じになります。
全ページ反映したら、もう一度全ページ確認することをお勧めします。

さて、2020年2月から一体どこまで画像が非表示にされるのでしょうか。
まだまだ常時SSL対応できないサイトは世の中にたくさんありそうなので、本当に画像が全然ないテキストサイトみたいなサイトが大量発生するのか...

今後も常時SSL対応されていないサイトへのペナルティは加速して行くと思われます。今回の画像が表示されなくなる話はGoogle Chromeのみですが、他社ブラウザソフトでも同じようなペナルティが課せられて行くことでしょう。

事前に対応するための準備は怠らずにやっていきましょう!
最後までご覧いただきありがとうございました。
下記、参考記事になります。


いいなと思ったら応援しよう!