sugarcamera

エモい写真が撮りたい。表現したい。自由に生きたい。伝えたい人のためのブログ

*

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

      2018/08/14

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

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

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

SPONSORED LINK

ぐるぐるして読み込みできない原因は多分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ファイルの読み込みができない、という現象が起こったのです。

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



 - 行動

SPONSORED LINK

adsense_kijihonbun_responsive




adsense_kijihonbun_responsive




コメントを残す

  関連記事

雪!東京大雪写真日和。

エモい写真が撮りたくて日々苦しんでいます。苦しみ続けすぎて、最近は苦しみ転じてやや楽しみに変わってきました。 日常に普通に存在するモノや、普

鹿野貴司先生の写真展訪問記。早川町へ大人のカメラ遠足

我々EOS学園小澤太一教室門下生が大変お世話になっている写真家の鹿野先生は日本で一番人口の少ない町、山梨県早川町の「住民全員の写真を撮って写

CANON EOS M3キャッシュバックキャンペーン完結

SPONSORED LINK CANON EOS M3キャッシュバックキャンペーン応募後心配になった 5月後半の土曜日にEOS M3キャッシ

簡単お手軽自宅ギャラリー。カレンダーから好きな写真を額装して部屋に飾ろう

写真が上手になりたいなら、良い写真をたくさん見たり、とにかく自分でもたくさん撮ったりといったアクションが必要と言われております。良い写真をた

【材料費0円】Amazonダンボールで作るインクカートリッジ10色おまとめケースの作り方

写真プリンターのインクカートリッジの収納どうしてますか? 管理するの大変ではありませんか? 私はCANONのPRO-10という顔料インクのプ

macOS High Sierraへアップデート
mac os High Sierra ダウンロードできませんでしたと表示されMacBookAirソフトウェアアップデートできなかった現象の意外な解決方法

今日の記事は、本当にニッチなターゲットに向けて書いています。でも、私と同じことで悩んでいる人がいたら、絶対助けになると思うので、WEBの海に