wordpressでページに応じてナビゲーションに任意のclassをつける方法

ウェブサイトを作っていて、ナビゲーションメニューをページ毎に装飾して現在位置を知らせるってよくやる作業ですが、wordpressだとjs使わなくても簡単にできるのでは？と思い試してみたら簡単にできました♡
手順を公開しますね。

ここではナビゲーションメニューに付与する方法を順を追って説明します。

まずは条件分岐タグis_home() やis_page() を用いて追加したい箇所に以下のようにコードを記述します。

<?php if ( 条件分岐タグ ) { echo ' 任意のクラス'; } ?>

上記の’条件分岐タグ’はis_home() やis_page()のこと。任意のクラスは自由に設定して下さい。

例えば、

<?php if ( is_page('12') ) { echo ' active'; } ?>

このように記載した場合、『page numberが12のページの場合に.activeを追加する』という指示になります。

それでは実際に実装してみましょう。

ナビゲーション毎に任意のページの場合クラスが付与されるように指示します。

<nav>
<ul>
<li class="<?php if ( is_home() ) { echo 'active'; } ?>">HOME</li>
<li class="<?php if ( is_page('2') ) { echo 'active'; } ?>">ABOUT</li>
<li class="<?php if ( is_page('4') ) { echo 'active'; } ?>">SERVICE</li>
<li class="<?php if ( is_page('6') ) { echo 'active'; } ?>">WORK</li>
<li class="<?php if ( is_page('8') ) { echo 'active'; } ?>">CONTACT</li>
</ul>
</nav>

これで完了です。非常に簡単、あっという間。

条件分岐タグは他にもsingle,category,tagなど様々な種類があるので、ご自身の構築するサイト毎に適切なものを選んであげましょう。

詳しくはこちらからCodex日本語版