WordPressのトップページのみに何かのコンテンツを表示したい場合には、WordPressで用意されてる条件分岐タグを使用することでトップページ判定をすることができます。
WordPressのトップページのみに限定することができるので、WordPressサイトのトップページには表示したいけど、投稿ページやカテゴリーページでは非表示、または違う表示にしたいということが可能です。
条件分岐するやり方を覚えて表示と非表示のコントロールができるとWordPressをカスタマイズする幅が広がります。
トップページのみにする条件分岐タグの事前知識
WordPressにはトップページのみに表示したい内容があった場合「条件分岐タグ」を使用することで、「どのページのみに表示をするのか？」条件を指定することができます。
WordPressでトップページのみに条件分岐できるように条件判定できる条件分岐タグは3つを使い分けることでトップページのみの条件分岐にするパターンにできます。
トップページのみに条件分岐するパターンは、使用中のWordPressサイトでトップページをどのように表示設定しているかでトップページのみに条件分岐するやり方が変わるので覚えておきたいことです。
is_front_page()で出来る条件分岐
is_front_page()は TRUE または FALSE を返す真偽値型の関数です。
<?php is_front_page(); ?>
WordPressのトップページのみに条件分岐する条件分岐タグ「is_front_page()」は、WordPressの表示設定で選択してる以下のトップページ設定に該当するときにis_front_page()の条件判定が該当してtrueを返します。
「最新の投稿」で設定してる場合
固定ページを選択してホームページ選択で指定したページを設定してる場合
is_home()で分岐する条件判定
is_home()もTRUE または FALSE を返す真偽値型の関数です。
<?php is_home(); ?>
WordPressでトップページのみに条件分岐するときのis_home()の条件判定はWordPressの表示設定でトップページを選択する次の2パターンです。
「最新の投稿」でトップページに設定した場合
「固定ページ」を選択して「投稿ページ」でトップページを設定した場合
is_home()と先述したis_front_page()は、トップページをどのような表示設定にしてるかによって、使う条件分岐タグも使い分ける必要があるのですね。
is_paged()をトップページのみに使う役割
WordPressの条件分岐タグ「is_paged」の役割は、ページネーションで複数ページになった現在のページ番号が1より大きいかどうかを条件判定します。
WordPressのトップページのみに表示する場合の役割としても、トップページからページネーションで2ページ目以降は非表示にしたい場合などの条件分岐に役立ちます。
<?php is_paged(); ?>
複数ページに分けられたアーカイブやメインのページはis_pagedで条件分岐する対象ですが、投稿や固定ページの内容が <!–nextpage–> クイックタグで分割されている場合は対象ではないことに注意です。
トップページのみに条件分岐する3つのやり方
WordPressでトップページのみに条件分岐するための条件分岐タグを事前知識として先に説明しました。
今度はトップページのみにする条件分岐タグとPHPのif文を使用して、実際にトップページのみに条件分岐するやり方を説明します。
固定ページでホームページ設定してる場合
<?php if(is_front_page()) : ?>
<div>トップページのみに条件分岐した要素</div>
<?php endif; ?>
上のPHPコードのようにif文でWordPressの条件分岐タグis_front_pageを記述して、<?php endif; ?>でif文を終了させます。
if文の開始と終了の間にトップページのみで表示したい内容を記述します。
WordPressのトップページのみにする条件分岐タグのis_front_page()を使う場合は、WordPressの表示設定で「投稿ページ」か「固定ページを選択してホームページで指定したページを設定してる場合」にis_front_page()の条件判定がされます。
最新の投稿を設定してる場合
<?php if(is_home()) : ?>
<div>トップページのみに条件分岐した要素</div>
<?php endif; ?>
次にPHPコードのif文でWordPressの条件分岐タグis_homeを記述して、<?php endif; ?>でif文を終了させます。
if文の開始と終了の間にトップページのみで表示したい内容を記述します。
条件分岐タグのis_home()の条件判定はWordPressの表示設定で「最新の投稿」でトップページに設定した場合と「固定ページ」を選択して「投稿ページ」でトップページを設定した場合です。
なので表示設定したトップページでis_homeの条件判定が一致した場合のトップページのみの内容が表示されます。
2ページ目以降は条件判定しない場合
WordPressの条件分岐タグis_paged()でトップページのみの条件分岐する場合は、is_front_page()やis_home()でトップページのみに表示する内容を完全にトップページのみにするやり方です。
PHPのif文で「もしトップページで2ページ以降ではない場合」の条件で条件判定できるようにWordPressの条件分岐タグとPHPコードで組み立てます。
<?php if(is_home() && !is_paged()) : ?>
<div>トップページのみに条件分岐した要素</div>
<?php endif; ?>
上のPHPのif文でトップページの条件にしてるのが「is_home()」
if文でトップページの1ページのみの条件にしてるのが「!is_paged()」
条件分岐に使用するis_home()と!is_paged()の間の「&&」は倫理演算子のaでなおbであれば真という条件になるようにするためのものです。
また、!is_paged()の「!」ビックリマークは、is_paged()で2ページ目以降かを判定する条件分岐タグを否定する倫理演算子をつけることで「2ページ目以降ではない場合」の条件にできます。
トップページのみ表示した画像
２ページ目は非表示の画像
トップページのみに条件分岐して表示する例
WordPressでトップページのみに条件分岐するやり方の例として以下の2パターンをやってみようと思います。
- トップページのみのヘッダー画像を表示してみる
- トップページのみのメニューを表示してみる
ではスタート。
トップページのみに画像を条件分岐
その1
WordPressのトップページのみにヘッダー画像を表示するために条件分岐する場合です。
例えば事前にカスタムヘッダー機能をカスタム設定に追加しておきトップページのみのヘッダー画像を表示するとします。
<?php if(is_home() && !is_paged()): ?>
<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php header_image(); ?>" class="header-image"
alt="<?php bloginfo( 'name' ); ?>" /></a>
<?php endif; ?>
<?php endif; ?>
PHPのif文で条件分岐タグのis_home()がトップページ判定をしてWordPressのカスタムヘッダー設定で登録した画像がトップページのみで表示することができます。
条件分岐タグで!is_paged()も使用しているので、トップページからページネーションで2ページ目以降に移動した場合は条件が一致しないのでヘッダー画像は非表示になります。
トップページのみにメニューを条件分岐する
その2
トップページのみのメニューを振り分けて条件分岐する場合です。
WordPressのカスタムメニューをトップページのみにしますが「投稿ページでトップページ」と「固定ページでトップページ」の場合のメニューを条件分岐で振り分け、さらに投稿ページのメニューも条件分岐する細かいやり方です。
トップページが投稿ページの場合
<?php if(is_home()) : ?>
<div>
<?php wp_nav_menu(array(
'theme_location' => 'home-nav',
'menu_class' => 'sample',
));?>
</div>
トップページがフロントページの場合
<?php elseif (is_front_page() ) : ?>
<div>
<?php wp_nav_menu(array(
'theme_location' => 'front-nav',
'menu_class' => 'sample',
));?>
</div>
投稿ページの場合
<?php elseif (is_single() ) : ?>
<div>
<?php wp_nav_menu(array(
'theme_location' => 'single-nav',
'menu_class' => 'sample',
));?>
</div>
それ以外の場合
<?php else : ?>
<div>
<?php wp_nav_menu(array(
'theme_location' => 'all-nav',
'menu_class' => 'sample',
));?>
</div>
<?php endif ?>
上のPHPのように、WordPressのトップページのみの条件判定が出来る条件分岐タグ「is_home()」をPHPのif文で、「is_front_page()」はPHPのelseifで条件を振り分けてカスタムメニューのセットを別々にします。
もしトップページが投稿ページならis_home()の条件に一致してセットした投稿ページ設定のトップページのみのメニューを表示。
そしてis_home()の条件に合わないトップページ、つまり固定ページでホームページにしてるトップページのみではis_front_page()がelse ifの条件に一致して固定ページ設定のトップページのみのメニュー表示。
さらにis_home()とis_front_page()の条件に一致しない投稿ページではis_single()で投稿ページ用に作成したカスタムメニューを条件分岐で表示。
最後にPHPの「else」で上記のどの条件にも当てはまらない場合のページに表示するメニューと、細かい条件分岐をしてWordPressのそれぞれのページ専用のメニューが表示できます。
