サイトデザインリニューアルしました2018.11.9
動いた心を記憶して
写真と言葉で表現するブログ
行動

WordPressプラグインInstagram Feed がぐるぐるして読込めなかったらjQueryエラーを修正しよう

WordPressのプラグイン「Instagram Feed」を使い、Instagramにアップした写真をGalleryとしてサイト上に掲載していたのですが..

ある時チェックすると、いつまでもぐるぐると読み込み中らしき状態となり、一向に写真が表示されることがありません。

ひょえー、なになに、いつからこんなことに?
青くなりながら調査したところ、8割くらいの高確率でこいつのせいじゃないか!?という原因にぶちあたりました。

ぐるぐるして読み込みできない原因は多分jQueryの読み込みエラー

検索してみると、ぐるぐるして読込できないのは、外部jqueryの読み込みに失敗しているからであることが多いようです。

なぜそんな事になるか?

理由はいくつかあります。

後から導入したプラグインがWordpressオリジナルのjQueryの読み込みを止めていたり、複数のjqueryファイルを読み込んでコンフリクトが起きていたりするから、らしいです。

デベロッパーツールで状態を確認するとエラー多発

Google Chromeのデベロッパーツールを開いて状態をチェックしてみると、jQuery関連のエラーが山程(数えたくないほど)発生していて、真っ赤..。

直視したくないくらいの大量のエラー..

直視したくないですが、ページのソースを確認し、下記の記述に当たりをつけて対応することにしました。

**Mixed Content: The page at ‘https://sugarcamera.work/gallery/’ was loaded over HTTPS, but requested an insecure script ‘http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js?ver=4.9.8’. This request has been blocked; the content must be served over HTTPS. **

httpですと?
無事にSSL化を完了したはずなのに、なぜこんな記述が残っているのか?

ここをいじってみることにしました。

functions.phpを書き換えてアップロード

外部のjQueryライブラリを呼び出している、上記の記述はfunctions.phpの中にあります。

書き換え前

‘http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js?ver=4.9.8’

書き換え後→

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js?ver=4.9.8′

httpをhttpsに変えただけです。

とはいえ、functions.phpをいじってアップする時はいつもドキドキです。
アップロードして、再読込したら真っ白になっているのではないか..?
この恐怖がいつも頭をよぎります。

ファイルを修正してアップロードの作業を行う時は、必ずバックアップコピーを取ってから実行する、コレ鉄則です。

エラー解消! Instagram画面無事に表示

なんとか画面真っ白になることもなく、アップロード後無事にインスタグラム画面が表示されるようになりました。

同時にGoogle Chromeのデベロッパーツールのエラー表示も消えて、ミッションクリアです。

元はといえば自力SSL化が原因

今思えば、SSL化した時、”http”の記述で書かれているリンクは全部”https”にしたつもりでいたのですが、対応が漏れていたため、こんなことになったのだと思います。

httpsでないURLでの外部ファイル読み出しをブロックする機能が働き、SSL化はできたもののその代償としてjQueryファイルの読み込みができない、という現象が起こったのです。

このような問題の再発を防止するなら、デベロッパーツールを見たり、最新でないページもたまには見るなど定期的にパトロールして、早めに異常を検知する必要がありますね。



COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です