WordPress

WordPress ナビゲーションにカレントをつける方法

WordPress でナビゲーションにカレントをつける方法を紹介します。
カレントの付与は条件分岐で行います。一般的にはフロントページと固定ページ、カスタム投稿タイプを条件分岐で分けることで、大体のシチュエーションには対応できると思います。

実装例を紹介

まずは実装例を紹介します。


<ul>
<li>
<a href="<?php echo home_url( '/', 'http' ); ?>"<?php if( is_front_page() && is_home() ) echo ' class="current"'; ?>>
ホーム
</a>
</li>
<li>
<a href="<?php echo home_url( '/', 'http' ); ?>info"<?php if( !is_front_page() && get_post_type() === 'info' ) echo ' class="current"'; ?>>
お知らせ(カスタム投稿)
</a>
</li>
<li>
<a href="<?php echo home_url( '/', 'http' ); ?>faq"<?php if( is_page('faq') ) echo ' class="current"'; ?>>
よくある質問(固定ページ)
</a>
</li>
<li>
<a href="<?php echo home_url( '/', 'http' ); ?>products"<?php if( is_page(array('products','item')) ) echo ' class="current"'; ?>>
製品情報(固定ページ:親子関係がある場合)
</a>
</li>
</ul>

トップページの場合

トップページの場合は is_front_pageis_home を使用します。


<?php if( is_front_page() && is_home() ) echo ' class="current"'; ?>

固定ページの場合

固定ページの場合は is_page を使用します。


<?php if( is_page('faq') ) echo ' class="current"'; ?>

親子関係がある固定ページなら array を指定して、スラッグを複数指定します。


<?php if( is_page(array('products','item')) ) echo ' class="current"'; ?>

親子関係の階層が深い場合は get_post_ancestors を使ってもよいかもしれません。


<?php if(is_page(1234)||in_array(1234,get_post_ancestors($post->ID))) echo 'class="current"'; ?>

カスタム投稿タイプ

カスタム投稿タイプの場合 get_post_type だけだと、トップページでカスタム投稿のループを回していると、それにカレントが反応してしまう場合もあります。
なのでトップページでは !is_front_page() (フロントページ以外) を加えて対応します。


<?php if( !is_front_page() && get_post_type() === 'info' ) echo ' class="current"'; ?>

クラスの付与について

カレントを付与する要素にクラスの指定がある場合とない場合で表示する内容を変更します。
次のコードは、半角スペースは意図的に入れて対応する例です、表示内容は必要に応じて適宜調整してください。


echo ' class="current"' // 要素にクラス指定がない場合
echo ' current' // ある場合

まとめ

WordPress でナビゲーションにカレントをつける方法を紹介しました。

スポンサーリンク

合わせて読みたい関連記事