ナビゲーションメニュー（Navigation Menus）

メニューの登録

テーマの functions.php で、メニューを登録する必要があります。これにより、外観 -
メニュー に表示される名前が設定されます。

まず、register_nav_menus() を使用してメニューを登録します。

この例では、「管理場所」タブに「ヘッダーメニュー」と「エクストラメニュー」の2つの場所が追加されます。

function register_my_menus() {
  register_nav_menus(
   array(
   'header-menu' => __( 'Header Menu' ),
   'extra-menu' => __( 'Extra Menu' )
   )
   );
 }
 add_action( 'init', 'register_my_menus' );

メニューの表示

メニューを登録したら、wp_nav_menu() を使用して、テーマにどこに表示するかを指示する必要があります。たとえば、上記で登録したヘッダーメニューを表示するために、header.php ファイルに次のコードを追加します。

wp_nav_menu( array( 'theme_location' => 'header-menu' ) );

パラメーターの完全なリストは、関数リファレンスの wp_nav_menu() ページにあります。

表示したい追加のメニューについても、このプロセスを繰り返します。オプションで、CSS でメニューをスタイル設定できるコンテナクラスを追加できます。

wp_nav_menu(
  array(
   'theme_location' => 'extra-menu',
   'container_class' => 'my_extra_menu_class'
  )
);

CSS クラスの完全なリストは、関数リファレンスの wp_nav_menu() ページにあります。これを使用してメニューをスタイル設定できます。

追加コンテンツの表示

以下は、メニュー項目ラベルテキストの前後に span 要素を表示する、Twenty Seventeen フッターソーシャルメニューの簡略版です。

wp_nav_menu(
  array(
   'menu' => 'primary',
   'link_before' => '<span class="screen-reader-text">',
   'link_after' => '</span>',
  )
);

出力は次のように表示されます…

[html]

\u0026lt;div class=\u0026#34;menu-social-container\u0026#34;\u0026gt;

\u0026lt;ul id=\u0026#34;menu-social\u0026#34;\u0026gt;

\u0026lt;li id=\u0026#34;menu-item-1\u0026#34;\u0026gt;

\u0026lt;a href=\u0026#34;http://twitter.com/\\u0026#34;\\u0026gt;\\u0026lt;span class=\u0026#34;screen-reader-text\u0026#34;\u0026gt;Twitter\u0026lt;/span\u0026gt;

\u0026lt;/li\u0026gt;

\u0026lt;/ul\u0026gt;

\u0026lt;/div\u0026gt;

[/html]

各メニュー項目の <li> と <a> 要素の間にテキストを表示するには、before と after パラメーターを使用します。

コールバックの定義

デフォルトでは、指定されたメニューまたは場所が見つからない場合、WordPress は最初の非空メニューを表示するか、カスタムメニューが選択されていない場合はページメニューを生成します。これを防ぐには、theme_location と fallback_cb パラメーターを使用します。

wp_nav_menu(
  array(
   'menu' => 'primary',
   // 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
  )
);