wp_nav_menu()

wp_nav_menu()とは？

wp_nav_menu() は、WordPress でカスタムメニュー（ナビゲーションメニュー）を表示するためのテンプレートタグです。テーマ開発やカスタマイズの現場では非常に頻繁に使われる関数で、柔軟なメニュー表示を実現できます。

wp_nav_menu()の基本構文

<?php
wp_nav_menu( array $args = array() );
?>

$args は連想配列形式でさまざまなパラメータを指定できます。主なパラメータは以下の通りです。

wp_nav_menu()の実際の使用例

<?php
wp_nav_menu( array(
    'theme_location' => 'header-menu',
    'container'      => 'nav',
    'container_class'=> 'main-nav',
    'menu_class'     => 'menu',
    'fallback_cb'    => false,
) );
?>

このコードは、functions.php にて register_nav_menus() で登録した 'header-menu' ロケーションに紐づいたメニューを <nav> タグで囲み、クラス名 main-nav を付けて表示します。

メニューの登録

wp_nav_menu() を使うには、まずメニューのロケーションを functions.php にて登録する必要があります。

function register_my_menus() {
    register_nav_menus( array(
        'header-menu' => 'ヘッダーメニュー',
        'footer-menu' => 'フッターメニュー'
    ) );
}
add_action( 'init', 'register_my_menus' );

このように登録したロケーション名が theme_location に指定できるようになります。

メニューの管理（管理画面）

管理画面の「外観」→「メニュー」から、メニューの作成とロケーションの割り当てができます。ここで作成したメニューが、wp_nav_menu() によってフロントエンドに出力されます。

HTML構造とカスタマイズ

基本的な出力例は以下のような構造になります。

<nav class="main-nav">
  <ul class="menu">
    <li class="menu-item"><a href="/">HOME</a></li>
    <li class="menu-item"><a href="/about">ABOUT</a></li>
  </ul>
</nav>

HTML構造は、container、menu_class、menu_id などで制御可能です。

fallback_cb の使い方

メニューが設定されていない場合に、代替出力を表示したいときに使うのが fallback_cb です。

'fallback_cb' => 'wp_page_menu'

これにより、固定ページのリストが代わりに表示されます。出力を完全に抑制したい場合は false を指定します。

'fallback_cb' => false

depth パラメータ

多階層のメニューで、どこまで階層を出力するかを制御できます。

• 0（デフォルト）: すべての階層を表示
• 1: 第一階層のみ
• 2: 第二階層まで　など

Walker クラスによるカスタマイズ

HTML出力をさらに細かくカスタマイズしたい場合は、独自の Walker_Nav_Menu クラスを作成します。

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $output .= '<li class="my-custom-class">';
        $output .= '<a href="' . esc_attr( $item->url ) . '">' . esc_html( $item->title ) . '</a>';
    }
}

そして wp_nav_menu() に以下のように指定します。

'walker' => new My_Walker_Nav_Menu()

複数メニューの表示

テーマ内でヘッダーとフッターなど複数のメニューを設置したい場合、それぞれ theme_location を分けて設定することで可能です。

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
<?php wp_nav_menu( array( 'theme_location' => 'footer-menu' ) ); ?>

wp_nav_menu()のよくあるトラブルと対処法

1. メニューが表示されない

• theme_location が間違っている
• メニューが管理画面で紐づけされていない
• fallback_cb が false で何も表示されない

2. クラスがつかない

• menu_class、container_class の設定ミス
• walker クラスで出力が上書きされている

HTML5 に対応した記述例

<nav id="site-navigation" class="main-navigation" role="navigation">
    <?php
    wp_nav_menu( array(
        'theme_location' => 'primary',
        'menu_class'     => 'primary-menu',
        'container'      => false,
    ) );
    ?>
</nav>

HTML5 に準拠したマークアップを意識することで、SEO やアクセシビリティの観点からも有利になります。

wp_nav_menu()のまとめ

wp_nav_menu() は WordPress におけるナビゲーションメニュー出力の標準関数であり、テーマやプラグインにおける重要な構成要素です。基本的な引数の指定から、カスタムWalkerクラスによる出力の制御まで、非常に高い柔軟性を持っています。

テーマ開発者はもちろん、サイト制作者もこの関数を理解し使いこなすことで、よりユーザーフレンドリーでデザイン性の高いサイト制作が可能になります。