Q&A
Web ブラウザのデベロッパーツール（開発者ツール）で、JavaScript のエラーやファイルの読み込みでエラーが出ていたりしないでしょうか？
プラグインのInstagram Feedがうまく表示されません。
インスタグラムのIDの取得はうまくいってるのですが、画面に表示されません。コンソールエラーをみてみたところ、エラーも出てない状態になってます。
しかし、ソースを見てみるとうまく書き出されてはいるみたいです。「Follw on Instagram」だけなぜか表示されてます。。。↓
HTML
1<div id="sb_instagram" class="sbi sbi_mob_col_auto sbi_col_1" style="max-width: 640px; width:100%; padding-bottom: 10px; " data-id="9652789855" data-num="5" data-res="full" data-cols="1" data-options='{"sortby": "none", "showbio": "true","feedID": "9652789855", "headercolor": "", "imagepadding": "5","mid": "M2E4MWE5Zg==", "disablecache": "false", "sbiCacheExists": "true","callback": "ZTQ0OWYxZGQ2ZDlj.NGM1NDlhYWQ3Mzg1MGZjYjEyZTk=", "sbiHeaderCache": "true"}'> 2 3<div class="sb_instagram_header" style="padding: 10px; padding-bottom: 0;"></div> 4 5<div id="sbi_images" style="padding: 5px;"> 6 7<div class="sbi_loader"></div></div> 8 9<div id="sbi_load" class="sbi_hidden"><a class="sbi_load_btn" href="javascript:void(0);" style="display: none; "><span class="sbi_btn_text">Load More...</span><span class="sbi_loader sbi_hidden"></span></a><span class="sbi_follow_btn"><a href="https://www.instagram.com/" style="" target="_blank" rel="noopener"><i class="fa fab fa-instagram"></i>Follow on Instagram</a></span></div></div>
php
1<?php echo do_shortcode('[instagram-feed]'); ?>
ちなみにInstagram Feed以外のプラグインを2〜3個試してみたのですが、いずれも表示されなかったためサイト自体に問題があるのか、それともInstagram APIの問題なのかといった感じです。
他に足りない情報などありましたら教えていただけたら幸いです。。。
お手数おかけしますが、よろしくお願いいたします。
●追記
遅れてすみません。こちらで調べてみたところ、ヘッダーとフッターをファイルごと削除したら表示されました。でもファイルを残したまま中身を全部消すだけでは表示されませんでした。まだ原因はつかめていません。
header.php
1 2<!DOCTYPE html> 3<html> 4 5<head> 6 <meta charset="utf-8"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <title>Pocket Cabin</title> 9 <meta name="keywords" content=""> 10 <meta name="description" content=""> 11 <meta name="viewport" content="width=device-width"> 12 <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/jquery.bxslider.css" /> 13 <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" /> 14 <link rel=”shortcut icon” href=”images/favicon.ico” /> 15 16 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 17 <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> 18 <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script> 19 <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 20 <!-- <script src="https://maps.googleapis.com/maps/api/js?key=XXX"></script> --> 21 22 <!-- begin: Facebook share meta tags --> 23 <meta property="og:locale" content="ja_JP"> 24 <meta property="og:type" content="website"> 25 <meta property="og:description" content=""> 26 <meta property="og:title" content=""> 27 <meta property="og:url" content=""> 28 <meta property="og:site_name" content=""> 29 <meta property="og:image" content="images/fb.jpg"> 30 <!-- end: Facebook share meta tags --> 31 32 33</head> 34 35<body> 36 37 <header class="header"> 38 <div class="container__wide"> 39 <div id="logo"> 40 <h1> 41 <a href="<?php echo home_url(); ?>"> 42 <img class="ico_b" src="<?php bloginfo('template_directory'); ?>/images/logo.svg"> 43 </a> 44 </h1> 45 </div> 46 <nav class="pc-only"> 47 <ul id="main"> 48 49 </ul> 50 51 </nav> 52 </div> 53 54 <div id="contBar"><a id="bar" class="menu-trigger sp-only"><span></span><span></span><span></span></a></div> 55 <div id="bar_menu" class="sp-only"> 56 <ul> 57 58 </ul> 59 <div class="bar_menu-sns"> 60 61 </div> 62 </div> 63 </header>
footer.php
1<footer class="bg_beige"> 2 <a href="<?php echo home_url(); ?>"> 3 <img class="ico_b" src="<?php bloginfo('template_directory'); ?>/images/logo.svg" alt="Pocket Cabin"> 4 </a> 5 <div class="sns_wrap"> 6 <a href="https://www.facebook.com/pocketcabin/" target="_blank" class="sns"><img src="<?php bloginfo('template_directory'); ?>/images/icon_facebook.svg"></a> 7 <a href="https://www.instagram.com/pocketcabin/" target="_blank" class="sns"><img src="<?php bloginfo('template_directory'); ?>/images/icon_instagram.svg"></a> 8 </div> 9 <div>Copyright © Pocket Cabin, All Rights Reserved.</div> 10 </footer> 11 12 <!-- Load Scripts --> 13 <script src="<?php bloginfo('template_directory'); ?>/js/jquery.bxslider.js"></script> 14 <script src="<?php bloginfo('template_directory'); ?>/js/scripts.js"></script> 15 16 <script> 17 $(window).on('load', function() { 18 var url = $(location).attr('href'); 19 if(url.indexOf("?id=") != -1){ 20 var id = url.split("?id="); 21 var $target = $('#' + id[id.length - 1]); 22 if($target.length){ 23 var pos = $target.offset().top; 24 $("html, body").animate({scrollTop:pos}, 1000); 25 } 26 } 27 }); 28 </script> 29 30</body> 31</html>
回答2件
0
同様の事象に悩んでいましたが、Setting内の
「Are you using an Ajax powered theme?」を
Yesにしたところ画像が表示されました。
投稿2020/08/27 06:39
総合スコア6
同じ問題でこの質問にたどり着きました。
OkazakiTatsuoさんの回答を試したところ、表示することができました！
ありがとうございます。質問主ではありませんが、お礼申し上げます。
0
私も同じ現象に悩まされていて、なかなか解決できなかったのですが、
ようやく解決できたので、試してみてください。
（詳しい原因は分かっていません）
<?php wp_head(); ?> の直前に以下のコードを挿入※ディレクトリは環境に合わせてください。
<?php wp_deregister_script( 'jquery' ); wp_enqueue_script( 'jquery', '/wp-content/themes/web/js/jquery.min.js', array() ); ?>
投稿2019/10/17 02:38
総合スコア13
あなたの回答
tips
プレビュー
