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

Last update 
/ Posted by Takumi Hirashima

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_page と is_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 する内容を変更します。
半角スペースは意図的に入れています。必要に応じて適宜調整してください。

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

まとめ

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

スポンサーリンク