WordPressサイト常時SSL化(HTTPS化)対応・設定方法と注意点

WordPressサイト常時SSL化(HTTPS化)対応・設定方法と注意点

数ヶ月前の話になるのですが、このブログArrownを常時SSL化(HTTPS化)対応しました。
わかりやすくいうと、ブログのURLをhttp://arrown-blog.com から、https://arrown-blog.com にしたということです!

個人のWordPressブログで、何でわざわざ常時SSL化(HTTPS化)対応・設定したのかという声も聞こえてきそうですが、きちんとした理由があります。

実は、とある仕事で常時SSL化(HTTPS化)対応・設定をしなければならない状況がありまして、自分のWordpressブログを人柱にして、常時SSL化(HTTPS化)対応・設定方法を確認してまとめたかった、というのが理由です。

今回、せっかくなので、その時に対応した内容をまとめて、簡潔に噛み砕いた形で、記事にしてみました!

このブログArrownがWordPressで作られていることもあるので、WordPressをエックスサーバで動かしているブログでの対応を事例にお話を進めてみたいと思います!

WordPressでブログ運営をされている方にはきっと役立つと思いますので、ぜひご覧になってみてくださいね!

WordPressの常時SSL化(HTTPS化)対応設定のために必要な事項リスト

まず、WordPressの常時SSL化(HTTPS化)対応・設定をするには何が必要なのか?? 並べてみました。

  • SSL証明書を取得(これがないと、常時https化設定をしても、安全が証明されていないとしてエラーになる)
  • サイト内のコンテンツ、画像、CSSやJavaScriptを読み込みしているパスを全てhttpsから始まるものにする
  • httpのアドレスにでアクセスしてきた人をhttpsのアドレスに転送するための設定をする
  • Google Analyticsの設定変更
  • Google Search Consoleの設定変更

このようなところでしょうか!
https://www.xserver.ne.jp/news_detail.php?view_id=2767

本来、独自のSSL証明書は有料なのですが、このブログでも使用しているエックスサーバでは、現在無料で使用することができるようになっています。
ということで、今回はエックスサーバで無料で使えるものを使用して、常時SSL化(HTTPS化)対応・設定を実行してみた次第です。

1,SSL証明書の申し込み、取得

まずはこちら、これがないといくらブログのURLを強制的にhttpsに変更しても何の意味もないので、SSL証明書を取得してみます。

https://www.xserver.ne.jp/manual/man_server_ssl.php

エックスサーバの場合は、上記の記事を読めば大体のことは網羅されています。

https://www.xserver.ne.jp/support/faq/faq_service_ssl_setting.php

常時SSL化(HTTPS化)対応・設定に必要な証明書の取得・申し込みや、よくある質問に対しても大抵上記のページをながめていれば、何とかなりました。
餅は餅屋にではありませんが、その辺はエックスサーバ公式にお任せするのがいいでしょう!

WordPressのサイト設定でアドレスをhttpからhttpsに変更する

次に、WordPress側のサイト設定でアドレスをhttpで始まるものから、httpsで始まるものに変更します!

Wordpressのアドレス設定画面。

WordPressの管理画面から設定 → 一般に飛ぶと上記の画像で示した場所があるので、この部分の「WordPressアドレス」と「サイトアドレス」を、httpsから始まるものに変更するだけですね!

まあ簡単!
設定をすると一旦WordPressの管理画面からログアウトされますが、再度管理画面にログインすればOKなので、特に問題ありません。

WordPress内のコンテンツ、画像のパスを全てhttpsから始まるものにする

WordPressでつくられたブログに使用されている画像、CSS、JSなどを全てhttps対応に置き換える必要があるので、次にこれを実施します。

この書き換え作業をしておかないと、完全なる常時SSL化(HTTPS化)対応がされていないことになります。
確固たる安全が証明されていない状態になってしまう・・・何か悪いことが起きてもおかしくない、くらいに思っておくといいかもしれません。

WordPressのプラグイン「Search Regex」で一括変換!

WordPressブログの記事には、記事ごとに挿入している画像があるはずですよね!
地道に探しながら、一つ一つの画像のURLをhttps〜から始まるものに変換し直すのはとっても面倒ですよね・・・

実は、この面倒な作業を簡単に対処してくれるプラグインがあるんです!
さすが、WordPress!(というかWordPressのプラグイン開発者様!)

https://ja.wordpress.org/plugins/search-regex/

Search RegexというWordPressのプラグインを使えば、簡単に一括置換をしてくれることができます。
Search Regexを使って、WordPress各記事内で使用されている画像、CSS、JavaScriptなどを全て「https〜」から始まるように書き換えすればいいのです!

このプラグイン、めちゃくちゃ簡単です。
プラグインをインストールしたあとに、設定画面に行くと、こんな画面になっていると思います。

WordPressプラグインsearch-regexの設定画面

ここで上記画像のように、「search pattern」のところにhttp:を、「replace pattern」のところに「https:」を入れて、searchを押します。
一応ここで、変なものまで書き換えしてしまわないかを確認して、「replace & Save」を押せば、変換は完了になるんですね!

まあ、簡単!

ちなみに、「source」というところがあって、上記では「post content」となっていますが、この部分は一通り巡回して、全て確認の上、必要なものを置換作業しておくといいと思います!
(※「post content」になっていると、「置換検索対象がWordpress内にある各記事の本文」という意味になります。)

そのほか、Search Regexで変更しきれない部分をhttpからhttpsに変更する

Search Regexで変更しきれない部分は、手動で変更していくしかありません・・・!

ここで役立つのがFirefoxブラウザ・・・!

firefoxでサイトを閲覧した時の画面

この画面を見ていただきたいのですが、左上のURLが書いてあるところが緑カギマークになっています。
これは、このサイトがきちんとSSL対応(https化)されていて安全だよ、っていうのを示しています。

Firefoxでサイトを閲覧した時の画面

それに対して上記の画面。
左上のURLが書いてあるところが、黄色マークになっています・・・!

これは、かいつまんでいうと「このページ、httpsなんだけど何かhttpのものが混ざってるよ!」っていう意味になるのです。
(僕も今回の記事を書くにあたり見直してしていたら、見落としてしまっている記事があることに気づきました・・・お恥ずかしい限り)

じゃあ具体的にページのどの部分がhttp混ざっちゃってるの? っていうのを、確認できる方法があります。

firefoxでhttpが混ざっている要素を確認する

gifアニメにしてみました。
上記のgifアニメのような感じで確認することができます!

htaccessファイルに、httpでアクセスしてきた方を強制的にhttpsのURLに転送するための記述をする

ここまでで、常時SSL化(HTTPS化)対応・設定に必要なことの大半は完了しています。
しかし、サイトを閲覧してくれる方の中には、httpのURLでアクセスしてこられる方も想定されます。

たとえば、ブログではないですが、飲食店をやっていて、そのWEBサイトのURLが食べログなんかに記載されていて、WEBサイトを常時SSL化(HTTPS化)対応・設定した場合、勝手に食べログに掲載されている飲食店のWEBサイトのURLの記載が変更になるわけではないですよね!

なので、強制的にhttpsのURLに転送してあげるための仕掛けが必要ということになります!

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://arrown-blog.com/$1 [R=301,L] </IfModule>
htaccessファイルをWordPressの入っているディレクトリに

上記にある記述をhtaccessファイルというものを作って記述し、WordPressの入っているディレクトリに、ぽーんと入れます!
これだけでOK!

(※なお、さくらサーバの場合はちょっと別の対応も必要になるので、後日記載しますね!)

ちなみにhtaccessはPCでテキストファイルを作るようなのりで、簡単で作ることができます。
まあ、簡単!

Google AnalyticsのデフォルトURLの設定を変更する

ここまでくれば、あとはちょっとした仕上げです!
まずはGoogle Analyticsの設定変更をします。

というのも、サイトアドレスがhttpsから始まるものになったので、このままにしておくと、正しいアクセス解析ができなくなってしまうからです。

googleanalyticsのプロパティ設定をSSL対応に伴い変更 googleanalyticsのプロパティ設定をSSL対応に伴い変更

Google Analyticsの管理 →  プロパティ設定から、デフォルトのURLをhttpsに変更するだけでOK!

あともう1箇所設定変更の必要があります!
「管理→ビュー→ビュー設定」に飛ぶと、やはり同じような箇所がありますので、ここのURLもhttpsで始まるものに変更しておきましょう!

https対応にあたりgoogleanalyricsで変更すること

一応キャプチャすると、上記のような箇所があるので、ここを変更すればOKです!

まぁ、簡単!

Google Search Consoleの設定を変更する

最後にSearch Consoleの設定を変更します!

https://www.allegro-inc.com/seo/search-console-xml-sitemap

一応すでに運用しているブログを常時SSL化(HTTPS化)対応・設定する観点でこの記事を書いているので、Search Consoleの設定の仕方はしたことがある! という方向けの記事にはなりますが、不明があれば上記のような記事で確認しておくとOKです!
(後日別記事でもアップ予定です)

ポイントをざっくりいうと

  • https://●●で始まるURLで改めてSearch Consoleの登録をし直す
  • https://www.●●で始まるURLで改めてSearch Consoleの登録をし直す
  • サイトURLをwwwありと、wwwなしと、どちらを優先するかを選択
  • 日本国内であれば、対象の国を日本に設定

こんなところでしょうか!
要するに、httpsのwwwありとwwwなしバージョンの2つでSearch Consoleの登録をしなければならないということですね!

ちょっと面倒だけど仕方ない・・・

まとめ・今後もこの記事は随時更新していきます!

常時SSL化(HTTPS化)対応・設定の基本的な手順は以上のような感じです。

この作業、さくらサーバでやるとちょっとした例外が発生したりしますし、使っているWordPressのテーマに備わっている機能だったり、アドセンス関連だったりで、どうしてもhttpのコンテンツが混ざってしまうなんていうケースも発生したりします。

その辺の事案や、よくある疑問・質問などはまとめた上で、この記事に随時アップしていきたいと思います!

SEOに強くなるとか、いろいろ言われてもいますが、まだこのブログでは特にメリットを実感できていないのが正直なところですが、何らかの動きがあればその辺も記事にしていきますね!