プラグインのInstagram Feedがうまく表示されません。
インスタグラムのIDの取得はうまくいってるのですが、画面に表示されません。デベロッパーツールのコンソールエラーをみてみたところ、エラーも出てない状態になってます。
しかし、ソースを見てみるとうまく書き出されてはいるみたいです。「Follw on Instagram」だけなぜか表示されてます。。。↓
ちなみにInstagram Feed以外のプラグインを2〜3個試してみたのですが、いずれも表示されなかったためサイト自体に問題があるのか、それともInstagram APIの問題なのかといった感じです。
ヘッダーとフッターをファイルごと削除してみたところ、表示されました。でもファイル自体を残したまま中身を全部消すだけでは表示されませんでした。ヘッダーとフッターのファイルがあることによって吐き出されるソースがある?とかなのでしょうか。JSの問題でしょうか。。。
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 7 </div> 8 <div>Copyright © Pocket Cabin, All Rights Reserved.</div> 9 </footer> 10 11 <!-- Load Scripts --> 12 <script src="<?php bloginfo('template_directory'); ?>/js/jquery.bxslider.js"></script> 13 <script src="<?php bloginfo('template_directory'); ?>/js/scripts.js"></script> 14 15 <script> 16 $(window).on('load', function() { 17 var url = $(location).attr('href'); 18 if(url.indexOf("?id=") != -1){ 19 var id = url.split("?id="); 20 var $target = $('#' + id[id.length - 1]); 21 if($target.length){ 22 var pos = $target.offset().top; 23 $("html, body").animate({scrollTop:pos}, 1000); 24 } 25 } 26 }); 27 </script> 28 29</body> 30</html>
回答2件
あなたの回答
tips
プレビュー