ここでは、インスタグラムフィードの画像が読み込まれず、空白の領域やグレーのボックスが表示される場合、または写真が読み込まれないその他の問題が発生する場合に考えられる原因について説明します。
道順
この問題を解決するには、以下の手順をお試しください：
- 以下の「考えられる原因」のセクションを参照して、該当するものがないか確認してください。サイトに変更を加えた場合は、ホスト、ウェブサイト、またはローカルのブラウザのキャッシュをクリアしてから、フィードを再度確認してください。
- 列挙された可能性のある原因でも解決しない場合は、「Enqueue JavaScript in header（ヘッダーでJavaScriptをエンキューする）」設定を使用するか、または 「AJAX theme loading fix（AJAXテーマの読み込みを修正する）」設定を使用して、InstagramフィードのJavaScriptファイルを他のファイルより先に読み込んでみてください。> 詳細設定タブをクリックしてください。
- 以下の設定を無効にしてください：Instagramフィード > 設定 > 詳細 >JavaScript画像読み込み
考えられる原因
1) 情報源に問題がある
ソースを再接続するには、プラグインの設定ページで ソースの追加 > 接続ボタンをクリックするか、無効なソースの再接続ボタンを使用します。
2) プラグインのファイルがページに含まれていない
これは、WordPressテーマが、ページの上部と下部にCSSとJavaScriptファイルを追加するために必要なWordPress関数を欠いているためです。すべてのテーマには、プラグインがページにファイルを追加するために必要なwp_head関数とwp_footer関数が含まれているはずです。これらを追加するには、次のようにします：
- テーマの フッター.php file and adding the following directly before the closing </body> tag:
<?php wp_footer(); ?> - テーマの ヘッダ.php file and adding the following directly before the closing </head> tag:
<?php wp_head(); ?>
3) あなたのサイトにJavaScriptエラーがあり、プラグインのJavaScriptファイルの実行を妨げている。
ページ上で右クリックし、「要素の検査」を選択し、「コンソール」タブをクリックするか、ブラウザの開発者ツールから「JavaScriptコンソール」オプションを選択することで、このケースかどうかを調べることができます。
あなたのサイトでJavaScriptエラーが発生している場合、以下のように、原因となっているJavaScriptファイルとともに赤色で表示されます：
JavaScriptエラーのデバッグについての詳細は、WordPressの記事をご覧ください。
4) 表示しようとしているフィードに投稿がない。
投稿がないフィードを表示しようとすると、管理者エラーメッセージが表示されるか、何も表示されないことがあります。接続されているアカウントに投稿を追加すると、新しい投稿をチェックした後にフィードが正常に表示されるようになります。
5) 使用しているショートコードが正しくない。
使用しているショートコードにエラーがあるか、必要な引数が欠けている可能性があります。例えば
[instagram-feed hashtag="#myHashtag"]
フィード設定の「埋め込み」ボタンをクリックして、デフォルトのショートコードを追加してみてください：
[instagram-feed feed="1"]
次に、Instagramのフィード > すべてのフィード >この フィードのフィードオプション（ペンのアイコン）でフィードの設定がされていることを確認します。
6) 古いバージョンのjQueryを使用している。
Instagram Feed Proプラグインの実行には、WordPressに含まれるjQueryの最新バージョン（2024年9月現在3.6.4）が必要です。テーマによっては、WordPressのデフォルトのjQueryファイルを無効にし、独自のjQueryファイルを読み込む場合があり、このエラーが発生することがあります。テーマ開発者に連絡して、ファイルを更新できるかどうか確認してください。
7) ブラウザの拡張機能またはアドオンが問題を引き起こしている。
ブラウザの拡張機能やアドオンの中には、フィードに問題を引き起こすものがあります。フィードが表示されるかどうか確認するために、それらを無効にしてみてください。
8) 多くの投稿をフィルタリングしている
これらの単語やフレーズを含む投稿を表示/削除する設定を使用している場合、別称 "を含む投稿を表示しない"/ "を含む投稿のみ表示"フィルタリングオプションやその他のモデレーションツールを使用している場合、フィードに表示される投稿の数が多すぎるため、フィルタリングしている可能性があります。Instagramは、特定のハッシュタグを持つ特定のユーザーからの投稿を送信しないため、プラグインはユーザーアカウントまたはハッシュタグフィードからのすべての投稿を要求し、" / "に基づいてフィルタリングします。を含む投稿を表示しない"/ "を含む投稿のみを表示する".この問題を回避する方法については、この投稿を参照してください。
9)カルーセルフィードレイアウトだけが機能していない
テーマがjQueryを2回読み込んでいる可能性があります。WordPressはデフォルトで、必要なバージョンのjQueryを読み込みます。カスタムバージョンのjQueryを使用している場合は、デフォルトのスクリプトをデキューしてください。場合によっては、テーマの開発者に連絡して、jQueryの不正な実装を削除してもらう必要があるかもしれません。
10)遅延ロードが有効
WordPressのテーマやプラグインが遅延読み込みを使用している場合、画像が空白または小さな正方形で表示される問題が発生する可能性があります。ほとんどの遅延ローディングの競合は、Instagramのフィード>設定>詳細設定に移動し、JavaScript画像読み込みの設定を無効にし、変更を保存することで解決できます。
デベロッパーツールを使った診断（上級）
ここでは、Chrome開発者ツールで一般的な問題を診断する方法を説明します。Chromeデベロッパーツールを使用するには、サイト上のInstagramフィードが表示されているページを右クリックし、「Inspect」を選択するか、Windowsの場合はctrl+shift+i、Macの場合は#⌘iのキーボードショートカットを使用します。console」タブに切り替えて、javascriptコンソールを確認する。
a) コンソールにエラーがない
コマンドを追加する sbi_init(); をコンソールに表示して実行する（エンターキーを押す）。
Uncaught ReferenceErrorsbi_init is not definedが発生した場合、フィード用のjavascriptファイルがページにない可能性が高い。以下の#3 "wp_footer "を参照してください。JavaScriptファイルを最適化/連結/最小化するプラグイン(autoptomizeなど)を使っている場合は、それをリセットする必要があるかもしれません。
フィードが表示される場合は、おそらくajaxテーマを使っています。このページを参照してください。また、リフレッシュが必要なjavascriptのコンカチネーター／オプティマイザー／ミニファイヤー・プラグインを使用している可能性もあります。
もし何も起こらず（追加投稿が表示されず）、アイコンも回転していない場合は、フィードの設定で "を含む投稿のみ表示する"を含む投稿のみを表示する" でフィルタリングされているか、ハッシュタグフィードへの投稿がすべて非公開になっている可能性があります。下記の#5を参照してください。また、CSSファイルがページから消えている可能性もあります。wp_head()を参照してください。また、"Unable to display Instagram photos "というメッセージが表示される場合は、アクセストークンが有効であることを確認してください。
b) コンソールに1つ以上のjavascriptエラーが表示されています。
コマンドを追加する sbi_init(); をコンソールに表示して実行する（エンターキーを押す）。
フィードが表示される場合は、他のプラグインやテーマが原因でフィードが読み込まれないエラーが発生しています。他のプラグインやテーマを無効にしてみてください。
jQuery is not defined（jQueryが定義されていません）というエラーが発生する場合、テーマやプラグインがjQueryをロードするのが遅すぎるか、ページのソースからjQueryファイルが削除されている可能性があります。
XMLHttpRequestへのアクセスがCORSポリシーによってブロックされました：No 'Access-Control-Allow-Origin' ..." というエラーが発生した場合、「WordPressアドレス」と「サイトアドレス」がフィードのページと一致していない可能性があります。これには、プロトコル（「http」と「https」）も含まれます。これらの設定は、ダッシュボードの「一般」メニューにあります。
jQuery.ajax is not defined "というエラーが発生する場合は、jQueryの "スリム "バージョンを使用している可能性があります。スリムバージョンには、私たちのプラグインが投稿を取得するために使用するajaxメソッドが含まれていません。
