WordPressのカスタムメニューで、開いているページのナビゲーションだけ装飾を変更する方法をご紹介いたします。いわゆる”カレント表示”というやつです。
当ブログでいうと、例えばトップページを開いたときは、以下のように「HOME」だけ背景色が変わります。
このように、カレント表示させることで、開いているページがどのページなのか明確にわかるようになります。
WordPressのカスタムメニューで開いているページのみ装飾を変更する方法
WordPressでは、カスタムメニューで開いているページのみ装飾を変更するのは非常に簡単です。開いているページのナビゲーションには、「current_page_item」というクラスが追加されるので、current_page_itemに対してCSSを追加してあげればOKです。
当ブログのグローバルナビゲーションは以下のようになっていて、HOMEのliにだけ「current_page_item」というクラスが追加されているのがわかります。
<ul class="nav-menu"> <li id="menu-item-58" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-58"><a title="TechMemo" href="https://techmemo.biz/" data-wpel-link="internal">HOME</a></li> <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a title="HTML" href="https://techmemo.biz/html%e7%9b%ae%e6%ac%a1/" data-wpel-link="internal">HTML</a></li> <li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a title="CSS" href="https://techmemo.biz/css%e7%9b%ae%e6%ac%a1/" data-wpel-link="internal">CSS</a></li> <li id="menu-item-6340" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6340"><a title="JavaScript" href="https://techmemo.biz/javascript%e7%9b%ae%e6%ac%a1/" data-wpel-link="internal">JavaScript</a></li> <li id="menu-item-1188" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1188"><a title="SEO" href="https://techmemo.biz/seo_list/" data-wpel-link="internal">SEO</a></li> <li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93"><a title="Wordpress" href="https://techmemo.biz/wordpress%e7%9b%ae%e6%ac%a1/" data-wpel-link="internal">WordPress</a></li> <li id="menu-item-12315" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12315"><a title="EC-CUBE目次" href="https://techmemo.biz/ec-cube%e7%9b%ae%e6%ac%a1/" data-wpel-link="internal">EC-CUBE</a></li> <li id="menu-item-277" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-277"><a title="WEBサービス" href="https://techmemo.biz/web%e3%82%b5%e3%83%bc%e3%83%93%e3%82%b9%e7%9b%ae%e6%ac%a1/" data-wpel-link="internal">WEBサービス</a></li> <li id="menu-item-871" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-871"><a title="WEBチートシート" href="https://techmemo.biz/web-cheat-sheet-index/" data-wpel-link="internal">WEBチートシート</a></li> <li id="menu-item-8150" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8150"><a href="https://techmemo.biz/about/" data-wpel-link="internal">About</a></li> <li id="menu-item-11778" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11778"><a href="https://techmemo.biz/contact/" data-wpel-link="internal">お問い合わせ</a></li> </ul>
「.current_page_item a{ background: blue;color: white; }」みたいな感じで、背景色をつけたり文字色を変更することが可能になっています。
あとがき
簡単にカレント表示させることができますね。結構使うシーンは多いと思うので、覚えておいて損はないと思いますよ。
ちなみに、.current_page_itemではなく、「.current-menu-item」を使ってもOKです。