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

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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(カスタムウォーカー機能を使用する)
(How to add a parent class for menu item)
248行目: 248行目:
 
</pre>
 
</pre>
  
=== How to add a parent class for menu item  ===
+
=== メニュー項目用の親クラスを追加する方法 ===
Sometimes you may need to add a class to a menu item if it has submenus.
+
 
 +
メニュー項目にサブメニューがある場合、クラスを追加する必要がある場合があります。
  
 
<pre>
 
<pre>
272行目: 273行目:
 
</pre>
 
</pre>
  
<strong>Note:</strong> Since WordPress 3.7 classes '''.menu-item-has-children''' for [[wp_nav_menu]] , '''.page_item_has_children''' for [[wp_page_menu]] has been added to menus to indicate that an item has sub-items.
+
<strong>:</strong> WordPress 3.7 から '''.menu-item-has-children''' for [[wp_nav_menu]] , '''.page_item_has_children''' for [[wp_page_menu]] が、サブ項目を持っていることを示すために、メニューに追加されました。
  
 
== Menu Item CSS Classes ==
 
== Menu Item CSS Classes ==

2014年5月21日 (水) 01:51時点における版

このページ「テンプレートタグ/wp nav menu」は未翻訳です。和訳や日本語情報を加筆してくださる協力者を求めています

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

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

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

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

Note: 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
オブジェクト) (オプション) Custom walker object to use (Note: You must pass an actual object to use, not a string)
初期値: new Walker_Nav_Menu

用例

デフォルトの用例

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

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

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

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' は無視されます.

<?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;
}
?>

I was trying to customize the look of a specific menu item: Blog on single post pages. After rethinking the code above, it is much simpler to use the body class .single if you can. In my case it works. But nonetheless, the above code is really handy.

カスタムウォーカー機能を使用する

より深い条件つきのクラスについてはカスタムウォーカー機能を使用する必要があります。 ('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 が、サブ項目を持っていることを示すために、メニューに追加されました。

Menu Item CSS Classes

The following classes are applied to menu items, i.e. to the HTML <li> tags, generated by wp_nav_menu():

All Menu Items

  • .menu-item
    This class is added to every menu item.
  • .menu-item-has-children
    This class is added to menu item which has sub-items .
  • .menu-item-object-{object}
    This class is added to every menu item, where {object} is either a post type or a taxonomy.
    • .menu-item-object-category
      This class is added to menu items that correspond to a category.
    • .menu-item-object-tag
      This class is added to menu items that correspond to a tag.
    • .menu-item-object-page
      This class is added to menu items that correspond to static pages.
    • .menu-item-object-{custom}
      This class is added to menu items that correspond to a custom post type or a custom taxonomy.
  • .menu-item-type-{type}
    This class is added to every menu item, where {type} is either "post_type" or "taxonomy".
    • .menu-item-type-post_type
      This class is added to menu items that correspond to post types: i.e. static pages or custom post types.
    • .menu-item-type-taxonomy
      This class is added to menu items that correspond to taxonomies: i.e. categories, tags, or custom taxonomies.

Current-Page Menu Items

  • .current-menu-item
    This class is added to menu items that correspond to the currently rendered page.

Current-Page Parent Menu Items

  • .current-menu-parent
    This class is added to menu items that correspond to the hierarchical parent of the currently rendered page.
  • .current-{object}-parent
    This class is added to menu items that correspond to the hierachical parent of the currently rendered object, where {object} corresponds to the the value used for .menu-item-object-{object}.
  • .current-{type}-parent
    This class is added to menu items that correspond to the hierachical parent of the currently rendered type, where {type} corresponds to the the value used for .menu-item-type-{type}.

Current-Page Ancestor Menu Items

  • .current-menu-ancestor
    This class is added to menu items that correspond to a hierarchical ancestor of the currently rendered page.
  • .current-{object}-ancestor
    This class is added to menu items that correspond to a hierachical ancestor of the currently rendered object, where {object} corresponds to the the value used for .menu-item-object-{object}.
  • .current-{type}-ancestor
    This class is added to menu items that correspond to a hierachical ancestor of the currently rendered type, where {type} corresponds to the the value used for .menu-item-type-{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: If a menu has no items, don't output any markup.
  • 3.0 で導入

ソースファイル

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

最新英語版: WordPress Codex » Function Reference/wp_nav_menu最新版との差分

関数リファレンステンプレートタグ目次もご覧ください。