• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

「テンプレートタグ/wp nav menu」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(関連資料)
(最新版のマージ)
11行目: 11行目:
 
<tt>theme_location</tt>パラメーターが与えられなかった場合、このタグは以下を表示します。
 
<tt>theme_location</tt>パラメーターが与えられなかった場合、このタグは以下を表示します。
  
*  <tt>menu</tt>パラメーターの値が最低1つでもある場合、そのメニューに一致するID, slug, あるいは名前;
+
*  <tt>menu</tt>パラメーターの値がある場合、そのメニューに一致するID, slug, あるいは名前;
 
*  さもなくば、最初の空でないメニュー;
 
*  さもなくば、最初の空でないメニュー;
さもなくば、<tt>fallback_cb</tt>パラメーターで与えられたタグの出力(デフォルトでは<tt>wp_page_menu()</tt>);
+
さもなくば (メニューで与えられるメニューが空の場合),<tt>fallback_cb</tt>パラメーターで与えられたタグの出力(デフォルトでは<tt>wp_page_menu()</tt>);
 
*  さもなくば、何も表示しない。
 
*  さもなくば、何も表示しない。
  
'''Note:''' [[Version_3.5|WordPress 3.5]]に於いて、メニューアイテムがない場合は、HTMLマークアップはなにも出力されなくなりました。
+
''':''' [[Version_3.5|WordPress 3.5]]に於いて、メニューアイテムがない場合は、HTMLマークアップはなにも出力されなくなりました。
 
<div id="Usage">
 
<div id="Usage">
  
71行目: 71行目:
 
{{Parameter|$items_wrap|文字列|Sprintf()関数の引数として評価される書式の文字列です。 フォーマット文字列には番号付きトークンによって他のパラメーターが組み込まれています. %1$s に 'menu_id' のパラメーターの値が展開され、 %2$s に 'menu_class' のパラメーターの値が展開され、 そして %3$s はリスト項目が値として展開されます.番号付きトークンをフォーマット文字列から省略すると、メニューのマークアップから関連するパラメーターは省略されます。<strong>注:</strong> メニュー項目をかこむタグを除外したい場合(もし現在のテーマにメニュー項目をかこむタグが含まれている場合など)でも 、パラメータとして <tt>%3$s</tt> を渡す必要があります. もし空の文字列を渡してしまいますとメニューは表示されません. |オプション|<tt><nowiki><ul id="%1$s" class="%2$s">%3$s</ul></nowiki></tt>}}
 
{{Parameter|$items_wrap|文字列|Sprintf()関数の引数として評価される書式の文字列です。 フォーマット文字列には番号付きトークンによって他のパラメーターが組み込まれています. %1$s に 'menu_id' のパラメーターの値が展開され、 %2$s に 'menu_class' のパラメーターの値が展開され、 そして %3$s はリスト項目が値として展開されます.番号付きトークンをフォーマット文字列から省略すると、メニューのマークアップから関連するパラメーターは省略されます。<strong>注:</strong> メニュー項目をかこむタグを除外したい場合(もし現在のテーマにメニュー項目をかこむタグが含まれている場合など)でも 、パラメータとして <tt>%3$s</tt> を渡す必要があります. もし空の文字列を渡してしまいますとメニューは表示されません. |オプション|<tt><nowiki><ul id="%1$s" class="%2$s">%3$s</ul></nowiki></tt>}}
 
{{Parameter|$depth|整数|何階層まで表示するか。0 は全階層。|オプション|0}}
 
{{Parameter|$depth|整数|何階層まで表示するか。0 は全階層。|オプション|0}}
{{Parameter|$walker|オブジェクト|Custom walker object to use (Note: You must pass an actual object to use, not a string)|オプション|new [[関数リファレンス/Walker_Nav_Menu|Walker_Nav_Menu]]}}
+
{{Parameter|$walker|オブジェクト|使用するカスタムウォーカーオブジェクト (: You must pass an actual object to use, not a string)|オプション|new [[関数リファレンス/Walker_Nav_Menu|Walker_Nav_Menu]] /<code>[http://codex.wordpress.org/Class_Reference/Walker_Nav_Menu en]</code>}}
  
 
<div id="Examples">
 
<div id="Examples">
77行目: 77行目:
 
== 用例 ==
 
== 用例 ==
 
</div>
 
</div>
 +
 +
最初の空でないメニュー、または<tt>wp_page_menu()</tt>を表示します。
  
 
<div id="Default_Examples">
 
<div id="Default_Examples">
90行目: 92行目:
 
</div>
 
</div>
 
<pre><?php wp_nav_menu( array('menu' => 'Project Nav' )); ?></pre>
 
<pre><?php wp_nav_menu( array('menu' => 'Project Nav' )); ?></pre>
 +
 +
In the case that no menu matching <tt>menu</tt> is found, it seems that passing a bogus <tt>theme_location</tt> is the only way to prevent falling back to the first non-empty menu:
 +
 +
<pre><?php
 +
 +
wp_nav_menu(
 +
    array(
 +
'menu' => 'Project Nav',
 +
// do not fall back to first non-empty menu
 +
'theme_location' => '__no_such_location',
 +
// do not fall back to wp_page_menu()
 +
'fallback_cb' => false
 +
  )
 +
);
 +
 +
?></pre>
  
 
<div id="Used_in_the_Twenty_Ten_theme">
 
<div id="Used_in_the_Twenty_Ten_theme">
109行目: 127行目:
 
</div>
 
</div>
 
ナビゲーションコンテナを削除するためにはfunctions.phpで指定されて、wp_nav_menu関数の引数の中で ( 例. 'theme_location' => 'primary-menu' )  割り当てられたメニューを持っている必要があります!そうでない場合は引数 'container' => 'false' は無視されます.
 
ナビゲーションコンテナを削除するためにはfunctions.phpで指定されて、wp_nav_menu関数の引数の中で ( 例. 'theme_location' => 'primary-menu' )  割り当てられたメニューを持っている必要があります!そうでない場合は引数 'container' => 'false' は無視されます.
 +
 +
Note 1: Apparently, just having the presence of 'container' in the $args list will cause the container to not be added. That is, whether the value assigned is 'false', false, 'foo' or 'bar', it doesn't matter; the container will be removed.
 +
 +
Note 2: 'container' => 'true' is the same as 'false', while 'container' => true (i.e., no quotes around true) will replace div in the container with 1. Something like <1 id="foo'...>.
 +
 
<pre>
 
<pre>
 
<?php
 
<?php
162行目: 185行目:
 
特定のメニュー項目の外観をカスタマイズしようとした場合:ブログのシングル投稿ページなど。ボディクラスの.singleを使うよりもとても簡単に上記のコードを使えば実現できます。
 
特定のメニュー項目の外観をカスタマイズしようとした場合:ブログのシングル投稿ページなど。ボディクラスの.singleを使うよりもとても簡単に上記のコードを使えば実現できます。
  
==== カスタムウォーカー機能を使用する ====
+
==== カスタムウォーカークラスを使用する ====
  
 
より深い条件つきのクラスについてはカスタムウォーカー機能を使用する必要があります。 (<tt>'walker' => new Your_Walker_Function</tt> 引数を作る).  
 
より深い条件つきのクラスについてはカスタムウォーカー機能を使用する必要があります。 (<tt>'walker' => new Your_Walker_Function</tt> 引数を作る).  
  
ウォーカーの新しい関数を作成する最も簡単な方法は<tt>\wp-includes\nav-menu-template.php</tt> のデフォルトクラス から(<code>[http://phpdoc.wordpress.org/trunk/WordPress/Nav_Menus/Walker_Nav_Menu.html Walker_Nav_Menu]</code>) コピーして必要とするものをカスタマイズすることです。
+
ウォーカーの新しいクラスを作成する最も簡単な方法は<tt>\wp-includes\nav-menu-template.php</tt> のデフォルトクラス から(<code>[https://developer.wordpress.org/reference/classes/walker_nav_menu/ Walker_Nav_Menu]</code>) コピーして必要とするものをカスタマイズすることです。
  
 
===== 用例 =====
 
===== 用例 =====
332行目: 355行目:
  
 
<tt>wp_nav_menu()</tt> は {{Trac|wp-includes/nav-menu-template.php}} にあります。
 
<tt>wp_nav_menu()</tt> は {{Trac|wp-includes/nav-menu-template.php}} にあります。
 +
 +
==外部リソース==
 +
* [http://kuttler.eu/post/wp_nav_menu-wordpress-3-0/ How to add navigation menus to existing themes and preserve backward compatibility]
 +
* [http://justintadlock.com/archives/2010/06/01/goodbye-headaches-hello-menus Excellent article on nav menus by Justin Tadlock]
 +
* [http://wordpress.stackexchange.com/questions/19245/any-docs-for-wp-nav-menus-items-wrap-argument/19247#19247 Excellent explanation of the $items_wrap argument by Thomas Scholz from toscho.de]
 +
* [http://wordpress.stackexchange.com/questions/14037/menu-items-description/14039#14039 Excellent explanation for walkers and such ]
 +
* [http://wordpress.stackexchange.com/questions/64515/fall-back-for-main-menu/64526#64526 Detailed explanation of fallback_cb]
 +
* [http://cloudspier.com/styling-parent-menu-items-using-core-wp-classes Styling Parent menu items using core classes]
 +
  
 
<div id="Related">
 
<div id="Related">
 
== 関連資料 ==
 
== 関連資料 ==
</div>
+
* [[Class_Reference/Walker|The Walker Class]] /[[:en:Class_Reference/Walker|en]]  
* [http://www.nkuttler.de/2010/06/08/wp_nav_menu-wordpress-3-0/ How to add navigation menus to existing themes and preserve backward compatibility]
+
  
 
{{Navigation Menu Tags}}
 
{{Navigation Menu Tags}}
342行目: 373行目:
 
{{Tag Footer}}
 
{{Tag Footer}}
  
{{原文|Function Reference/wp_nav_menu|143567}}<!-- 12:55, 13 May 2014 Menzow 版 -->
+
{{原文|Function Reference/wp_nav_menu|152323}}<!-- 01:09, 18 June 2015‎ Samwilson  版 -->
  
 
{{DEFAULTSORT:Wp_nav_menu}}
 
{{DEFAULTSORT:Wp_nav_menu}}

2015年7月12日 (日) 06:26時点における版

このタグは、ナビゲーションメニューを表示します。メニューは管理画面 Appearance > Menus で作成できます。

theme_locationパラメーターが与えられた時、このタグはロケーションに割り当てられたメニューを表示します。もしロケーションがない場合、またはメニューが割り当てられていない場合は表示されません。

theme_locationパラメーターが与えられなかった場合、このタグは以下を表示します。

  • menuパラメーターの値がある場合、そのメニューに一致するID, slug, あるいは名前;
  • さもなくば、最初の空でないメニュー;
  • さもなくば (メニューで与えられるメニューが空の場合),fallback_cbパラメーターで与えられたタグの出力(デフォルトではwp_page_menu());
  • さもなくば、何も表示しない。

注: WordPress 3.5に於いて、メニューアイテムがない場合は、HTMLマークアップはなにも出力されなくなりました。

使い方

<?php wp_nav_menu($args); ?> 
<?php

$defaults = array(
	'theme_location'  => '',
	'menu'            => '',
	'container'       => 'div',
	'container_class' => '',
	'container_id'    => '',
	'menu_class'      => 'menu',
	'menu_id'         => '',
	'echo'            => true,
	'fallback_cb'     => 'wp_page_menu',
	'before'          => '',
	'after'           => '',
	'link_before'     => '',
	'link_after'      => '',
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
	'depth'           => 0,
	'walker'          => ''
);

wp_nav_menu( $defaults );

?>


パラメータ

$theme_location
文字列) (オプション) テーマの中で使われる位置。ユーザーが選択できるように register_nav_menu() で登録されている必要がある。
初期値: なし
$menu
文字列) (オプション) 望ましいメニュー。 id, slug, name をこの順で受け入れる。
初期値: なし
$container
文字列) (オプション) ul をラップするか、ラップする場合は何でラップするか。使えるタグは、 divnav。コンテナをなしにする場合は false。例: 'container' => false
初期値: div
$container_class
文字列) (オプション) コンテナに適用されるクラス名
初期値: menu-{menu slug}-container
$container_id
文字列) (オプション) コンテナに適用されるID
初期値: なし
$menu_class
文字列) (オプション) メニューを構成する ul 要素に適用するCSS クラス名。
初期値: menu
$menu_id
文字列) (オプション) メニューを構成する ul 要素に適用するID。
初期値: menu slug(順に増加)
$echo
真偽値) (オプション) メニューをHTML出力する(true)か、PHPの値で返す(false)か
初期値: true
$fallback_cb
文字列) (オプション) メニューが存在しない場合にコールバック関数を呼び出す
初期値: wp_page_menu
$before
文字列) (オプション) リンクテキストの前のテキスト
初期値: なし
$after
文字列) (オプション) リンクテキストの後のテキスト
初期値: なし
$link_before
文字列) (オプション) リンクの前のテキスト
初期値: なし
$link_after
文字列) (オプション) リンクの後のテキスト
初期値: なし
$items_wrap
文字列) (オプション) Sprintf()関数の引数として評価される書式の文字列です。 フォーマット文字列には番号付きトークンによって他のパラメーターが組み込まれています. %1$s に 'menu_id' のパラメーターの値が展開され、 %2$s に 'menu_class' のパラメーターの値が展開され、 そして %3$s はリスト項目が値として展開されます.番号付きトークンをフォーマット文字列から省略すると、メニューのマークアップから関連するパラメーターは省略されます。注: メニュー項目をかこむタグを除外したい場合(もし現在のテーマにメニュー項目をかこむタグが含まれている場合など)でも 、パラメータとして %3$s を渡す必要があります. もし空の文字列を渡してしまいますとメニューは表示されません.
初期値: <ul id="%1$s" class="%2$s">%3$s</ul>
$depth
整数) (オプション) 何階層まで表示するか。0 は全階層。
初期値: 0
$walker
オブジェクト) (オプション) 使用するカスタムウォーカーオブジェクト (注: You must pass an actual object to use, not a string)
初期値: new Walker_Nav_Menu /en

用例

最初の空でないメニュー、またはwp_page_menu()を表示します。

デフォルトの用例

<div class="access">
  <?php wp_nav_menu(); ?>
</div>

指定したメニューに絞り込む

<?php wp_nav_menu( array('menu' => 'Project Nav' )); ?>

In the case that no menu matching menu is found, it seems that passing a bogus theme_location is the only way to prevent falling back to the first non-empty menu:

<?php

wp_nav_menu(
    array(
	'menu' => 'Project Nav',
	// do not fall back to first non-empty menu
	'theme_location' => '__no_such_location',
	// do not fall back to wp_page_menu()
	'fallback_cb' => false
  )
);

?>

Twenty Tenテーマで使用する

<div id="access" role="navigation">
  <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
	<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>">
                 <?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
	<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is 
                 the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>
	<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div><!-- #access -->

ナビゲーションコンテナを削除する

ナビゲーションコンテナを削除するためにはfunctions.phpで指定されて、wp_nav_menu関数の引数の中で ( 例. 'theme_location' => 'primary-menu' ) 割り当てられたメニューを持っている必要があります!そうでない場合は引数 'container' => 'false' は無視されます.

Note 1: Apparently, just having the presence of 'container' in the $args list will cause the container to not be added. That is, whether the value assigned is 'false', false, 'foo' or 'bar', it doesn't matter; the container will be removed.

Note 2: 'container' => 'true' is the same as 'false', while 'container' => true (i.e., no quotes around true) will replace div in the container with 1. Something like <1 id="foo'...>.

<?php
function my_wp_nav_menu_args( $args = '' ) {
	$args['container'] = false;
	return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );
?>

または

<?php wp_nav_menu( array( 'container' => '' ) ); ?>

ul を削除する

アイテムを囲んでいる ul を削除します。

<?php wp_nav_menu( array( 'items_wrap' => '%3$s' ) ); ?>

メニューの先頭に単語を追加する

好きな単語をリストアイテムとしてメニューの先頭に追加することができます。この例では、単語"Menu:"が先頭に追加されます。CSS スタイルを使用できるようにするリストアイテム (この例では"item-id") で id を設定することがあります。

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '<ul><li id="item-id">Menu: </li>%3$s</ul>' ) ); ?>

条件付きクラスのメニュー項目を追加

カスタム クラスを指定する条件に基づいてメニュー項目を追加できます。条件を変更することを忘れないでください。

<?php
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
     if(is_single() && $item->title == "Blog"){ //Notice you can change the conditional from is_single() and $item->title
             $classes[] = "special-class";
     }
     return $classes;
}
?>

特定のメニュー項目の外観をカスタマイズしようとした場合:ブログのシングル投稿ページなど。ボディクラスの.singleを使うよりもとても簡単に上記のコードを使えば実現できます。

カスタムウォーカークラスを使用する

より深い条件つきのクラスについてはカスタムウォーカー機能を使用する必要があります。 ('walker' => new Your_Walker_Function 引数を作る).

ウォーカーの新しいクラスを作成する最も簡単な方法は\wp-includes\nav-menu-template.php のデフォルトクラス から(Walker_Nav_Menu) コピーして必要とするものをカスタマイズすることです。

用例

この custom walker functionは、いくつかの条件つきのクラスをあなたのメニューに追加します。 (すなわちサブメニューや、メニューの奇数/偶数などにいくつかの条件付きのクラスを追加します):

class themeslug_walker_nav_menu extends Walker_Nav_Menu {
  
// add classes to ul sub-menus
function start_lvl( &$output, $depth ) {
    // depth dependent classes
    $indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // code indent
    $display_depth = ( $depth + 1); // because it counts the first submenu as 0
    $classes = array(
        'sub-menu',
        ( $display_depth % 2  ? 'menu-odd' : 'menu-even' ),
        ( $display_depth >=2 ? 'sub-sub-menu' : '' ),
        'menu-depth-' . $display_depth
        );
    $class_names = implode( ' ', $classes );
  
    // build html
    $output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n";
}
  
// add main/sub classes to li's and links
 function start_el( &$output, $item, $depth, $args ) {
    global $wp_query;
    $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent
  
    // depth dependent classes
    $depth_classes = array(
        ( $depth == 0 ? 'main-menu-item' : 'sub-menu-item' ),
        ( $depth >=2 ? 'sub-sub-menu-item' : '' ),
        ( $depth % 2 ? 'menu-item-odd' : 'menu-item-even' ),
        'menu-item-depth-' . $depth
    );
    $depth_class_names = esc_attr( implode( ' ', $depth_classes ) );
  
    // passed classes
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );
  
    // build html
    $output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $depth_class_names . ' ' . $class_names . '">';
  
    // link attributes
    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
    $attributes .= ' class="menu-link ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"';
  
    $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
        $args->before,
        $attributes,
        $args->link_before,
        apply_filters( 'the_title', $item->title, $item->ID ),
        $args->link_after,
        $args->after
    );
  
    // build html
    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}

ログインしているユーザに異なるメニューを表示する

ログインしているユーザーとログインしていないユーザーで別のメニューを表示させる。

<?php
if ( is_user_logged_in() ) {
     wp_nav_menu( array( 'theme_location' => 'logged-in-menu' ) );
} else {
     wp_nav_menu( array( 'theme_location' => 'logged-out-menu' ) );
}
?>

メニュー項目用の親クラスを追加する方法

メニュー項目にサブメニューがある場合、クラスを追加する必要がある場合があります。

add_filter( 'wp_nav_menu_objects', 'add_menu_parent_class' );
function add_menu_parent_class( $items ) {
	
	$parents = array();
	foreach ( $items as $item ) {
		if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
			$parents[] = $item->menu_item_parent;
		}
	}
	
	foreach ( $items as $item ) {
		if ( in_array( $item->ID, $parents ) ) {
			$item->classes[] = 'menu-parent-item'; 
		}
	}
	
	return $items;    
}

注: WordPress 3.7 から .menu-item-has-children for wp_nav_menu , .page_item_has_children for wp_page_menu が、サブ項目を持っていることを示すために、メニューに追加されました。

メニュー項目の CSSクラス

以下のクラスは、メニュー項目に適用されます。 例. wp_nav_menu():によって生成される<li> タグ

すべてのメニュー項目

  • .menu-item
    このクラスは、すべてのメニュー項目に追加されます。
  • .menu-item-has-children
    このクラスは、サブ項目を持つメニュー項目に追加されます。
  • .menu-item-object-{object}
    このクラスはあらゆるメニュー項目に追加されます。{object} は"post_type" または "taxonomy"のどちらかです。
    • .menu-item-object-category
      このクラスは、カテゴリに対応するメニュー項目に追加されます。
    • .menu-item-object-tag
      このクラスは、タグに対応するメニュー項目に追加されます。
    • .menu-item-object-page
      このクラスは、固定ページに対応するメニュー項目に追加されます。
    • .menu-item-object-{custom}
      このクラスは、カスタムポストタイプやカスタム分類に対応したメニュー項目に追加されます。
  • .menu-item-type-{type}
    このクラスはあらゆるメニュー項目に追加されます。{type} は"post_type" または "taxonomy"のどちらかです。
    • .menu-item-type-post_type
      このクラスはポストタイプに対応するメニュー項目に追加されます。: i.e. static pages or custom post types.
    • .menu-item-type-taxonomy
      このクラスはカスタム分類に対応するメニュー項目に追加されます。: i.e. categories, tags, or custom taxonomies.

現在のページのメニュー項目

  • .current-menu-item
    このクラスは、現在表示されているページに対応するメニュー項目に追加されます。

現在のページの親メニュー項目

  • .current-menu-parent
    このクラスは、現在表示されているページの階層の親に対応するメニュー項目に追加されます。
  • .current-{object}-parent
    このクラスは、現在表示されているオブジェクトの階層の親に対応するメニュー項目に追加されます。{object}の部分は、.menu-item-object-{object}に対応する値が出力されます。
  • .current-{type}-parent
    このクラスは、現在表示されているタイプの階層の親に対応するメニュー項目に追加されます。 {type}の部分は、.menu-item-type-{type}に対応する値が出力されます。

現在のページの先祖メニュー項目

  • .current-menu-ancestor
    このクラスは、現在表示されているページの階層の先祖に対応するメニュー項目に追加されます。
  • .current-{object}-ancestor
    このクラスは、現在表示されているオブジェクトの階層の先祖に対応するメニュー項目に追加されます。{object}の部分は、.menu-item-object-{object}に対応する値が出力されます。
  • .current-{type}-ancestor
    このクラスは、現在表示されているタイプの階層の先祖に対応するメニュー項目に追加されます。{type}の部分は、.menu-item-object-{type}に対応する値が出力されます。

サイトのフロント ページのメニュー項目

  • .menu-item-home
    このクラスは、サイトのフロント ページに対応するメニュー項目に追加されます。

wp_page_menu()の下位互換性

次のクラスは wp_page_menu 関数の出力と一緒に下位互換性を維持するために追加されます。

  • .page_item
    このクラスは固定ページに対応するメニュー項目に追加されます。
  • .page_item_has_children
    このクラスはサブページを持つメニュー項目に追加されます。
  • .page-item-$ID
    $IDは固定ページのIDはであり、このクラスは固定ページに対応するメニュー項目を追加します。
  • .current_page_item
    このクラスは現在表示されている固定ページに対応するメニュー項目に追加されます。
  • .current_page_parent
    このクラスは現在表示されている固定ページの階層の親に対応するメニュー項目に追加されます。
  • .current_page_ancestor
    このクラスは現在表示されている固定ページの階層の先祖に対応するメニュー項目に追加されます。

更新履歴

  • 3.5.0: メニューに項目が登録されていない時は、マークアップを出力しないように
  • 3.0 で導入

ソースファイル

wp_nav_menu()wp-includes/nav-menu-template.php にあります。

外部リソース