Q&A
ありがとうございます。動きませんでした。
###前提・実現したいこと
TOP画面のみインスタグラムを表示する。
※プラグインはInstgram Feedを使用。
###試したこと
① header.phpに以下のソースコードを追加したが、2ページ目以降を見るとインスタグラムが
ローディング中になったままでフォローボタンも表示されている。
生成されたhtmlソースコードを見てもロードされている。
hearder.phpでTOP画面のみ表示されるようにif文で定義してます。下記ソースコードをご参照ください。
② Android端末で確認しても、上記①の状態となります。
③ iOSシュミレーター（iBBDemo3）で確認すると、2ページ目以降もインスタグラム・フォローボタンが表示される。
④ <?php wp_reset_query(); ?>でquery_postsをリセットしても状況変わらず。
↓header.phpに追加したソースコード
<?php wp_reset_query(); ?> <?php if ( is_home() || is_front_page() ) : ?> <?php echo do_shortcode( '[instagram-feed]' ); ?> <?php endif; ?>
###生成されたhtmlソースコード TOPページのインスタグラム部分
<div id="sb_instagram" class="sbi sbi_col_3" style="width:80%; padding-bottom: 10px; " data-id="xxxxxxxxxx" data-num="3" data-res="full" data-cols="3" data-options='{"sortby": "none", "headercolor": "", "imagepadding": "5"}'><div id="sbi_images" style="padding: 5px;"><div class="sbi_loader fa-spin"></div></div><div id="sbi_load"><div class="sbi_follow_btn"><a href="http://instagram.com/" style="background: #ef4156; " target="_blank"><i class="fa fa-instagram"></i>Follow on Instagram</a></div></div></div>
###生成されたhtmlソースコード 2ページ目のインスタグラム部分
<div id="sb_instagram" class="sbi sbi_col_3" style="width:80%; padding-bottom: 10px; " data-id="xxxxxxxxxx" data-num="3" data-res="full" data-cols="3" data-options='{"sortby": "none", "headercolor": "", "imagepadding": "5"}'><div id="sbi_images" style="padding: 5px;"><div class="sbi_loader fa-spin"></div></div><div id="sbi_load"><div class="sbi_follow_btn"><a href="http://instagram.com/" style="background: #ef4156; " target="_blank"><i class="fa fa-instagram"></i>Follow on Instagram</a></div></div></div>
###header.phpソースコード
<?php /** * Displays the header section of the theme. * */ ?> <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <?php /** * travelify_meta hook */ do_action( 'travelify_meta' ); /** * travelify_links hook * * HOOKED_FUNCTION_NAME PRIORITY * * travelify_add_links 10 * travelify_favicon 15 * travelify_webpageicon 20 * */ do_action( 'travelify_links' ); /** * This hook is important for WordPress plugins and other many things */ wp_head(); ?> </head> <body <?php body_class(); ?>> <?php /** * travelify_before hook */ do_action( 'travelify_before' ); ?> <div class="wrapper"> <?php /** * travelify_before_header hook */ do_action( 'travelify_before_header' ); ?> <header id="branding" > <?php /** * travelify_header hook * * HOOKED_FUNCTION_NAME PRIORITY * * travelify_headerdetails 10 */ do_action( 'travelify_header' ); ?> </header> <?php /** * travelify_after_header hook */ do_action( 'travelify_after_header' ); ?> <?php /** * travelify_before_main hook */ do_action( 'travelify_before_main' ); ?> <div id="main" class="container clearfix">
###補足情報(言語/FW/ツール等のバージョンなど)
▼ ワードプレス
WordPress 4.6.1
▼ テーマ
Travelify バージョン 3.0.2
▼ プラグイン
Instagram Feed バージョン 1.4.7
回答2件
0
自己解決
kuck1uさん、test21さん
ありがとうございました。
is_home()だけだと2ページ目、3ページ目もtrueが返ってしまうようなので、
if ( is_home() && !is_paged()):へ変更したところ、ホーム画面のみにインスタグラム
が表示されるようになりました。
↓header.phpに以下追加。
<?php wp_reset_query(); ?> <?php if ( is_home() && !is_paged()): ?> <?php echo do_shortcode( '[instagram-feed]' ); ?> <?php endif; ?>
▼ 参考記事
http://webdesignrecipes.com/wordpress-conditional-tags-and-custom-post-type/
投稿2016/11/01 11:01
総合スコア350
0
このプラグインは使用したことがありませんが
ショートコードの書き方（置き方？）が違うなと思ったので
以下のように記述すると動きますでしょうか？
<?php if(is_home()): ?> [instagram-feed] <?php endif; ?>
（管理画面でインスタグラムとブログを接続等の設定をしている前提です）
投稿2016/10/18 04:29
総合スコア30
ショートコードはそのまま記述しても動きません。
Instagram Feedプラグインでadd_shortcodeしているようなので
「diaplay your feed」で表示されているショートコードを張り付ければ表示される認識でしたが違いましたでしょうか
はい、違います。詳しくはドキュメントを確認してください。https://goo.gl/A9WYHR
Instagram Feedプラグインを使用する場合も
関数作ってadd_shortcodeしてからショートコード貼る作業をしなくて
はいけないということでしょうか
回答者さんですよね？ドキュメントまたは WordPress コアのソースコードを読んでくださいｗ
皆さま、色々ありがとうございます。
TOP画面のみにインスタグラムを表示する条件分岐の書き方
下記で間違いないと思うのですが。。。
以下をheader.phpの末尾に記載しております。
```
<?php
if(is_home()):
echo do_shortcode('[instagram-feed]');
endif;
?>
```
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。