WordPressのカスタムメニューでアクティブページだけ装飾を変える方法（カレント表示）

現在表示されているページがグローバルメニューの中にある場合、そのメニュー部分だけ装飾を変える方法をご紹介します。

【メニュー3】のページが表示されているのであれば、

【メニュー3】の部分だけ装飾を変える方法です。

このカスタマイズ、実はメチャクチャ簡単にできます。
jsを導入する必要がありそうに思われますが、実は必要ありません！

詳しく見ていきましょう。

カスタムメニューでアクティブページだけ装飾を変える方法

この方法は、WordPressで構築しているサイトで、カスタムメニュー機能を利用したメニューの場合のみ利用することができます。

WordPressのカスタムメニューで作成したメニューは、現在表示されているページがメニューの中にある場合、その部分にデフォルトで【class=”current_page_item”】という要素を付与してくれていいます。

だとすれば、今回のカスタマイズは簡単ですよね！
CSSで【.current_page_item】に好みのデザインを定義してやれば良いだけです。

例えば、以下の様に定義してやります。

この様に定義してやれば、メニュー部分の現在表示しているページの項目だけ、背景色を赤色にしてやることができます。

まとめ

WPのカスタムメニューでアクティブページだけ装飾を変える方法をご紹介しました。

アクティブページだけ装飾を変えてやれば、訪問者も自分の位置を把握しやすくなり、ユーザビリティの向上につながります。

簡単にカスタマイズできますので、このページを参考にしてカスタマイズしてみてください。