wp_nav_menu()でカスタムナビゲーションを実装する方法【WordPress】

wp_nav_menu()でメニューをテーマに表示する
事前準備：メニューをテーマに登録する
基本の使い方：テンプレートファイルに出力する
出力されるHTMLの構造
よく使う応用パターン
躓きやすいポイント
まとめ

wp_nav_menu()でメニューをテーマに表示する

WordPressのテーマを自作・カスタマイズしていると、「管理画面で設定したメニューをテーマに表示したい」という場面が必ずきます。

そのときに使うのがwp_nav_menu()です。この関数を使えば、管理画面の「外観 → メニュー」で設定した内容をそのままテーマに出力できます。この記事では基本の使い方からよく使うパラメータまで、実装コード付きで紹介します。

事前準備：メニューをテーマに登録する

wp_nav_menu()を使う前に、まずfunctions.phpでメニューの「場所」を登録する必要があります。

// functions.php
function my_register_menus() {
    register_nav_menus( array(
        'header-menu' => 'ヘッダーナビゲーション',
        'footer-menu' => 'フッターナビゲーション',
    ) );
}
add_action( 'after_setup_theme', 'my_register_menus' );

各パラメータの解説

register_nav_menus()：複数のメニュー位置をまとめて登録できる関数
配列のキー（header-menuなど）：テーマ内で参照するスラッグ
配列の値（'ヘッダーナビゲーション'など）：管理画面に表示される名前

登録後は管理画面の「外観 → メニュー」を開くと、「メニューの位置」にこの名前が表示されます。

当サイトの管理画面はこんな感じです。メニューに必要なリンクを追加して、CSS側で表示を整えていくイメージです。

基本の使い方：テンプレートファイルに出力する

メニューを表示したいテンプレートファイル（header.phpなど）に以下を書きます。

<?php
wp_nav_menu( array(
    'theme_location' => 'header-menu', // functions.phpで登録したスラッグ
    'menu_class'     => 'nav-list',    // ulタグに付くクラス名
    'container'      => 'nav',         // ulを囲むタグ（falseで非表示）
    'container_class'=> 'nav-wrap',    // 囲むタグに付くクラス名
) );
?>

各パラメータの解説

パラメータ	内容
theme_location	functions.phpで登録したスラッグを指定
menu_class	出力される`<ul>`タグのクラス名
container	`<ul>`を囲むHTMLタグ（`nav`・`div`など。`false`で囲まない）
container_class	囲むタグのクラス名
depth	階層の深さ（`1`でドロップダウンなし）
fallback_cb	メニュー未設定時の代替処理（`false`で何も出力しない）

出力されるHTMLの構造

上のコードを実行すると、以下のようなHTMLが出力されます。

<nav class="nav-wrap">
  <ul class="nav-list">
    <li class="menu-item"><a href="#">ホーム</a></li>
    <li class="menu-item"><a href="#">ブログ</a></li>
    <li class="menu-item"><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

あとはCSSでスタイルを当てるだけです。クラス名はmenu_class・container_classで自由に変えられるので、既存のCSSに合わせて調整してください。

よく使う応用パターン

メニュー未設定のときに何も出力しない

wp_nav_menu( array(
    'theme_location' => 'header-menu',
    'fallback_cb'    => false, // メニュー未設定時に何も出力しない
) );

デフォルトでは、メニューが設定されていないと全ページのリストが出力されてしまいます。fallback_cb => falseを指定しておくのがおすすめです。

現在のページにactiveクラスを付ける

WordPressは現在表示中のページのメニュー項目に自動でcurrent-menu-itemクラスを付けてくれます。これをCSSで装飾するだけで「今どこにいるか」を示すナビゲーションが作れます。

.nav-list .current-menu-item > a {
    color: #00a8e8;
    font-weight: bold;
}

get_template_part()でテンプレートを分割管理する方法【WordPress】

こんにちは！コーダーのゆうしです。WordPressのテーマ制作をしていると「ヘッダーやフッター以外にも共通パーツをファ…

header.phpをパーツ化して使いまわすのが基本的な使い方かと思います。

躓きやすいポイント

メニューが表示されない 管理画面の「外観 → メニュー」で、作成したメニューに「メニューの位置」を割り当てているか確認してください。register_nav_menus()で登録しただけでは表示されません。メニューを作成して、位置を紐付ける作業が必要です。

container => falseにしたのに余分なタグが出る containerをfalseにすると<div>や<nav>の囲みタグは消えますが、<ul>と<li>は残ります。HTMLの構造ごと変えたい場合はitems_wrapパラメータやウォーカーのカスタマイズが必要になります。

子テーマでfunctions.phpを編集しているか 親テーマのfunctions.phpを直接編集すると、テーマ更新時に上書きされてしまいます。必ず子テーマのfunctions.phpに書くようにしましょう。