PAGE TOP

WordPressのナビメニューをカレント表示にする方法

WordPressのカスタムメニューをカレント表示にする

WordPressでナビメニューを使用している時、現在開いているページがどのページなのか、ナビメニューの色や画像を変更してわかりやすくしたいと思いますが、ナビメニューを使用している時にWordPressが自動的に出力するコードにcssを指定することで実現できます。

メニューを使用できるように設定

自作のテーマを使用している場合は、まずメニューを使用できるようにfunctions.phpに以下を記述します。

functions.php

//カスタムメニュー
add_theme_support('menus');

これで管理画面より「外観>メニュー」が使用可能になります。
管理画面から、メニューに表示したいページタイトルを選択してドラッグ&ドロップで追加してゆきます。

作成したメニューを表示したい場所をテンプレートに

<?php wp_nav_menus('○○'); ?> /*○○はメニューの名前*/

と記述すればOK。

メニューを表示させると自動的に出力されるタグ

※メニュー名は「gnavi」

<div class="menu-gnavi-container">
<ul id="menu-gnavi" class="menu">
	<li id="menu-item-1" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1 current_page_item menu-item-1">メニュー1</a></li>
	<li id="menu-item-2" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2"><a title="メニュー2" href="#">メニュー2</a></li>
	<li id="menu-item-3" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3"><a title="メニュー3" href="#">メニュー3</a></li>
	<li id="menu-item-4" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4"><a title="メニュー4" href="#">メニュー4</a></li>
	<li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5"><a title="メニュー5" href="#">メニュー5</a></li>
</ul>
</div>

この時、表示しているページに限り「current-menu-item」「current_page_item」といったクラスが付与されていることに気付きます。
このクラスにcssでカレント表示であることを指定してやればいいことがわかります。

テキストメニューの場合に色を変えてカレント表示

.menu-item a{
	color:#000;
}
.menu-item a:hover{
	color:#f00;
}
.current-menu-item a{
	color:#f00;
}

甚だ単純な記述ですが、通常メニューは文字色が「黒」、マウスホバー時は文字色が「赤」、カレントメニューも文字色が「赤」という表現です。

メニューに画像を使用する場合

メニューを画像にしたい場合は、まず管理画面のメニュー項目に、cssクラスを付与してやる必要があります。

カスタムメニューオプション

管理画面のメニューに追加した項目を開いてcssクラスを任意の値で付けてください。(ここではわかりやすくmenu1~5としました。)
※cssクラスが表示されない場合は表示オプションでcssクラスにチェックを入れます。

画像の表示位置を変えて実現するロールオーバー画像を用意して、

.menu1 a{
	background-image:url(img/○○.png);
	background-position: left top;
}
.menu1.menu-item a:hover {
	background-image:url(img/○○.png);
	background-position: left bottom; 
}
.menu1.current-menu-item a {
	background-image:url(img/○○.png);
	background-position: left bottom; 
}

と指定してやればOK!。

階層構造を持つメニューで、下層ページ表示時もカレント表示を実現するためには、上記のcssに

.menu1.current_page_parent a,
.menu1.current_page_ancestor a{
	background-image:url(img/○○.png);
	background-position: left bottom;
}

と追加します。

WordPressが自動で出力するタグをソースで見てcssで装飾する手法は、ウィジェット使用時の装飾やその他様々な場面で役立ちます。


同じカテゴリのおすすめ記事

  • カテゴリー

  • 最近の投稿

  •