WordPressのカスタムメニューで開いているページのみ装飾を変更する方法(カレント表示)

WordPressのカスタムメニューで開いているページのみ装飾を変更する方法(カレント表示)

WordPressのカスタムメニューで開いているページのみ装飾を変更する方法(カレント表示)

WordPressのカスタムメニューで、開いているページのナビゲーションだけ装飾を変更する方法をご紹介いたします。いわゆる”カレント表示”というやつです。

当ブログでいうと、例えばトップページを開いたときは、以下のように「HOME」だけ背景色が変わります。

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です。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です