wp_nav_menuでナビゲーションを表示する方法。基本〜カスタマイズまで解説。

WordPressでは、外観 > メニューでヘッダーやフッター等のナビゲーションを登録できますよね。これらを表示する時に使うのが、WordPressのテンプレートタグ「wp_nav_menu()」です。

当記事では、この関数の基本的な使い方〜カスタマイズ方法までご紹介します。記事の最後には、wp_nav_menu()の汎用性の高いパラメータを指定したテンプレを用意してますので、ぜひ参考にしてください。

ナビゲーションメニューの基本的な設定方法を知りたい方は以下をご覧ください。

2017.01.01

2021.03.31

WordPressのナビゲーションメニューの設定方法

2021/3/31 情報を更新いたしました。 WordPressサイトのヘッダーやフッターのメニュー項目は、管理画面から設定できます。例えば、当サイトのグローバルメニューもナビゲーションメニュー機能で作成しています。当記事では、ナビゲーションメニューの設定方法について解説します。 ...

wp_nav_menu()とは?

外観 > メニューで設定されたナビゲーションメニューをHTML形式で取得・出力できるWordPressのテンプレートタグです。

公式ページ：WordPress Developer Resources | Function | wp_nav_menu

この関数1つでナビゲーションメニューをもとに以下のようなHTMLを自動で作成してくれるので、非常に便利です。また、引数には多くのパラメータが用意されており、その値を変えるだけで様々なカスタマイズが可能となっています。

<div class="menu-【メニュー名】-container">
  <ul id="menu-【メニュー名】" class="menu">
    <li id="menu-item-【メニュー項目ID】" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-【メニュー項目ID】">
      <a href="#">ナビゲーションラベル</a>
    </li>
    ︙
  </ul>
</div>

wp_nav_menu()の基本的な使い方

それではナビゲーションメニューを表示するまでの基本的な流れを試してみましょう。今回は、外観 > メニューの下部に存在する「メニューの位置」にチェックを入れたナビゲーションをサイト上に表示していきたいと思います。

外観 > メニューの「メニューの位置」の場所

WordPressテーマで基本とされる動きですね。この機能は以下の2ステップで実装できます。

「メニューの位置」を新規登録
サイト上にナビゲーションを出力

「メニューの位置」を新規登録

まずは「メニューの位置」に新しく項目を登録します。これにはregister_nav_menus()を使います。

公式ページ：WordPress Developer Resources | Function | register_nav_menus

functions.phpに以下を記述して、管理画面の外観 > メニューをご覧ください。

add_action( 'after_setup_theme', function(){
  register_nav_menus( array(
  // 例 'メニューの位置を示す固有名称' => 'このメニューの位置の名称'
  'global-nav' => 'グローバルメニュー',
  ) );
} );

グローバルメニューのチェックボックスが表示されているはずです。

複数追加したい時は、引数の配列の中身を増やすことで対応できます。以下は、グローバルメニューとフッターメニュー、ドロワーメニューの3つを登録する場合の書き方です。

add_action( 'after_setup_theme', function(){
  register_nav_menus( array(
  // 例 'メニューの位置を示す固有名称' => 'このメニューの位置の名称'
  'global-nav' => 'グローバルメニュー',
  'footer-nav' => 'フッターメニュー',
  'drawer-nav' => 'ドロワーメニュー'
  ) );
} );

サイト上にナビゲーションを出力

次は、wp_nav_menu()を使って、先程登録した「global-nav」をサイト上に表示していきます。今回は「メニューの位置」の中からどれを利用するか指定できる「theme_location」だけを設定していきます。

以下の記述をheader.phpなどに記述してみて、ご確認ください。

<?php wp_nav_menu( array( 'theme_location' => 'global-nav' ) ); ?>

サイト上に外観 > メニューの「グローバルメニュー」に指定されたナビゲーションが表示されればOKです。

wp_nav_menu()のカスタマイズ

wp_nav_menu()では、引数に様々なパラメータを指定できます。以下は指定できるすべてのパラメータと初期値です。

wp_nav_menu( array(
  'menu' => '',
  'menu_class' => 'menu',
  'menu_id' => '',
  'container' => 'div',
  'container_class' => '',
  'container_id' => '',
  'container_aria_label' => '',
  'fallback_cb' => 'wp_page_menu',
  'before' => '',
  'after' => '',
  'link_before' => '',
  'link_after' => '',
  'echo' => true,
  'depth' => 0,
  'walker' => '',
  'theme_location' => '',
  'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
  'item_spacing' => 'preserve'
) );

wp_nav_menu()を使うときは、すべてのパラメータを記載する必要はありません。省略した場合は初期値が反映されますので、変更したい箇所だけ記載してあげればOKです。

以下に各パラメータについて表形式で解説してますので、ぜひ参考にしてください。

menu	メニュー名やIDを指定（オブジェクトも可）上記に基づいたナビゲーションメニューを表示
menu_class	ナビゲーションのulのクラス名を指定例）’p-global-nav’を指定すると<ul class=”p-global-nav”>
menu_id	ナビゲーションのulのid名を指定例）’js-global-nav’を指定すると<ul id=”js-global-nav”>
container	ul要素を囲むHTML要素の名称を指定例）’nav’を指定すると<nav></nav>でulを囲む
container_class	containerで指定したHTML要素のclass名を指定例）’p-global-nav-container’を指定すると<div class=”p-global-nav-container”>
container_id	containerで指定したHTML要素のid名を指定例）’js-global-nav-container’を指定すると<div id=”js-global-nav-container”>
container_aria_label	containerで’nav’を指定した場合にaria-label属性を指定例）’global menu’を指定すると<nav aria-label=”global menu”>
fallback_cb	メニューが存在しな時に実行される関数名を指定初期値のままだと固定ページの名称が一覧で表示されるため、何も表示したくない方はfalseを指定
before	リンク（aタグ）の前に任意の要素を挿入可能例）'<span class=”before”></span>’を指定すると<span class=”before”></span><a href=””>
after	リンク（aタグ）の後に任意の要素を挿入可能例）'<span class=”after”></span>’を指定すると</a><span class=”after”></span>
link_before	リンクテキスト（aタグ内の文字列）の前に任意の要素を挿入可能例）'<span class=”before”></span>’を指定すると<a href=””><span class=”before”></span>リンクテキスト</a>
link_after	リンクテキスト（aタグ内の文字列）の後に任意の要素を挿入可能例）'<span class=”after”></span>’を指定すると<a href=””>リンクテキスト<span class=”after”></span></a>
echo	ナビゲーションのHTMLを出力するかどうか出力するならtrue、変数に格納するならfalse
depth	指定した数値までナビゲーションの階層を制限する（0の場合は全階層表示）例）2を指定すると、2階層までのナビゲーションを表示
walker	任意のwalkerクラス名を指定してWalker_Nav_Menuを拡張できる HTML構造をかなり柔軟にカスタマイズできるが自分でカスタムウォーカークラスを定義する必要アリ
theme_location	メニューの位置を指定して特定のナビゲーションを表示冒頭で解説したオプション
items_wrap	各メニュー項目を囲むulを変更可能 %1$s：menu_id、%2$s：menu_class、%3$s：メニュー項目
item_spacing	HTMLタグを改行させるかどうか改行させたくなければ’discard‘と入力

まとめ

wp_nav_menu()を使ってナビゲーションメニューを表示する方法について解説しました。パラメータが豊富に用意されているので、ちょっとしたカスタマイズであれば、すぐに対応できるのが非常に魅力的です。

以下は、汎用性を考えてパラメータを指定したwp_nav_menuのテンプレになります。基本的なテーマ開発であれば、以下で対応できると思いますので、ぜひ使いまわしてください。

wp_nav_menu( array(
  'menu_class' => 'ulのclass名',
  'container' => 'nav',
  'container_class' => 'navのclass名',
  'fallback_cb' => false,
  'echo' => true, // 変数に格納するならfalse
  'depth' => 0, // 　x階層まで制限するなら数値を入力
  'theme_location' => '登録したメニューの位置',
) );