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

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

ただいまの
回答率

88.35%

ワードプレス TOP画面のみにインスタグラムを表示できない

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,642

pond

score 317

前提・実現したいこと

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='{&quot;sortby&quot;: &quot;none&quot;, &quot;headercolor&quot;: &quot;&quot;, &quot;imagepadding&quot;: &quot;5&quot;}'><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='{&quot;sortby&quot;: &quot;none&quot;, &quot;headercolor&quot;: &quot;&quot;, &quot;imagepadding&quot;: &quot;5&quot;}'><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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

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/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-1

このプラグインは使用したことがありませんが
ショートコードの書き方(置き方?)が違うなと思ったので
以下のように記述すると動きますでしょうか?

<?php
   if(is_home()):
?>
[instagram-feed]
<?php
   endif;
?>


(管理画面でインスタグラムとブログを接続等の設定をしている前提です)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/20 16:25

    Instagram Feedプラグインを使用する場合も
    関数作ってadd_shortcodeしてからショートコード貼る作業をしなくて
    はいけないということでしょうか

    キャンセル

  • 2016/10/20 16:43 編集

    回答者さんですよね?ドキュメントまたは WordPress コアのソースコードを読んでくださいw

    キャンセル

  • 2016/10/20 17:41

    皆さま、色々ありがとうございます。
    TOP画面のみにインスタグラムを表示する条件分岐の書き方
    下記で間違いないと思うのですが。。。
    以下をheader.phpの末尾に記載しております。

    ```
    <?php
    if(is_home()):
    echo do_shortcode('[instagram-feed]');
    endif;
    ?>
    ```

    キャンセル

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

  • ただいまの回答率 88.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る