質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

5999閲覧

プラグインのInstagram Feedが表示されない

UKYO9311

総合スコア31

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2019/06/13 04:51

編集2019/06/13 05:04

プラグインの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 &copy; 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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YukiYamashina

2019/06/13 06:18

適用されているテーマは子テーマですか?
UKYO9311

2019/06/13 08:00

コメントありがとうございます!!^ ^ 自作のテーマになります!!
guest

回答2

0

ベストアンサー

自作テーマとのことですので、header.php で wp_head 関数、footer.phpwp_footer 関数が呼び出されていないのが原因だと思います。これらの関数をそれぞれのファイルで呼び出してください。

投稿2019/06/13 08:09

YukiYamashina

総合スコア1011

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

UKYO9311

2019/06/13 08:36

解決しました!!!( ; ; ) 本当にありがとうございます。勉強になりました。。。
guest

0

参考程度です。

Instagram Feedで表示されない現象に遭遇したことはありませんが、WordPressのプラグイン問題は、他のプラグインの原因、もしくはテーマの原因があるので、

①プラグインをInstagram Feedだけ有効にする→表示されればok
②一個一個ほかのプラグインを有効化→表示されなくなればそのプラグインとインスタの干渉があると判断

投稿2019/06/13 05:06

atomon

総合スコア13

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

UKYO9311

2019/06/13 05:14

回答ありがとうございます!プラグインをInstagram Feedだけ有効にしましたが変わりなしでした。。。
atomon

2019/06/13 07:10

テーマは自作でしょうか? あとはヘッダー、フッターの怪しそうなのを一つずつ削除して検証してはいかがでしょうか? Instagram Feedではありませんが別のプラグインで不具合があった場合は、これで解決できました。 そのときは、フッターにあった.jsのコードをヘッダーに移動して表示されました。
UKYO9311

2019/06/13 08:03

自作テーマです!! それが上にも書きましたが、ヘッダー、フッター内の全て消しても表示されないのです。。。ヘッダー、フッターのファイル自体を消せば表示されるのですが。。。フッターのJSをヘッダーに持って行ったのですが、変化なしでした( ; ; )
UKYO9311

2019/06/13 08:37

解決しました!!ありがとうございました( ; ; )
atomon

2019/06/13 09:00

確認不足でした。。。勉強になります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問