WordPressのカスタムメニューでアクティブページだけ装飾を変える方法(カレント表示)
  • WordPressのカスタムメニューでアクティブページだけ装飾を変える方法(カレント表示)
  • 記事公開:2016/03/12
  • 最終更新:2016/03/13

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

WPのカスタムメニューでアクティブページだけ装飾を変える方法をご紹介します。現在表示されているページがグローバルメニューの中にある場合、そのメニュー部分だけ装飾を変えることができれば、ユーザビリティの向上にも繋がります。3分だけコンテンツを読んでみてください。

この記事は約 2 分で読めます。

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

現在表示されているページがグローバルメニューの中にある場合、そのメニュー部分だけ装飾を変える方法です。例えば、以下の様な感じ・・・、

weta4wyaw

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

wetgwtg

【メニュー3】の部分だけ装飾が変わります。

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

ただし、WordPressで構築しているサイトでカスタムメニュー機能を利用している場合だけ。

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

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

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

.current_page_item {
background: #ff0000;
}

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

まとめ

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

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

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

著者:takaya kondo

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

Wordpressサイトのカスタマイズで
お困りではありませんか?

あなたのWordpressサイトを、ご希望に沿ってカスタマイズいたします。
次に該当する方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしたいが、自分でカスタマイズする暇がない。カスタマイズが得意な人に丸投げしたい。
  • Wordpressサイトをカスタマイズしてみたが、上手くカスタマイズできなかった。カスタマイズ経験が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。

一つでも該当する方は、以下のリンクからチェックしてみてください。

詳細を確認する

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • 2016/08/22

    【WordPress】プラグインを使わずにページのTOPへ戻るリンクを設置してみた。

    プアラグインを使わずに「ページのTOPへ戻るリンク」を設置する方法をご紹介します。個人的にプラグインの数は少ない方が良いと考えているので今回の作業を行ってみました。「ページのTOPへ戻るリンク」を設置したい方は、参考にしてください。 記事を読む

  • 2015/09/11

    WordPressのテーマフォルダにある画像をテーマファイルで表示させるスマートな方法

    テーマフォルダの画像をテーマファイル内でスマートに表示させよう! WordPressのオリジナルテーマを作成し ... 記事を読む

  • 2019/03/03

    カスタムタクソノミーのターム一覧を表示させる方法

    カスタムタクソノミーのターム一覧を表示させる方法をご紹介いたします。リンクあり、リンク無し、空タームの表示非表示など、各パターンのターム一覧を表示させるコードをご紹介しております。コピペでターム一覧を表示できますので、ぜひ活用してください。 記事を読む

  • 2015/09/17

    特定記事のアイキャッチを表示する方法

    特定記事のアイキャッチを取得する方法をご紹介します。とある仕事で特定記事のアイキャッチを表示させる必要があり、調べてみたのでやりかたをまとめてみました。誰かの参考になるとうれしいです。 記事を読む

  • 2017/08/13

    あなたのサイトもWordPressで運営!既存サイトのWordPress化とは?

    既存サイトのWordpress化とはなにか?という部分を詳しく書いてみました。Wordpress化という作業に関するよくある勘違い、既存サイトをWordpress化する手順などまとめてあります。興味のある方はご覧ください。 記事を読む

コメントを残す

(必須)

CAPTCHA