- 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細)
テンプレートタグ/wp nav menu
タグ一覧: テンプレートタグ | インクルードタグ | 条件分岐タグ | その他の関数 | Code Reference
使い方: テンプレートタグ入門 | パラメータの渡し方 | 初心者の方へ | その他のテーマ関連資料
このタグは、ナビゲーションメニューを表示します。メニューは 管理画面 > 外観 > メニュー で作成できます。
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
- 初期値: new Walker_Nav_Menu /
- 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-object-category
- .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.
- .menu-item-type-post_type
現在のページのメニュー項目
- .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 関数の出力と一緒に下位互換性を維持するために追加されます。
- .page_item
このクラスは固定ページに対応するメニュー項目に追加されます。 - .page_item_has_children
このクラスはサブページを持つメニュー項目に追加されます。 - .page-item-$ID
$IDは固定ページのIDはであり、このクラスは固定ページに対応するメニュー項目を追加します。 - .current_page_item
このクラスは現在表示されている固定ページに対応するメニュー項目に追加されます。 - .current_page_parent
このクラスは現在表示されている固定ページの階層の親に対応するメニュー項目に追加されます。 - .current_page_ancestor
このクラスは現在表示されている固定ページの階層の先祖に対応するメニュー項目に追加されます。
更新履歴
ソースファイル
wp_nav_menu() は wp-includes/nav-menu-template.php
にあります。
外部リソース
- How to add navigation menus to existing themes and preserve backward compatibility
- Excellent article on nav menus by Justin Tadlock
- Excellent explanation of the $items_wrap argument by Thomas Scholz from toscho.de
- Excellent explanation for walkers and such
- Detailed explanation of fallback_cb
- Styling Parent menu items using core classes
関連資料
ナビゲーションメニュー: register_nav_menus(), register_nav_menu(), unregister_nav_menu() /en , has_nav_menu(), wp_nav_menu(), wp_get_nav_menu_items()
最新英語版: WordPress Codex » Function Reference/wp_nav_menu (最新版との差分)