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

最終更新日 2021.05.24 - 公開日 2016.02.04

by Takumi Hirashima

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

ナビゲーションにカレント付与する場合の実装例を紹介
class属性の指定について
1. class属性を含める場合
2. class属性が不要な場合

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

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

<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>

トップページで 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 を付与したい時、次のコードを追加します。

<?php if(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"'; ?>

class属性の指定について

カレントを付与する要素にclass属性の指定が不要な場合があります。
そういった場合は、次のように書き分けることで対応します。

class属性を含める場合

class属性を含める場合は次のようにします。

echo ' class="current"' // class属性を含めて current を付与する

class属性が不要な場合

class属性が不要な場合は次のようにします。

echo ' current' // current だけを付与する

半角スペースを意図的に入れているので、コードを利用される場合は内容に応じて調整してください。

まとめ

WordPress でグローバルナビなどのナビゲーションにカレントをつける方法を紹介しました。