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

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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(関連資料)
 
(7人の利用者による、間の31版が非表示)
1行目: 1行目:
{{NeedTrans}}
 
 
{{テンプレートタグガイド|クエリ}}<!-- 試験的に挿入 -->
 
{{テンプレートタグガイド|クエリ}}<!-- 試験的に挿入 -->
  
6行目: 5行目:
 
</div>
 
</div>
  
このタグは、ナビゲーションメニューを表示します。メニューは管理画面 [[管理パネル#Appearance|Appearance]] > [[Appearance Menus SubPanel|Menus]] で作成できます。<!-- 要確認 --~~~~ -->
+
このタグは、ナビゲーションメニューを表示します。メニューは [[管理画面]] > [[管理画面#Appearance|外観]] > [[管理画面/外観/メニュー|メニュー]] で作成できます。
  
<tt>theme_location</tt>パラメーターが与えられた時、このタグはロケーションに割り当てられたメニューを表示します。もしロケーションがない場合、またはメニューが割り当てられていない場合は表示されません。
+
<tt>theme_location</tt> パラメーターが与えられた時、このタグは <tt>theme_location</tt> が示す位置へ割り当てられたメニューを表示します。その位置がない、またはメニューが割り当てられていない場合は、<tt>fallback_cb</tt> パラメーターで与えられた関数を呼び出してメニューを表示します。
  
<tt>theme_location</tt>パラメーターが与えられなかった場合、このタグは以下を表示します。
+
<tt>theme_location</tt> パラメーターが与えられなかった場合、このタグは次の規則に従います。
  
* <tt>menu</tt>パラメーターの値が最低1つでもある場合、そのメニューに一致するID, slug, あるいは名前;
+
* <tt>menu</tt> パラメーターが与えられている場合、それ(ID、スラッグ、または名前)に一致するメニュー;
* さもなくば、最初の空でないメニュー;
+
* さもなくば、最初の空でないメニュー;
* さもなくば、<tt>fallback_cb</tt>パラメーターで与えられたタグの出力(デフォルトでは<tt>wp_page_menu()</tt>);
+
* さもなくば(ひとつもメニューが定義されていない場合)、<tt>fallback_cb</tt> パラメーターで与えられた関数を呼び出す(デフォルトでは <tt>wp_page_menu()</tt>);
* さもなくば、何も表示しない。
+
* さもなくば(<tt>fallback_cb</tt> が関数ではない)、何も表示しない。
  
'''Note:''' [[Version_3.5|WordPress 3.5]]に於いて、メニューアイテムがない場合は、HTMLマークアップはなにも出力されなくなりました。
+
''':''' [[Version_3.5|WordPress 3.5]] 以降、メニュー項目がない場合は、HTML マークアップはなにも出力されなくなりました。
<div id="Usage">
+
  
 +
<div id="Usage">
 
== 使い方 ==
 
== 使い方 ==
 
</div>
 
</div>
  
  <?php wp_nav_menu($args); ?>  
+
  <?php wp_nav_menu( $args ); ?>  
 +
 
 +
=== デフォルト値を明示した使い方 ===
  
 
<pre>
 
<pre>
 
<?php
 
<?php
 
 
$defaults = array(
 
$defaults = array(
'theme_location'  => '',
 
 
'menu'            => '',
 
'menu'            => '',
 +
'menu_class'      => 'menu',
 +
'menu_id'        => '{メニューのスラッグ}-{連番}',
 
'container'      => 'div',
 
'container'      => 'div',
'container_class' => '',
+
'container_class' => 'menu-{メニューのスラッグ}-container',
 
'container_id'    => '',
 
'container_id'    => '',
'menu_class'      => 'menu',
 
'menu_id'        => '',
 
'echo'            => true,
 
 
'fallback_cb'    => 'wp_page_menu',
 
'fallback_cb'    => 'wp_page_menu',
 
'before'          => '',
 
'before'          => '',
42行目: 40行目:
 
'link_before'    => '',
 
'link_before'    => '',
 
'link_after'      => '',
 
'link_after'      => '',
 +
'echo'            => true,
 +
'depth'          => 0,
 +
'walker'          => '',
 +
'theme_location'  => '',
 
'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
 
'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth'          => 0,
 
'walker'          => ''
 
 
);
 
);
 
 
wp_nav_menu( $defaults );
 
wp_nav_menu( $defaults );
 
 
?>
 
?>
 
</pre>
 
</pre>
57行目: 55行目:
 
</div>
 
</div>
  
{{Parameter|$theme_location|文字列|テーマの中で使われる位置。ユーザーが選択できるように [[Function Reference/register nav menu|register_nav_menu()]] で登録されている必要がある。|オプション}}
+
{{Parameter|$args|配列|パラメータを要素とする配列。|オプション|空の配列}}
{{Parameter|$menu|文字列|望ましいメニュー。 id, slug, name をこの順で受け入れる。|オプション}}
+
{{Parameter|$container|文字列|ul をラップするか、ラップする場合は何でラップするか。使えるタグは、 <tt>div</tt>、<tt>nav</tt>。コンテナをなしにする場合は <b>false</b>。例: <tt>'container' &#61;&gt; false</tt>|オプション|div}}
+
{{Parameter|$container_class|文字列|コンテナに適用されるクラス名|オプション|menu-{menu slug}-container}}
+
{{Parameter|$container_id|文字列|コンテナに適用されるID|オプション}}
+
{{Parameter|$menu_class|文字列|メニューを構成する ul 要素に適用するCSS クラス名。|オプション|menu}}
+
{{Parameter|$menu_id|文字列|メニューを構成する ul 要素に適用するID。|オプション|menu slug(順に増加)}}
+
{{Parameter|$echo|真偽値|メニューをHTML出力する(true)か、PHPの値で返す(false)か|オプション|true}}
+
{{Parameter|$fallback_cb|文字列|メニューが存在しない場合にコールバック関数を呼び出す|オプション|wp_page_menu}}
+
{{Parameter|$before|文字列|リンクテキストの前のテキスト|オプション}}
+
{{Parameter|$after|文字列|リンクテキストの後のテキスト|オプション}}
+
{{Parameter|$link_before|文字列|リンクの前のテキスト|オプション}}
+
{{Parameter|$link_after|文字列|リンクの後のテキスト|オプション}}
+
{{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>}}
+
{{Parameter|$depth|整数|何階層まで表示するか。0 は全階層。|オプション|0}}
+
{{Parameter|$walker|文字列|Custom walker to use|オプション}}
+
  
<div id="Examples">
+
配列には次のパラメーターを入れることができます。パラメーターの名前と値を配列のキー名と値にします。
  
 +
{{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>
82行目: 83行目:
 
===デフォルトの用例===
 
===デフォルトの用例===
 
</div>
 
</div>
 +
 +
最初の空でないメニュー、または<tt>wp_page_menu()</tt>を表示します。
  
 
<pre><div class="access">
 
<pre><div class="access">
91行目: 94行目:
 
</div>
 
</div>
 
<pre><?php wp_nav_menu( array('menu' => 'Project Nav' )); ?></pre>
 
<pre><?php wp_nav_menu( array('menu' => 'Project Nav' )); ?></pre>
 +
 +
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:
 +
 +
<pre><?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
 +
  )
 +
);
 +
 +
?></pre>
  
 
<div id="Used_in_the_Twenty_Ten_theme">
 
<div id="Used_in_the_Twenty_Ten_theme">
107行目: 126行目:
 
</pre>
 
</pre>
 
<div id="Removing_the_Navigation_Container">
 
<div id="Removing_the_Navigation_Container">
===Removing the Navigation Container===
+
===ナビゲーションコンテナを削除する===
 
</div>
 
</div>
In order to remove navigation container, theme location specified in functions.php and used among arguments in function wp_nav_menu ( eg. 'theme_location' => 'primary-menu' ) must have a menu assigned to it in administration! Otherwise argument 'container' => 'false' is ignored.
+
ナビゲーションコンテナを削除するためには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>
 
<pre>
 
<?php
 
<?php
120行目: 144行目:
 
</pre>
 
</pre>
  
OR
+
または
  
 
<pre>
 
<pre>
127行目: 151行目:
  
 
<div id="Removing_the_ul_wrap">
 
<div id="Removing_the_ul_wrap">
 +
 
=== ul を削除する===
 
=== ul を削除する===
 
</div>
 
</div>
160行目: 185行目:
 
</pre>
 
</pre>
  
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.
+
特定のメニュー項目の外観をカスタマイズしようとした場合:ブログのシングル投稿ページなど。ボディクラスの.singleを使うよりもとても簡単に上記のコードを使えば実現できます。
  
==== Using a Custom Walker Function ====
+
==== カスタムウォーカークラスを使用する ====
  
For deeper conditional classes, you'll need to use a custom walker function (created in the <tt>'walker' => new Your_Walker_Function</tt> argument).  
+
より深い条件つきのクラスについてはカスタムウォーカー機能を使用する必要があります。 (<tt>'walker' => new Your_Walker_Function</tt> 引数を作る).  
  
The easiest way to build a new walker function is to copy the default class (<code>[http://phpdoc.wordpress.org/trunk/WordPress/Nav_Menus/Walker_Nav_Menu.html Walker_Nav_Menu]</code>) from <tt>\wp-includes\nav-menu-template.php</tt> and simply customize what you need.
+
ウォーカーの新しいクラスを作成する最も簡単な方法は<tt>\wp-includes\nav-menu-template.php</tt> のデフォルトクラス から(<code>[https://developer.wordpress.org/reference/classes/walker_nav_menu/ Walker_Nav_Menu]</code>) コピーして必要とするものをカスタマイズすることです。
  
===== Example =====
+
===== 用例 =====
This [http://shinraholdings.com/62/custom-nav-menu-walker-function/#example-code custom walker function] will add several conditional classes to your nav menu (i.e. sub-menu, even/odd, etc):
+
この [http://shinraholdings.com/62/custom-nav-menu-walker-function/#example-code custom walker function]は、いくつかの条件つきのクラスをあなたのメニューに追加します。 (すなわちサブメニューや、メニューの奇数/偶数などにいくつかの条件付きのクラスを追加します):
 
<code><pre>
 
<code><pre>
 
class themeslug_walker_nav_menu extends Walker_Nav_Menu {
 
class themeslug_walker_nav_menu extends Walker_Nav_Menu {
233行目: 258行目:
 
</pre></code>
 
</pre></code>
  
===Different menus for logged-in users===
+
===ログインしているユーザに異なるメニューを表示する===
This example would cause a menu to show for logged-in users and a different menu for users not logged-in.
+
 
 +
ログインしているユーザーとログインしていないユーザーで別のメニューを表示させる。
  
 
<pre>
 
<pre>
246行目: 272行目:
 
</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>
271行目: 297行目:
 
</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|wp_nav_menu]] , '''.page_item_has_children''' for [[関数リファレンス/wp_page_menu|wp_page_menu]] が、サブ項目を持っていることを示すために、メニューに追加されました。
  
== Menu Item CSS Classes ==
+
== メニュー項目の CSSクラス ==
  
The following classes are applied to menu items, i.e. to the HTML <tt>&lt;li&gt;</tt> tags, generated by wp_nav_menu():
+
以下のクラスは、メニュー項目に適用されます。 例. wp_nav_menu():によって生成される<tt>&lt;li&gt;</tt> タグ
  
=== All Menu Items ===
+
=== すべてのメニュー項目 ===
  
* '''.menu-item'''<br />This class is added to every menu item.
+
* '''.menu-item'''<br />このクラスは、すべてのメニュー項目に追加されます。
* '''.menu-item-has-children'''<br/> This class is added to menu item which has sub-items .
+
* '''.menu-item-has-children'''<br/> このクラスは、サブ項目を持つメニュー項目に追加されます。
* '''.menu-item-object-<tt>{object}</tt>'''<br />This class is added to every menu item, where <tt>{object}</tt> is either a post type or a taxonomy.
+
* '''.menu-item-object-<tt>{object}</tt>'''<br />このクラスはあらゆるメニュー項目に追加されます。<tt>{object}</tt> は"post_type" または "taxonomy"のどちらかです。
** '''.menu-item-object-category'''<br />This class is added to menu items that correspond to a category.
+
** '''.menu-item-object-category'''<br />このクラスは、カテゴリに対応するメニュー項目に追加されます。
** '''.menu-item-object-tag'''<br />This class is added to menu items that correspond to a tag.
+
** '''.menu-item-object-tag'''<br />このクラスは、タグに対応するメニュー項目に追加されます。
** '''.menu-item-object-page'''<br />This class is added to menu items that correspond to static pages.
+
** '''.menu-item-object-page'''<br />このクラスは、固定ページに対応するメニュー項目に追加されます。
** '''.menu-item-object-<tt>{custom}</tt>'''<br />This class is added to menu items that correspond to a custom post type or a custom taxonomy.
+
** '''.menu-item-object-<tt>{custom}</tt>'''<br />このクラスは、カスタムポストタイプやカスタム分類に対応したメニュー項目に追加されます。
* '''.menu-item-type-<tt>{type}</tt>'''<br />This class is added to every menu item, where <tt>{type}</tt> is either "post_type" or "taxonomy".
+
* '''.menu-item-type-<tt>{type}</tt>'''<br />このクラスはあらゆるメニュー項目に追加されます。<tt>{type}</tt> "post_type" または "taxonomy"のどちらかです。
** '''.menu-item-type-post_type'''<br />This class is added to menu items that correspond to post types: i.e. static pages or custom post types.
+
** '''.menu-item-type-post_type'''<br />このクラスはポストタイプに対応するメニュー項目に追加されます。: i.e. static pages or custom post types.
** '''.menu-item-type-taxonomy'''<br />This class is added to menu items that correspond to taxonomies: i.e. categories, tags, or custom taxonomies.
+
** '''.menu-item-type-taxonomy'''<br />このクラスはカスタム分類に対応するメニュー項目に追加されます。: i.e. categories, tags, or custom taxonomies.
  
=== Current-Page Menu Items ===
+
=== 現在のページのメニュー項目 ===
  
* '''.current-menu-item'''<br />This class is added to menu items that correspond to the currently rendered page.
+
* '''.current-menu-item'''<br />このクラスは、現在表示されているページに対応するメニュー項目に追加されます。
  
=== Current-Page Parent Menu Items ===
+
=== 現在のページの親メニュー項目 ===
  
* '''.current-menu-parent'''<br />This class is added to menu items that correspond to the hierarchical parent of the currently rendered page.
+
* '''.current-menu-parent'''<br />このクラスは、現在表示されているページの階層の親に対応するメニュー項目に追加されます。
* '''.current-{object}-parent'''<br />This class is added to menu items that correspond to the hierachical parent of the currently rendered object, where <tt>{object}</tt> corresponds to the the value used for .menu-item-object-<tt>{object}</tt>.
+
* '''.current-{object}-parent'''<br />このクラスは、現在表示されているオブジェクトの階層の親に対応するメニュー項目に追加されます。<tt>{object}</tt>の部分は、.menu-item-object-<tt>{object}</tt>に対応する値が出力されます。
* '''.current-{type}-parent'''<br />This class is added to menu items that correspond to the hierachical parent of the currently rendered type, where <tt>{type}</tt> corresponds to the the value used for .menu-item-type-<tt>{type}</tt>.
+
* '''.current-{type}-parent'''<br />このクラスは、現在表示されているタイプの階層の親に対応するメニュー項目に追加されます。 <tt>{type}</tt>の部分は、.menu-item-type-<tt>{type}</tt>に対応する値が出力されます。
  
=== Current-Page Ancestor Menu Items ===
+
=== 現在のページの先祖メニュー項目  ===
  
* '''.current-menu-ancestor'''<br />This class is added to menu items that correspond to a hierarchical ancestor of the currently rendered page.
+
* '''.current-menu-ancestor'''<br />このクラスは、現在表示されているページの階層の先祖に対応するメニュー項目に追加されます。
* '''.current-{object}-ancestor'''<br />This class is added to menu items that correspond to a hierachical ancestor of the currently rendered object, where <tt>{object}</tt> corresponds to the the value used for .menu-item-object-<tt>{object}</tt>.
+
* '''.current-{object}-ancestor'''<br />このクラスは、現在表示されているオブジェクトの階層の先祖に対応するメニュー項目に追加されます。<tt>{object}</tt>の部分は、.menu-item-object-<tt>{object}</tt>に対応する値が出力されます。
* '''.current-{type}-ancestor'''<br />This class is added to menu items that correspond to a hierachical ancestor of the currently rendered type, where <tt>{type}</tt> corresponds to the the value used for .menu-item-type-<tt>{type}</tt>.
+
* '''.current-{type}-ancestor'''<br />このクラスは、現在表示されているタイプの階層の先祖に対応するメニュー項目に追加されます。<tt>{type}</tt>の部分は、.menu-item-object-<tt>{type}</tt>に対応する値が出力されます。
  
=== Site Front Page Menu Items ===
+
=== サイトのフロント ページのメニュー項目 ===
  
* '''.menu-item-home'''<br />This class is added to menu items that correspond to the site front page.
+
* '''.menu-item-home'''<br />このクラスは、サイトのフロント ページに対応するメニュー項目に追加されます。
  
=== Backward Compatibility with <tt>wp_page_menu()</tt> ===
+
=== <tt>wp_page_menu()</tt>の下位互換性 ===
  
The following classes are added to maintain backward compatibility with the [[Function Reference/wp_page_menu|wp_page_menu()]] function output:
+
次のクラスは wp_page_menu 関数の出力と一緒に下位互換性を維持するために追加されます。
 
+
* '''.page_item'''<br />This class is added to menu items that correspond to a static page.
+
* '''.page_item_has_children'''<br />This class is added to menu items that have sub pages to it.
+
* '''.page-item-<tt>$ID</tt>'''<br />This class is added to menu items that correspond to a static page, where <tt>$ID</tt> is the static page ID.
+
* '''.current_page_item'''<br />This class is added to menu items that correspond to the currently rendered static page.
+
* '''.current_page_parent'''<br />This class is added to menu items that correspond to the hierarchical parent of the currently rendered static page.
+
* '''.current_page_ancestor'''<br />This class is added to menu items that correspond to a hierarchical ancestor of the currently rendered static page.
+
  
 +
* '''.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]]: If a menu has no items, don't output any markup.
+
* [[Version_3.5|3.5.0]]: メニューに項目が登録されていない時は、マークアップを出力しないように
 
*[[Version 3.0|3.0]] で導入
 
*[[Version 3.0|3.0]] で導入
  
332行目: 357行目:
  
 
<tt>wp_nav_menu()</tt> は {{Trac|wp-includes/nav-menu-template.php}} にあります。
 
<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">
 
<div id="Related">
 
== 関連資料 ==
 
== 関連資料 ==
</div>
+
* [[クラスリファレンス/Walker]]
* [http://www.nkuttler.de/2010/06/08/wp_nav_menu-wordpress-3-0/ How to add navigation menus to existing themes and preserve backward compatibility]
+
 
 +
{{Navigation Menu Tags}}
  
{{原文|Function Reference/wp_nav_menu|143567}}<!-- 12:55, 13 May 2014 Menzow 版 -->
 
 
{{Tag Footer}}
 
{{Tag Footer}}
 +
 +
{{原文|Function Reference/wp_nav_menu|152323}}<!-- 01:09, 18 June 2015‎ Samwilson  版 -->
  
 
{{DEFAULTSORT:Wp_nav_menu}}
 
{{DEFAULTSORT:Wp_nav_menu}}
[[Category:テンプレートタグ]]
 
 
[[Category:wp3.0]]
 
[[Category:wp3.0]]
 +
[[Category:wp3.5]]
  
 
[[en:Function Reference/wp_nav_menu]]
 
[[en:Function Reference/wp_nav_menu]]

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

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

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 にあります。

外部リソース