WordPressのページが安全でないと表示されてしまう – Mixed Contentの見つけ方

LINEで送る
Pocket

先日行った徒労日記のhttps化。

これで安心と思ってタブレットで見たらまだエラー。どうやらマルチデバイスで利用される別のテンプレートにエラーが残っている模様。
FirefoxとChromeのそれぞれでエラー箇所を発見する方法のメモです。

Firefox

情報ページに誘導してくれるのでFirefoxの方が親切。

  1. ビックリしているアドレスバーのアイコンをクリック。「このページの一部(画像など)は安全ではありません」と出ていたらhttpとhttpsの混在(Mixed Contest)がエラーの原因。
  2. 「>」をクリックし、さらに「詳細を表示」をクリック。
  3. ページ情報が開きます。
    左から2番めの「メディア」タブを開き、URLを見ていくと「http://」で始まっているものがあり、それが原因。今回もH3ヘッダーに使われているアイコンのパスが問題。
  4. ページ情報から調べるのがわかりやすけれど、デバッグモード=ページを右クリック→「要素を調査」からも確認可能。
    開いたら「コンソール」タブを選ぶと、error/warningの原因が確認できます。

Chrome

こちらは親切なページなど無いようなのでデバッグモードで確認。

  1. 憧れの緑ロックがありません。リスクは書いてあるけど原因を書いてはくれないので、ここだけで言えばFirefoxが便利。なんとなく画像の問題という事はほのめかされている。
  2. ページのどこでもイイので右クリックし、「検証」を選ぶ。
  3. ずらずらと出てきた中、一番下のConsoleウィンドウに注目。ツールバーの中にFilterがあるのでそこへ”Mix”を入力。
    このURLはhttpsで提供されるべきだ、と出ておりパスがわかる。

あとは

管理ページ→テーマの編集からソースを直せば完了。WordpressのWebエディタは使いづらいのでテキストエディタにコピペして検索した方が失敗がありません。一緒にhttp://リンクが無いかも確認しておきます。

コメントを残す