超概略!WordPressサイトのSSL導入手順。とりあえず全体像を掴みたい方へ。

今日は、朝イチで、ちょっと重い電話でのスタートとなりました。
重い電話はついつい、軽口叩きたくなるので、アホな冗談言っちゃいましたすみません。

うちの事務所ではうまいこと解決するのが難しそうなのですが、ちょっと知っている先生が、その道の専門家なので、そちらから連絡入れてもらいました。
うまく進展するといいなぁ…

とか言いつついつもどおりに役所行ったり、あれこれ。
今日も平和な事務所です。

SSL導入とは!?

さて、前回、SSLについてあっさり分かりやすく解説しました。
要約すると、「SSLは、通信を暗号化する技術のことで、暗号化するからブラウザを介しての情報のやりとりが(比較的)安心」ということです。

なので、今日はSSL導入についての話。
「行政書士がなんでSSL導入について解説を…」
と疑問にお思いの方へ:実は私、WEBサイト作成もしております。
あ、いや、うちのサイトは私が作ったとは言いがたいシロモノですが(無料配布のテンプレートそのままだしね)、ちゃんと依頼されたサイトはちゃんと作っています。うちのサイトみたいなのを言うんだろうなぁ…紺屋の白袴。

尤も、「紺屋の白袴」って「他人のことに忙しくて、自分自身のことには手が回らないこと」のたとえではなくて、実は「染める液を一滴も自分の白袴につけていないという、職人が自らの技術を誇った」たとえという説もあるんだけど…と、それはまた別の話で。

SSL導入手順

さてさてさて。
WordpressサイトがSSLを導入には、すごくざっくり言うと、こんな具合に進みます。

まぁ…詳しいやり方は、きっと親切なサイトが他にもあると思うのでGoogle先生に聞いてください。

  1. WordPressやプラグインを最新版にアップデート
  2. WordPressサイトをバックアップ
  3. サーバにSSL設定
  4. WordPressのサイトアドレスを変更
  5. プラグインでWordpress内部のhttps化
  6. httpとhttps混在によるエラーを潰す
  7. GoogleアナリティクスとSearch Consoleを再設定
  8. 301リダイレクト設定
  9. 完了~(※SNSボタンとかいろいろエラーが出ている人はエラー対処が続きます)

WordPressやプラグインを最新版にアップデート

最初にこれをやります。
後でプラグインを使う場面もありますし、バージョンの違いから途中で動作が止まったら面倒なので。

WordPressサイトをバックアップ

バックアップ用のプラグインはすごく豊富にあるので、自分に合ったものを使えばいいと思います。

私はAll-in-One WP Migrationを使っていますが、これは基本的に引越しツールなので、バックアップにも使えるけれどオススメできるかというと…もぐもぐもごもご。
バックアップだけならBackUpWordPressがいいんじゃないかしらと思います。

何事も無ければ使うことのないバックアップですが、何かあってからでは手遅れ。
ここらへん、「契約書」とか「離婚公正証書」とか「自動車の任意保険」と似ていますね。

サーバにSSL設定

私はこれ、2~3時間程度でできましたが(手続きは10分ぐらい?で、残りはサーバ側の設定完了待ち時間)、プロバイダによっては細かい設定が必要だったりして、いきなり手間取ります。
私はお名前comを使っていますが、基本的にはコントロールパネルでドメインごとにSSLを申し込むだけでした。

でも、以前やっていたECサイトのSSL設定は、けっこう面倒でした。
プロバイダによって本当に、手続きの難易度が違います。
簡単に手続きできるから良いプロバイダともいえませんしね。

WordPressのサイトアドレスを変更

WordPressの管理画面 > 設定 > 一般で、サイトアドレスを変更。

くれぐれもWordPress アドレス (URL)を変更しないように!!
ここを変更しちゃうと面倒です。
たぶん、管理画面に入れなくなります…
(対処方法はありますが。大丈夫。ただ、面倒です。)

プラグインでWordpress内部のhttps化

さて、サーバ側のSSL設定が反映されたことを確認してから(※たぶんサーバのコントロールパネルか何かに設定完了の表示が出るんじゃないかと…)いよいよ作業開始!

まずは、サイトに張ってある全画像および全内部リンクをhttp→httpsに変換…。
ちまちまやると面倒なので、私はSearch Regexというプラグインを使って、一括変換しました。

一括変換ということは、間違った変換をすると元に戻らなくなる可能性があるということです。
データベースの一括変換って怖いんですよね。
最初にバックアップをとっておく重要性がよく分かります。

httpとhttps混在によるエラーを潰す

さて、ここがけっこう、時間がかかります。

Search Regexでの一括変換までは、比較的サクサクと進みます。
あまりSSL化に影響するようなプラグインを使っていない場合は、上の変換が完了した時点で、ブラウザのURLバーに鍵マークと「保護された通信」という表示が出るかもしれません(※Chromeの場合)。


ではそれが出ていなかったらどうするかというと、ひたすら、エラーを潰していきます。

ブラウザがChromeの場合、「保護された通信」になっていないページで、右クリックして「検証」を選択すると、デベロッパーツールが起動してエラー箇所が分かります。

赤丸の場所に何かマークが表示されたら、そこがエラー箇所。
そこをクリックすると、何でエラーが起きているのか分かるので、そのエラーを潰していきます。
エラーを潰す…つまり、理由を特定して、そこを修正するわけです。

可能性としては…

  • プラグインがエラーを起こしている
  • ウィジェットや自分で設定したCSS等にhttpで始まるリンクがある
  • カスタマイズ画面の背景画像等がうまくhttpsに変換されなかった

などなど。私は、このエラー修正で、約25時間ほど使いました……orz

GoogleアナリティクスとSearch Consoleを再設定

Googleアナリティクスは、プロパティ設定とビュー設定をhttps~に設定修正でOK。

Search Consoleは、httpをhttpsに修正するという機能が無いらしくて、あらたにhttps~を登録することになります。

301リダイレクト設定

ここまできたらあと少し。
.htaccessを使って、301リダイレクトを設定。
httpでアクセスされたらhttpsへつながるようにします。

完了~(※SNSボタンとかいろいろエラーが出ている人はエラー対処が続きます)

以上、超!ざっくり解説完了。

でも、SNSボタンでシェア数等を表示していた場合、SSL導入でリセットされるらしくて、そこを修正するのにまた手間がかかるとか…

でもひとまず、それなりにPCを弄れる人は、この概略見ればきっとできます…よね?

Follow me!