ナビゲーションメニュー

2020.04.06 2020.04.06

TOPICS

翻訳元記事はこちらです。

ナビゲーションメニューは、テーマ内でカスタマイズ可能なメニューです。これにより、ユーザーはページ、投稿、カテゴリ、URLをメニューに追加することができます。ナビゲーションメニューを作成するには、それを登録し、テーマ内の適切な場所にメニューを表示する必要があります。

メニューの登録

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

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

この例では、”メニューの位置 “に2つの位置を追加しています。
「Header Menu」と「Extra Menu」です。

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ファイルに追加して、上で登録したheader-menuを表示させます。

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() ページにあります。これらを使ってメニューのスタイルを整えることができます。

追加のコンテンツの表示

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

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

上記のコードは以下のように出力されます。

<div class="menu-social-container">
  <ul id="menu-social">
    <li id="menu-item-1">
      <a href="http://twitter.com/"><span class="screen-reader-text">Twitter</span>
    </li>
  </ul>
</div>

各メニュー項目の<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
  )
);