WordPressサイトSSL化で失敗！https置換しても鍵マークにならないエラー

こんにちわ、紫摩(しま)です。

このブログサイト『MYSIMASIMA』を始めて6年ぐらいが経とうとしています。

恥ずかしながらSSL化と言うことを最近知りました。
ホームページセキュリティ上、遅かれ早かれ、やっておかなければならない事の一つ。

ただ、僕は記事は書けてもプログラム的な事は全くの無知であり、「SSL化？何それ？」っていう所から始まりました。

そしてワードプレスの編集画面が真っ白になるまでトラブルが絶えませんでした。

そこで僕は解決策を書くことは出来ないので、こんなトラブルが起きたよと言うレポートを書いていきます。

サイトSSL化で起きたトラブル

僕もよくわかっていないのですが、通信を暗号化することによってアクセスした際に第三者から情報を抜き取られることが無いという安全策。

誤解を恐れず簡単に言うと、https://とSを付け加えるだけで簡単に出来る(鍵付けをする)そうなのですが、逆に言えばサイト内に“http://”というもの(Sが付いていない)がひとつでもあったらアウトという事でした。

でも一体どうやって？どこまで置換すればいいの？どこを触ったらいけないの？ここから寝られない日が続きます。
まずはSSL化の証明を取るとこから始まります。

レンタルサーバーからSSLサーバー証明書を発行

僕はサクラサーバーの方を利用しているので、そこのコントロールパネルから設定ができます。

ここでSSL設定を行いたいけどどうやればいいのか分からない。
調べ続けていると何やら証明書なるものを発行して、手続する必要があるとの事。

サイトに記載された手順通りに進めて行けば、時間はかかりましたが楽勝で終わりましたす。
メールが届くのですが、取得や反映まで数時間～数日かかる場合も。

「やった～！これを行う事で簡単にhttp://から⇒https://に変わり・・・」

・・・変わりません。

これだけで終わると思ったら大間違いです。

ワードプレスプラグイン『Search Regex』で置換

次にやってくれと指導してもらったのが、一気にURLを変更できるプラグイン、Search Regexを使う事。
これはサイト内の該当URLを探し出して置換してくれる便利なプラグインなんです。

自分のサイトを検索すると該当項目が何万件もヒットして、プラグインで追いつかないくらいの量だったのです。

ちょっとずつちょっとずつ。https://へ変更していました。

http://mysimasima.com/

↓

https://mysimasima.com/

※ここで焦って変なものまで置換してしまうとサイトが壊れて一生戻らなくなるので注意。

どんどん置換を進めて行くとやがてあるところを境に、どう検索してもヒットしなくなりました。
お、これで終了か？と思ってサイトを見てもまだ鍵マークが付いてない。

↑これね。これにしたいのです。

鍵が付いていないという事はまだSSL化が完全ではない事。
聞くところによるとまだまだ異常が沢山あるらしいです。

トップ画面に黄色三角マーク、アイコン関係がダメ

ホームページで“F12”を押すと上記のような画面が出てくるのでコンソールと言う部分をクリック。

そして赤色が出たらエラーという事です。(よくわからないが。)
赤色が出ていたらエラーという事でSSL化は完全ではないのです。

取り敢えず出来るだけの事はやったのですが、どうしてもまだトップのエラーが消えない。

という事で知人からアドバイスを受けたのが『トップのSNSアイコンとファビコン、ウィジェット類が悪さしてる』との事でした。

ファビコンと言われるホームページの顔みたいなアイコン。
これも作り直すか削除しないとやっぱり引っかかるらしいです。

Twitter、フェイスブック、はてなブックマークのSNSアイコン

「え？ファビコン消したのにまだダメ？」
次はSNSアイコンです。

これも、どのように変更するのかわからなかったが寝ずにネットを探っていると、httpsにするだけではだめでコードを取得し直す必要があったのです。(ワードプレスのテーマ編集sns.phpという所で変更できる。)

はてなブックマークもSSLに対応しているかどうか調べ直す必要があります。

フェイスブックのコード取得するはずが…

これは別件ですが、フェイスブックのアイコンを解除しようと久しぶりにFacebookにアクセスしたらログインできない。
ハッキングされている、第三者がログインしているとの事。パスワードも間違ってないはず…ここでまた数日寝られず。

結果は僕のパスワードの打ち間違い。
こういう事が途中であったのでもう精神状態ボロボロ…

楽天ウィジェットなどサイドバーもダメ

まだまだトラブルは続きます。

楽天ウィジェットも悪さをしていてSSL化が進まなかったのです。
これもコードを取得し得しなさいという事。「どこに？どこから取る？コード？」

簡単、ワードプレスの『外観』→『ウィジェット』で削除も追加も変更できます。

頭が悪いって辛い…

最終章：サイトがバグった？？

SSL化していく段階でトラブルが起きたりすると元に戻せないので、バックアップは取っておかないといけないらしい。
うーん、よくわからないがやってみよう。

『BackWPup』というバックアッププラグインを取得。これで行けるだろう。
と思ったが、自分のPHPバージョンが古すぎて対応してないらしい。。。

PHPバージョンが古いのでアップデート(大失敗)

旧バージョンを使用する特別な事情がなければ最新バージョンをご利用ください。

旧バージョンの利用はリスクを伴います。当面は並行提供しますが、公式でのサポートが終了しているため自己責任でご利用ください。
また、提供を終了する場合がございます。

めっちゃ怖いこと書かれてる。

最新バージョン(PHP 7.3)にしておこう。
これで安心だ。

もっと強制的にSSL置換『Better Search Replace』

バージョンを最新にしても変わらないのなら他は？

• Search Regexでももう該当URLがヒットしない。
• アイコンも消した。ウィジェットも変えた。
• バージョンも最新にアップグレードした。
• 念のためバックアップも取った(うまく取れなかったが)。

もうこれ以上は無理ですぞ…

しかし、先ほどのプラグイン(Search Regex)で検索すらできなかったのは、単にプラグインの更新が古いから？という説があります。

そこで次に試したのがBetter Search Replaceという同じ類のプラグインです。

「えーい！めんどくさい！もうこうなったらサイト内にあるhttp://というもの全てhttpsに変換してやれ！」

そう考えてサーチをかけてみると、まだまだ置換できてないものがいっぱい出て来てました。

ワードプレス画面真っ白

「お～♪出来る出来る！いっぱいあるじゃん！」
気分よくどんどんhttp://⇒https://へ置換していました。

が、よくわからないままやってると画面がいきなり消えました。

「ん？？？」

戻らない。編集画面まっ白。進まない。
変なコードまで書き換えてしまったっぽい？？

詰んだ…

読んでいて嫌になったでしょ？
飛ばしたくなったでしょ？
読まずに下にスクロールしたでしょう？

そう言う気分で僕もよくわからないままどんどん進めてSSL化して大失敗していたのです。
(これには続きがありますがまた後日)

続き：編集画面が真っ白に！Wordpressにログインできない|Mysimasima