ホームページ制作のガヤワークス

GAYALOG

ガヤログ

アーカイブ

2022/03/04 (Fri)

WordPress

【WordPress】 グローバルナビなどのナビゲーションにカレントをつける方法

WordPress でグローバルナビなどのナビゲーションにカレントをつける方法。
グローバルナビに現在表示しているページの目印をつけたい時に便利な方法です。

ナビゲーションにカレント付与する場合の実装例を紹介

ナビゲーションにカレント付与する場合の実装例を紹介します。
カレントの付与には条件分岐を使用します。
条件分岐で分ける主なページはフロントページ、固定ページ、投稿ページ、カスタム投稿タイプになります。
例えば、固定ページやカスタム投稿タイプが含まれるサイトのカレントの付与は次のようになります。

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

トップページで current を付与する場合はis_front_pageとis_homeを使用します。例えば、トップページは次のコードを追加します。

<?php if( is_front_page() && is_home() ) echo ' class="current"'; ?>
固定ページで current を付与する場合

固定ページで current を付与する場合は is_page を使用します。
例えば、固定ページのスラッグが faq の場合は次のコードを追加します。

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

親子関係がある固定ページなら array を指定してスラッグを複数指定します。
例えば、固定ページのスラッグが products や item の場合は次のコードを追加します。

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

親子関係の階層が深い場合は祖先のIDを取得できる get_post_ancestors を使ってもよいかもしれません。
例えば、親ページのIDが 1234 の場合、その親ページを含む子ページが表示された時に current を付与したい時、次のコードを追加します。

<?phpif(is_page(1234)||in_array(1234,get_post_ancestors($post->ID))) echo'class="current"'; ?>
カスタム投稿タイプで current を付与する場合

カスタム投稿タイプで current を付与する場合 get_post_type だけで条件分岐を行うと、トップページのメインループなどでもカレントが反応してしまう場合もあります。
そのためトップページを除外する !is_front_page() (フロントページ以外) を加えます。
例えば、カスタム投稿タイプのスラッグが information の場合は次のコードを追加します。

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

投稿の場合は post に変更します。

ここで注意が必要なのは、該当するカスタム投稿に投稿がない場合、current が反応しない場合があります。テスト段階でcurrentが正しく動作しない場合は、投稿があるか確認してください。
投稿がない場合でもカレントを付与したい場合は is_post_type_archive() を使用してください。
ただし、この場合はカスタム投稿の詳細ページにカレントが付与されないので注意してください。

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

アーカイブ