*

大好きなガジェット、ゲーム、写真、映画、ブログ運営などの情報をお届けする、くねおのライフログブログ

【2020年】WordPressブログ(STINGER5)の https化で発生したエラーを必死こいて解消した

   

ずっと放置していたブログのhttps化ですが、前回一通りの手順をこなしてブログ内のURLを全て「https://」に置き換えました。

前回記事:【2020年】WordPressブログ(STINGER5)を https化する手順 (エックスサーバー)

が、しかし。ブログのトップページを表示させてURL欄を確認してみると、https化する前と同じく「保護されていない通信」と表示されているではありませんか。(これじゃなんのためにhttps化したのかワケワカメやないか・・・)

https化後のエラー①

※ちなみにこのように表示されるのはパソコンのGoogle Chromeブラウザだけで、スマホで表示させた場合は問題なく表示されていました。

 

正常にhttps化出来ているのであれば以下のように表示されなければなりません。

https化して正常にブログが表示された状態

 

 

今回は、https化後に僕がハマってしまった「保護されていない通信」問題について解消した方法を備忘録として残します。

 

 

ディベロッパーツールでブログの状態を確認する

では、どこに問題がありのか確認する方法として使用したのが、Google Chromeのディベロッパーツールです。

ブログのトップページを表示させて「F12キー」をポチッと押します。そうするとブラウザの右側にソースが表示されるので、「Console」タブをクリックしてこのページに起きているエラーを確認します。

GoogleChromeのディベロッパーツールのConsoleタブ

 

 

まあ、いっぱいエラーが出てるw これ全部直さなきゃいけないのかと思うとゲンナリしますが、実際には全部解消する必要はありませんでした。とりあえず一つずつ見ていきます。ちなみに黄色いログはワーニングエラーです。とりあえずワーニングは全部無視します。

ディベロッパーツールのエラーログ①

→ スルーで OK だった

 

 

ディベロッパーツールのエラーログ②

→ スルーで OK だった

 

 

ディベロッパーツールのエラーログ③

ディベロッパーツールのエラーログ④

ディベロッパーツールのエラーログ⑩

→ この3つは記事トップページの記事一覧ページと、個別ページのFacebookボタン、はてブボタン、Tiwitterボタンが原因。ブログで使用しているテーマ「STINGER5」に最初からあったもの。

 

エラーの原因、SNSボタン

 

これはFTPソフト(Transmit4)で以下のファイルを削除して対応した。
・sns-top.php
・sns.php

原因のファイルを削除

 

 

 

ディベロッパーツールのエラーログ⑤

→ スルーで OK だった

 

 

ディベロッパーツールのエラーログ⑥

→ スルーで OK だった

 

 

ディベロッパーツールのエラーログ⑦

→ スルーで OK だった

 

 

ディベロッパーツールのエラーログ⑧

→ スルーで OK だった

 

 

ディベロッパーツールのエラーログ⑨

→ 解消させたけど、なぜ解消できたのかが不明

結果的には、エラー解消のためにやったことというのが、WordPressテーマの「STINGER5」のSNSボタンの削除でした。それ以外にやったことは、style.css内で置換できていなかった「http://」を手書きで「https://」に直したくらいです。

この作業をするにあたっていろいろネットで検索しましたが、https化でエラーが出る大部分の原因が、cssファイル、ヘッダー、サイドバーの「https」置換漏れのようです。

僕の場合は「STINGER5」というちょっと古いテーマを使っていたために、遭遇してしまったエラーのようです。(「STINGER5」は非常に使いやすいテーマでカスタマイズもかなりしたので、できれば変えたくない)

また、スルーしたエラーについてはプラグインで使用されている .jsファイル が原因のようです。特に表示に問題なく、今まで通りプラグインも使えているので、とりあえず放置して様子見することにします。

 

さて、エラーがまだ残っていますが、これで無事念願の鍵付きアイコンが表示されるようになりました。

鍵付きアイコンが表示されたブログのトップページ

 

 

以上、https化のエラー解消備忘録でした。

 

 - ブログ運営

スポンサーリンク


1番上へ