WordPressのプラグイン「Instagram Feed」を使い、Instagramにアップした写真をGalleryとしてサイト上に掲載していたのですが..
ある時チェックすると、いつまでもぐるぐると読み込み中らしき状態となり、一向に写真が表示されることがありません。
ひょえー、なになに、いつからこんなことに？
青くなりながら調査したところ、8割くらいの高確率でこいつのせいじゃないか！？という原因にぶちあたりました。
ぐるぐるして読み込みできない原因は多分jQueryの読み込みエラー
検索してみると、ぐるぐるして読込できないのは、外部jqueryの読み込みに失敗しているからであることが多いようです。
なぜそんな事になるか？
理由はいくつかあります。
後から導入したプラグインがWordpressオリジナルのjQueryの読み込みを止めていたり、複数のjqueryファイルを読み込んでコンフリクトが起きていたりするから、らしいです。
デベロッパーツールで状態を確認するとエラー多発
Google Chromeのデベロッパーツールを開いて状態をチェックしてみると、jQuery関連のエラーが山程（数えたくないほど）発生していて、真っ赤..。
直視したくないくらいの大量のエラー..
直視したくないですが、ページのソースを確認し、下記の記述に当たりをつけて対応することにしました。
httpですと？
無事にSSL化を完了したはずなのに、なぜこんな記述が残っているのか？
ここをいじってみることにしました。
functions.phpを書き換えてアップロード
外部のjQueryライブラリを呼び出している、上記の記述はfunctions.phpの中にあります。
書き換え前
書き換え後→
httpをhttpsに変えただけです。
とはいえ、functions.phpをいじってアップする時はいつもドキドキです。
アップロードして、再読込したら真っ白になっているのではないか..?
この恐怖がいつも頭をよぎります。
ファイルを修正してアップロードの作業を行う時は、必ずバックアップコピーを取ってから実行する、コレ鉄則です。
エラー解消！ Instagram画面無事に表示
なんとか画面真っ白になることもなく、アップロード後無事にインスタグラム画面が表示されるようになりました。
同時にGoogle Chromeのデベロッパーツールのエラー表示も消えて、ミッションクリアです。
元はといえば自力SSL化が原因
今思えば、SSL化した時、”http”の記述で書かれているリンクは全部”https”にしたつもりでいたのですが、対応が漏れていたため、こんなことになったのだと思います。
httpsでないURLでの外部ファイル読み出しをブロックする機能が働き、SSL化はできたもののその代償としてjQueryファイルの読み込みができない、という現象が起こったのです。
このような問題の再発を防止するなら、デベロッパーツールを見たり、最新でないページもたまには見るなど定期的にパトロールして、早めに異常を検知する必要がありますね。
