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

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

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

提供: WordPress Codex 日本語版
移動先: 案内、 検索
(en:Function Reference/wp_nav_menu 12:38, 20 March 2010 Bono 版を翻訳用にコピー／ author: Benoit G)
 
細
 
(12人の利用者による、間の61版が非表示)
1行目: 1行目:
−
== Description ==
+
{{テンプレートタグガイド|クエリ}}<!-- 試験的に挿入 -->
  
−
Display a navigation menu. Menus can be created from the backend: [[Administration Panels#Appearance|Appearance]] > [[Appearance Menus SubPanel|Menus]].
+
<div id="Description">
 +
== 説明 ==
 +
</div>
  
−
== Usage ==
+
このタグは、ナビゲーションメニューを表示します。メニューは [[管理画面]] > [[管理画面#Appearance|外観]] > [[管理画面/外観/メニュー|メニュー]] で作成できます。
  
−
%%% <?php wp_nav_menu($args); ?> %%%
+
<tt>theme_location</tt> パラメーターが与えられた時、このタグは <tt>theme_location</tt> が示す位置へ割り当てられたメニューを表示します。その位置がない、またはメニューが割り当てられていない場合は、<tt>fallback_cb</tt> パラメーターで与えられた関数を呼び出してメニューを表示します。
  
−
== Parameters ==
+
<tt>theme_location</tt> パラメーターが与えられなかった場合、このタグは次の規則に従います。
  
−
{{Parameter|$id|integer|The menu id.|optional|blank}}
+
* <tt>menu</tt> パラメーターが与えられている場合、それ（ID、スラッグ、または名前）に一致するメニュー；
−
{{Parameter|$slug|string|The menu slug|optional|blank}}
+
* さもなくば、最初の空でないメニュー；
−
{{Parameter|$menu|string|The menu name|optional|blank}}
+
* さもなくば（ひとつもメニューが定義されていない場合）、<tt>fallback_cb</tt> パラメーターで与えられた関数を呼び出す（デフォルトでは <tt>wp_page_menu()</tt>）；
−
{{Parameter|$container|string|Parent element of the menu|optional|div}}
+
* さもなくば（<tt>fallback_cb</tt> が関数ではない）、何も表示しない。
−
{{Parameter|$container_class|string|The parent element class|optional|blank}}
+
−
{{Parameter|$menu_class|string|The menu class|optional|div}}
+
−
{{Parameter|$format|string|Whether to format the ul|optional|menu}}
+
−
{{Parameter|$fallback_cb|string|If the menu doesn't exists, a callback function will fire|optional|wp_page_menu}}
+
−
{{Parameter|$before_link|string|Output text before the link|optional}}
+
−
{{Parameter|$after_link|string|Output text after the link|optional}}
+
−
{{Parameter|$before_title|string|Output text before the link text|optional}}
+
−
{{Parameter|$after_title|string|Output text after the link text|optional}}
+
−
{{Parameter|$echo|boolean|Whether to echo the menu or return it|optional|true}}
+
  
−
== Examples ==
+
'''注:''' [[Version_3.5|WordPress 3.5]] 以降、メニュー項目がない場合は、HTML マークアップはなにも出力されなくなりました。
 +
 
 +
<div id="Usage">
 +
== 使い方 ==
 +
</div>
 +
 
 +
<?php wp_nav_menu( $args ); ?>
 +
 
 +
=== デフォルト値を明示した使い方 ===
 +
 
 +
<pre>
 +
<?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 );
 +
?>
 +
</pre>
 +
 
 +
 
 +
<div id="Parameters">
 +
== パラメータ ==
 +
</div>
 +
 
 +
{{Parameter|$args|配列|パラメータを要素とする配列。|オプション|空の配列}}
 +
 
 +
配列には次のパラメーターを入れることができます。パラメーターの名前と値を配列のキー名と値にします。
 +
 
 +
{{Parameter|menu|文字列|望ましいメニュー。 id, slug, name をこの順で受け入れる。|オプション}}
 +
{{Parameter|menu_class|文字列|メニューを構成する ul 要素に適用するCSS クラス名。|オプション|'menu'}}
 +
{{Parameter|menu_id|文字列|メニューを構成する ul 要素に適用するID。|オプション|'{メニューのスラッグ}-{連番}'}}
 +
{{Parameter|container|文字列|ul をラップするか、ラップする場合は何でラップするか。使えるタグは、 <tt>div</tt>、<tt>nav</tt>。コンテナをなしにする場合は <b>false</b>。例: <tt>'container' &#61;&gt; false</tt>|オプション|div}}
 +
{{Parameter|container_class|文字列|コンテナに適用されるクラス名|オプション|'menu-{メニューのスラッグ}-container'}}
 +
{{Parameter|container_id|文字列|コンテナに適用されるID|オプション}}
 +
{{Parameter|fallback_cb|文字列|メニューが存在しない場合にコールバック関数を呼び出す|オプション|wp_page_menu}}
 +
{{Parameter|before|文字列|リンクテキストの前のテキスト|オプション}}
 +
{{Parameter|after|文字列|リンクテキストの後のテキスト|オプション}}
 +
{{Parameter|link_before|文字列|リンクの前のテキスト|オプション}}
 +
{{Parameter|link_after|文字列|リンクの後のテキスト|オプション}}
 +
{{Parameter|echo|真偽値|メニューをHTML出力する(true)か、PHPの値で返す(false)か|オプション|true}}
 +
{{Parameter|depth|整数|何階層まで表示するか。0 は全階層。|オプション|0}}
 +
{{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>}}
 +
{{Parameter|theme_location|文字列|テーマの中で使われる位置。ユーザーが選択できるように [[関数リファレンス/register nav menu|register_nav_menu()]] で登録されている必要がある。|オプション}}
 +
{{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>}}
 +
 
 +
<div id="Examples">
 +
== 用例 ==
 +
</div>
 +
 
 +
<div id="Default_Examples">
 +
===デフォルトの用例===
 +
</div>
 +
 
 +
最初の空でないメニュー、または<tt>wp_page_menu()</tt>を表示します。
  
 
<pre><div class="access">
 
<pre><div class="access">
29行目: 90行目:
 
</div></pre>
 
</div></pre>
  
−
== Change log ==
+
<div id="Targeting_a_specific_Menu">
 +
===指定したメニューに絞り込む===
 +
</div>
 +
<pre><?php wp_nav_menu( array('menu' => 'Project Nav' )); ?></pre>
  
−
Since [[Version 3.0|3.0]]
+
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:
  
−
== Source file ==
+
<pre><?php
  
−
<tt>wp_nav_menu()</tt> is located in {{Trac|wp-includes/nav-menu-template.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
 +
  )
 +
);
  
−
== Related ==
+
?></pre>
  
−
{{原文|Function Reference/wp nav menu|84503}}<!-- 12:38, 20 March 2010 Bono 版 -->
+
<div id="Used_in_the_Twenty_Ten_theme">
 +
===Twenty Tenテーマで使用する===
 +
</div>
 +
 
 +
<pre>
 +
<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 -->
 +
</pre>
 +
<div id="Removing_the_Navigation_Container">
 +
===ナビゲーションコンテナを削除する===
 +
</div>
 +
ナビゲーションコンテナを削除するためには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>
 +
<?php
 +
function my_wp_nav_menu_args( $args = '' ) {
 +
$args['container'] = false;
 +
return $args;
 +
}
 +
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );
 +
?>
 +
</pre>
 +
 
 +
または
 +
 
 +
<pre>
 +
<?php wp_nav_menu( array( 'container' => '' ) ); ?>
 +
</pre>
 +
 
 +
<div id="Removing_the_ul_wrap">
 +
 
 +
=== ul を削除する===
 +
</div>
 +
アイテムを囲んでいる ul を削除します。
 +
 
 +
<pre>
 +
<?php wp_nav_menu( array( 'items_wrap' => '%3$s' ) ); ?>
 +
</pre>
 +
 
 +
<div id="Adding_a_Word_at_the_Beginning_of_the_Menu">
 +
 
 +
===メニューの先頭に単語を追加する===
 +
</div>
 +
好きな単語をリストアイテムとしてメニューの先頭に追加することができます。この例では、単語"Menu:"が先頭に追加されます。CSS スタイルを使用できるようにするリストアイテム (この例では"item-id") で id を設定することがあります。
 +
 
 +
<pre>
 +
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '<ul><li id="item-id">Menu: </li>%3$s</ul>' ) ); ?>
 +
</pre>
 +
 
 +
===条件付きクラスのメニュー項目を追加===
 +
カスタム クラスを指定する条件に基づいてメニュー項目を追加できます。条件を変更することを忘れないでください。
 +
 
 +
<pre>
 +
<?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;
 +
}
 +
?>
 +
</pre>
 +
 
 +
特定のメニュー項目の外観をカスタマイズしようとした場合:ブログのシングル投稿ページなど。ボディクラスの.singleを使うよりもとても簡単に上記のコードを使えば実現できます。
 +
 
 +
==== カスタムウォーカークラスを使用する ====
 +
 
 +
より深い条件つきのクラスについてはカスタムウォーカー機能を使用する必要があります。 (<tt>'walker' => new Your_Walker_Function</tt> 引数を作る).
 +
 
 +
ウォーカーの新しいクラスを作成する最も簡単な方法は<tt>\wp-includes\nav-menu-template.php</tt> のデフォルトクラス から(<code>[https://developer.wordpress.org/reference/classes/walker_nav_menu/ Walker_Nav_Menu]</code>) コピーして必要とするものをカスタマイズすることです。
 +
 
 +
===== 用例 =====
 +
この [http://shinraholdings.com/62/custom-nav-menu-walker-function/#example-code custom walker function]は、いくつかの条件つきのクラスをあなたのメニューに追加します。 (すなわちサブメニューや、メニューの奇数/偶数などにいくつかの条件付きのクラスを追加します):
 +
<code><pre>
 +
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 );
 +
}
 +
}
 +
</pre></code>
 +
 
 +
===ログインしているユーザに異なるメニューを表示する===
 +
 
 +
ログインしているユーザーとログインしていないユーザーで別のメニューを表示させる。
 +
 
 +
<pre>
 +
<?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' ) );
 +
}
 +
?>
 +
</pre>
 +
 
 +
=== メニュー項目用の親クラスを追加する方法 ===
 +
 
 +
メニュー項目にサブメニューがある場合、クラスを追加する必要がある場合があります。
 +
 
 +
<pre>
 +
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;   
 +
}
 +
</pre>
 +
 
 +
<strong>注:</strong> WordPress 3.7 から '''.menu-item-has-children''' for [[関数リファレンス/wp_nav_menu|wp_nav_menu]] , '''.page_item_has_children''' for [[関数リファレンス/wp_page_menu|wp_page_menu]] が、サブ項目を持っていることを示すために、メニューに追加されました。
 +
 
 +
== メニュー項目の CSSクラス ==
 +
 
 +
以下のクラスは、メニュー項目に適用されます。 例. wp_nav_menu():によって生成される<tt>&lt;li&gt;</tt> タグ
 +
 
 +
=== すべてのメニュー項目 ===
 +
 
 +
* '''.menu-item'''<br />このクラスは、すべてのメニュー項目に追加されます。
 +
* '''.menu-item-has-children'''<br/> このクラスは、サブ項目を持つメニュー項目に追加されます。
 +
* '''.menu-item-object-<tt>{object}</tt>'''<br />このクラスはあらゆるメニュー項目に追加されます。<tt>{object}</tt> は"post_type" または "taxonomy"のどちらかです。
 +
** '''.menu-item-object-category'''<br />このクラスは、カテゴリに対応するメニュー項目に追加されます。
 +
** '''.menu-item-object-tag'''<br />このクラスは、タグに対応するメニュー項目に追加されます。
 +
** '''.menu-item-object-page'''<br />このクラスは、固定ページに対応するメニュー項目に追加されます。
 +
** '''.menu-item-object-<tt>{custom}</tt>'''<br />このクラスは、カスタムポストタイプやカスタム分類に対応したメニュー項目に追加されます。
 +
* '''.menu-item-type-<tt>{type}</tt>'''<br />このクラスはあらゆるメニュー項目に追加されます。<tt>{type}</tt> は"post_type" または "taxonomy"のどちらかです。
 +
** '''.menu-item-type-post_type'''<br />このクラスはポストタイプに対応するメニュー項目に追加されます。: i.e. static pages or custom post types.
 +
** '''.menu-item-type-taxonomy'''<br />このクラスはカスタム分類に対応するメニュー項目に追加されます。: i.e. categories, tags, or custom taxonomies.
 +
 
 +
=== 現在のページのメニュー項目 ===
 +
 
 +
* '''.current-menu-item'''<br />このクラスは、現在表示されているページに対応するメニュー項目に追加されます。
 +
 
 +
=== 現在のページの親メニュー項目 ===
 +
 
 +
* '''.current-menu-parent'''<br />このクラスは、現在表示されているページの階層の親に対応するメニュー項目に追加されます。
 +
* '''.current-{object}-parent'''<br />このクラスは、現在表示されているオブジェクトの階層の親に対応するメニュー項目に追加されます。<tt>{object}</tt>の部分は、.menu-item-object-<tt>{object}</tt>に対応する値が出力されます。
 +
* '''.current-{type}-parent'''<br />このクラスは、現在表示されているタイプの階層の親に対応するメニュー項目に追加されます。 <tt>{type}</tt>の部分は、.menu-item-type-<tt>{type}</tt>に対応する値が出力されます。
 +
 
 +
=== 現在のページの先祖メニュー項目  ===
 +
 
 +
* '''.current-menu-ancestor'''<br />このクラスは、現在表示されているページの階層の先祖に対応するメニュー項目に追加されます。
 +
* '''.current-{object}-ancestor'''<br />このクラスは、現在表示されているオブジェクトの階層の先祖に対応するメニュー項目に追加されます。<tt>{object}</tt>の部分は、.menu-item-object-<tt>{object}</tt>に対応する値が出力されます。
 +
* '''.current-{type}-ancestor'''<br />このクラスは、現在表示されているタイプの階層の先祖に対応するメニュー項目に追加されます。<tt>{type}</tt>の部分は、.menu-item-object-<tt>{type}</tt>に対応する値が出力されます。
 +
 
 +
=== サイトのフロント ページのメニュー項目 ===
 +
 
 +
* '''.menu-item-home'''<br />このクラスは、サイトのフロント ページに対応するメニュー項目に追加されます。
 +
 
 +
=== <tt>wp_page_menu()</tt>の下位互換性 ===
 +
 
 +
次のクラスは wp_page_menu 関数の出力と一緒に下位互換性を維持するために追加されます。
 +
 
 +
* '''.page_item'''<br />このクラスは固定ページに対応するメニュー項目に追加されます。
 +
* '''.page_item_has_children'''<br />このクラスはサブページを持つメニュー項目に追加されます。
 +
* '''.page-item-<tt>$ID</tt>'''<br />$IDは固定ページのIDはであり、このクラスは固定ページに対応するメニュー項目を追加します。
 +
* '''.current_page_item'''<br />このクラスは現在表示されている固定ページに対応するメニュー項目に追加されます。
 +
* '''.current_page_parent'''<br />このクラスは現在表示されている固定ページの階層の親に対応するメニュー項目に追加されます。
 +
* '''.current_page_ancestor'''<br />このクラスは現在表示されている固定ページの階層の先祖に対応するメニュー項目に追加されます。
 +
 
 +
== 更新履歴 ==
 +
* [[Version_3.5|3.5.0]]: メニューに項目が登録されていない時は、マークアップを出力しないように
 +
*[[Version 3.0|3.0]] で導入
 +
 
 +
<div id="Source_File">
 +
 
 +
== ソースファイル ==
 +
</div>
 +
 
 +
<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">
 +
== 関連資料 ==
 +
* [[クラスリファレンス/Walker]]
 +
 
 +
{{Navigation Menu Tags}}
  
 
{{Tag Footer}}
 
{{Tag Footer}}
  
−
[[Category:Functions]]
+
{{原文|Function Reference/wp_nav_menu|152323}}<!-- 01:09, 18 June 2015‎ Samwilson  版 -->
−
[[Category:Template Tags]]
+
 
−
[[Category:New page created]]
+
{{DEFAULTSORT:Wp_nav_menu}}
 +
[[Category:wp3.0]]
 +
[[Category:wp3.5]]
  
 
[[en:Function Reference/wp_nav_menu]]
 
[[en:Function Reference/wp_nav_menu]]

2016年4月14日 (木) 17:06時点における最新版

タグ一覧： テンプレートタグ | インクルードタグ | 条件分岐タグ | その他の関数 | 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
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 にあります。

外部リソース


「http://wpdocs.osdn.jp/wiki/index.php?title=テンプレートタグ/wp_nav_menu&oldid=12331」から取得