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

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

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

提供: WordPress Codex 日本語版
移動先: 案内検索

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

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 をラップするか、ラップする場合は何でラップするか。使えるタグは、 divnav。コンテナをなしにする場合は 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 にあります。

外部リソース