wp_nav_menu():テーマで決めた場所にメニューを出す(WordPress)

WordPress

「外観 → メニュー」で作ったメニューを、テーマで決めた場所(メニューの位置)に出します。場所は register_nav_menus() で決めておき、どのメニューをどこに出すかは管理画面で選びます。

書き方

wp_nav_menu( array $args = array() ): void|string|false
  • theme_location:出す場所の名前(register_nav_menus() で決めたもの)です。
  • container(省略できる):外側を囲むタグです。既定は 'div'。'nav' にもでき、false にすると囲まずに <ul> だけを出します。
  • container_class・menu_class(省略できる):外側のタグと <ul> に付ける class です。menu_class の既定は 'menu' です。
  • depth(省略できる):何段目まで出すかです。1 で 1 段目だけ、0(既定)ですべて。
  • fallback_cb(省略できる):場所にメニューが割り当てられていないときに呼ぶ関数です。既定は 'wp_page_menu'(固定ページの一覧を出す)で、false にすると何も出しません。
  • echo(省略できる):false にすると、出さずに HTML を返します。

使い方の例

functions.php で場所を決め、テーマのテンプレートで出します。

// functions.php:メニューの場所を決める
add_action( 'after_setup_theme', function () {
    register_nav_menus( array(
        'global-menu' => 'グローバルメニュー',
        'footer-menu' => 'フッターメニュー',
    ) );
} );

// footer.php:フッターの場所のメニューを出す
wp_nav_menu( array(
    'theme_location'  => 'footer-menu',
    'container'       => 'nav',
    'container_class' => 'footer-nav',
    'menu_class'      => 'footer-nav__list',
    'depth'           => 1,
    'fallback_cb'     => false,
) );

作業環境で出すと、次のような HTML になりました(URL は例・プラグインが足した属性は省いています)。

<nav class="footer-nav"><ul id="menu-footer" class="footer-nav__list"><li id="menu-item-1145" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1145"><a href="https://example.com/tokushoho">特定商取引法に基づく表記</a></li>
<li id="menu-item-1144" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1144"><a href="https://example.com/contact">お問い合わせ</a></li>
</ul></nav>

よくある間違い

  • 場所にメニューを割り当てていない:fallback_cb が既定のままだと、固定ページの一覧が <div class="menu"> で出ます。出したくないときは 'fallback_cb' => false にするか、has_nav_menu() で割り当てがあるかを先に調べます。作業環境で、割り当てのない場所を 'fallback_cb' => false と 'echo' => false で呼ぶと、false が返りました。
  • echo を false にしないで変数に受け取る:既定ではその場で出力されるので、変数に受け取りたいときは 'echo' => false にします。
  • container の既定が div であることを忘れる:CSS で nav を当てているのに div で出ている、ということがあります。囲みのタグは container で決めます。
  • スマホで出ない場所に大事なリンクだけを置く:テーマによっては、スマホの幅でグローバルメニューを CSS で隠しています。大事なリンクは、フッターのメニューなど、スマホでも出る場所にも置きます。

関連する関数

  • register_nav_menus():メニューの場所を決める
  • has_nav_menu():場所にメニューが割り当てられているかを調べる
  • wp_get_nav_menu_items():メニューの項目を配列で取る
  • get_nav_menu_locations():場所ごとに割り当てられたメニューの ID を取る

逆引きリファレンスの一覧へ