wp_nav_menu()の使い方とカスタマイズ方法まとめ【WordPress】

WordPressでカスタムメニューを表示するために使われる関数が wp_nav_menu() です。

この記事では、基本的な使い方から応用的なカスタマイズ方法、注意点まで、開発者にも初心者にもわかりやすく解説します。

wp_nav_menu()とは？

wp_nav_menu() は、WordPressでナビゲーションメニュー（メインメニュー、フッターメニューなど）を表示するための関数です。

この関数を使うことで、管理画面で登録したメニューをテンプレート上に出力できます。

基本的な使い方

まず、functions.php にてメニューを登録しておく必要があります。

// functions.php に追記
function register_my_menus() {
    register_nav_menus(array(
        'main-menu' => 'メインメニュー',
        'footer-menu' => 'フッターメニュー'
    ));
}
add_action('after_setup_theme', 'register_my_menus');

次に、header.php などテンプレートに以下のコードを挿入します：

<?php
wp_nav_menu(array(
    'theme_location' => 'main-menu',
));
?>

これだけで、管理画面で作成した「メインメニュー」が表示されます。

よく使うパラメータ

パラメータ名	説明
`theme_location`	登録済みのメニュー名（`register_nav_menus()` で定義したキー）
`menu_class`	`<ul>` タグに追加されるクラス名
`container`	メニュー全体を囲うタグ（デフォルトは `div`）
`container_class`	コンテナに付与されるクラス名
`fallback_cb`	メニューが設定されていない場合に呼び出される関数（falseで非表示）
`depth`	メニュー階層の深さ（0は無制限）

例：HTMLクラスをカスタマイズ

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

出力されるHTMLの構造をCSSに合わせて柔軟に変更できます。

応用：メニューが設定されていない時の対処

メニューが未設定の場合、デフォルトで「ページ一覧」が出力されてしまうことがあります。それを防ぐには fallback_cb を無効にします。

<?php
wp_nav_menu(array(
    'theme_location' => 'main-menu',
    'fallback_cb'    => false
));
?>

出力されるHTML構造の例

<nav class="main-nav">
  <ul class="nav-list">
    <li class="menu-item"><a href="/">ホーム</a></li>
    <li class="menu-item"><a href="/about">会社概要</a></li>
    <li class="menu-item menu-item-has-children">
      <a href="/services">サービス</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="/services/web">Web制作</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSSで .menu-item-has-children や .sub-menu をスタイリングしてドロップダウンメニューにすることも可能です。

カスタムWalkerで完全制御したいとき

独自のHTML構造にしたい場合は「カスタムWalkerクラス」を作成して walker パラメータに指定できます。例：

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
    // 必要に応じてstart_elなどをオーバーライド
}

wp_nav_menu(array(
    'theme_location' => 'main-menu',
    'walker'         => new My_Walker_Nav_Menu()
));

これは上級者向けですが、出力HTMLを完全にコントロールできます。

よくあるエラーとその対処法

現象	原因	対策
メニューが表示されない	`theme_location` に対応するメニューが未登録	管理画面の「外観 → メニュー」で設定する
HTML構造が意図と違う	デフォルトのコンテナやクラスが影響している	`container` や `menu_class` で調整
サブメニューが表示されない	CSSやJSで非表示になっている場合が多い	`.sub-menu` を正しくスタイリングする