テンプレートタグ/wp nav menu

説明

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

theme_location パラメーターが与えられた時、このタグは theme_location が示す位置へ割り当てられたメニューを表示します。その位置がない、またはメニューが割り当てられていない場合は、fallback_cb パラメーターで与えられた関数を呼び出してメニューを表示します。

theme_location パラメーターが与えられなかった場合、このタグは次の規則に従います。

menu パラメーターが与えられている場合、それ（ID、スラッグ、または名前）に一致するメニュー；
さもなくば、最初の空でないメニュー；
さもなくば（ひとつもメニューが定義されていない場合）、fallback_cb パラメーターで与えられた関数を呼び出す（デフォルトでは wp_page_menu()）；
さもなくば（fallback_cb が関数ではない）、何も表示しない。

注: WordPress 3.5 以降、メニュー項目がない場合は、HTML マークアップはなにも出力されなくなりました。

使い方

<?php wp_nav_menu( $args ); ?>

デフォルト値を明示した使い方

<?php
$defaults = array(
	'menu'            => '',
	'menu_class'      => 'menu',
	'menu_id'         => '{メニューのスラッグ}-{連番}',
	'container'       => 'div',
	'container_class' => 'menu-{メニューのスラッグ}-container',
	'container_id'    => '',
	'fallback_cb'     => 'wp_page_menu',
	'before'          => '',
	'after'           => '',
	'link_before'     => '',
	'link_after'      => '',
	'echo'            => true,
	'depth'           => 0,
	'walker'          => '',
	'theme_location'  => '',
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
);
wp_nav_menu( $defaults );
?>

パラメータ

$args

（配列）（オプション）パラメータを要素とする配列。

初期値：空の配列

配列には次のパラメーターを入れることができます。パラメーターの名前と値を配列のキー名と値にします。

menu

（文字列）（オプション）望ましいメニュー。 id, slug, name をこの順で受け入れる。

初期値：なし

menu_class

（文字列）（オプション）メニューを構成する ul 要素に適用するCSS クラス名。

初期値： 'menu'

menu_id

（文字列）（オプション）メニューを構成する ul 要素に適用するID。

初期値： '{メニューのスラッグ}-{連番}'

container

（文字列）（オプション） ul をラップするか、ラップする場合は何でラップするか。使えるタグは、 div、nav。コンテナをなしにする場合は false。例: 'container' => false

初期値： div

container_class

（文字列）（オプション）コンテナに適用されるクラス名

初期値： 'menu-{メニューのスラッグ}-container'

container_id

（文字列）（オプション）コンテナに適用されるID

初期値：なし

fallback_cb

（文字列）（オプション）メニューが存在しない場合にコールバック関数を呼び出す

初期値： wp_page_menu

before

（文字列）（オプション）リンクテキストの前のテキスト

初期値：なし

after

（文字列）（オプション）リンクテキストの後のテキスト

初期値：なし

link_before

（文字列）（オプション）リンクの前のテキスト

初期値：なし

link_after

（文字列）（オプション）リンクの後のテキスト

初期値：なし

echo

（真偽値）（オプション）メニューをHTML出力する(true)か、PHPの値で返す(false)か

初期値： true

depth

（整数）（オプション）何階層まで表示するか。0 は全階層。

初期値： 0

walker

（オブジェクト）（オプション）使用するカスタムウォーカーオブジェクト (注: You must pass an actual object to use, not a string)

初期値： new Walker_Nav_Menu /en

theme_location

（文字列）（オプション）テーマの中で使われる位置。ユーザーが選択できるように register_nav_menu() で登録されている必要がある。

初期値：なし

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>

用例

デフォルトの用例

最初の空でないメニュー、または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 にあります。

外部リソース

テンプレートタグ/wp nav menu

目次

説明

使い方

デフォルト値を明示した使い方

パラメータ

用例

デフォルトの用例

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

Twenty Tenテーマで使用する

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

ul を削除する

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

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

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

用例

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

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

メニュー項目の CSSクラス

すべてのメニュー項目

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

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

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

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

wp_page_menu()の下位互換性

更新履歴

ソースファイル

外部リソース

関連資料

案内メニュー

検索

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

`wp_page_menu()`の下位互換性