WordPress Logo WordPress ナビゲーションメニュー（カスタムメニュー）

柔軟なメニューの出力を可能にする WordPress のナビゲーションメニュー（カスタムメニュー）機能について。register_nav_menus() を使った登録方法や wp_nav_menu() を使ったメニューの出力方法、管理画面でのメニューの作成方法などについて。

更新日：2022年03月13日

作成日：2019年03月31日

ナビゲーションメニューの登録（有効化）

作成するテーマでナビゲーションメニュー機能を使えるようにするには、register_nav_menu() または register_nav_menus() を使ってナビゲーションメニューを登録します。

register_nav_menu() と register_nav_menus() の違いは、前者はメニューを１つ（ずつ）登録するのに対し後者は一度に複数のメニューを登録することができることです。関数名の最後の menu の部分が単数形か複数形で異なります。

register_nav_menu() または register_nav_menus() を functions.php に記述してナビゲーションメニューを登録します。

//１つのメニューを登録する場合
register_nav_menu( 'main-menu','Main Menu');

//複数のメニューを登録する場合
register_nav_menus( array(
  'global' => 'Global Menu',
  'footer-menu'  => 'Footer Menu',
) );

以下は register_nav_menu() 及び register_nav_menus() の詳細です。

register_nav_menu

ナビゲーションメニューを１つ登録・有効化する関数です。

アクションフックに登録しなくても動作しますが、通常は after_setup_theme アクションフックのタイミングで実行するようにします。

この関数は内部で add_theme_support( 'menus' ) を実行してメニュー機能を有効化しているので、add_theme_support() を別途実行する必要はありません。

register_nav_menu( $location, $description )

パラメータ
  • $location（文字列）：（必須）「メニューの位置」の識別子を半角英数字で指定。
    「メニューの位置」はメニューを作成する際の管理画面での設定項目です。
    また、メニューを表示する関数 wp_nav_menu() の引数のキー 'theme_location' に指定する値にもなります。
  • $description（文字列）：（必須）メニューの説明のための文字列（日本語可）。
    管理画面「外観」→「メニュー」での「メニューの位置」に表示される名前（説明）の文字列。（メニュー作成後に表示されます）
戻り値
なし

以下がこの関数の定義（ソース）ですが、register_nav_menus() に1つの引数を指定して実行しているだけです。

//register_nav_menu() のソース（定義）
function register_nav_menu( $location, $description ) {
  register_nav_menus( array( $location => $description ) );
}

つまり、以下の２つは同じことです。

register_nav_menu( 'main-menu','Main Menu');

register_nav_menus( array('main-menu' => 'Main Menu') );

また、以下の２つも同じことです。

function register_my_menu() {
  register_nav_menu( 'main-menu','Main Menu');
  register_nav_menu( 'footer-menu','Footer Menu');
}
add_action( 'after_setup_theme', 'register_my_menu' );

function register_my_menus() {
  register_nav_menus( array(
    'main-menu' => 'Main Menu',
    'footer-menu'  => 'Footer Menu',
  ) );
}
add_action( 'after_setup_theme', 'register_my_menus' );

以下はメニューの位置の識別子を 'main-menu'、メニューの説明のための文字列を 'Main Menu' とした１つのナビゲーションメニューを登録する例です。

function register_my_menu() {
  register_nav_menu( 'main-menu','Main Menu');
}
add_action( 'after_setup_theme', 'register_my_menu' );

上記を functions.php に記述すると、管理画面「外観」に「メニュー」が追加されます。

以下はメニュー作成前の時点でのスクリーンショットです。

メニューに名前を付けてメニューを保存すると「メニューの位置」など「メニュー設定」の項目が表示されます。

管理画面「外観」に「メニュー」のスクリーンショット

register_nav_menus

一度に複数のナビゲーションメニューを登録・有効化する関数です（１つだけ登録することもできます）。functions.php に記述します。

アクションフックに登録しなくても動作しますが、通常は after_setup_theme アクションフックのタイミングで実行するようにします。

この関数は内部で add_theme_support( 'menus' ) を実行してメニュー機能を有効化しているので、add_theme_support() を別途実行する必要はありません。

register_nav_menus( $locations )

パラメータ
$locations（配列）：（必須）以下のような連想配列（キーと値のペア）でそれぞれのナビゲーションメニューの「メニューの位置」の情報を指定します。
  • キー：「メニューの位置」の識別子になる文字列を半角英数字で指定。
    「メニューの位置」はメニューを作成する際の管理画面での設定項目です。
    また、メニューを表示する関数 wp_nav_menu() の引数のキー 'theme_location' に指定する値でもあります。
  • 値：メニューの説明のための文字列（日本語可）。
    管理画面「外観」→「メニュー」での「メニューの位置」に表示される名前（説明）の文字列。（メニュー作成後に表示されます）
register_nav_menus( array(
  //各メニューの「メニューの位置」の情報をキーと値のペアで指定
  'キー（メニューの位置の識別子）' => '値（メニューの位置に表示される文字列）',
  'キー' => '値',
  ...
) );

//３つのナビゲーションメニューを登録する例
register_nav_menus( array(
  'main-menu' => 'メインメニュー',
  'footer-menu'  => 'フッターメニュー',
  'side-menu'  => 'サイドメニュー',
) );
戻り値
なし

以下がこの関数の定義（ソース）です。

add_theme_support( 'menus' )が実行され、グローバル変数 $_wp_registered_nav_menus に PHP 関数 array_merge() を使ってパラメータで指定した各メニューの「メニューの位置」の情報の配列（$locations）が追加されています。

//register_nav_menus() のソース（定義）
function register_nav_menus( $locations = array() ) {
  global $_wp_registered_nav_menus;
  add_theme_support( 'menus' );
  $_wp_registered_nav_menus = array_merge( (array) $_wp_registered_nav_menus, $locations );
}

以下は次のような２つのナビゲーションメニューを有効化及び登録する例です。

  • １つめのナビゲーションメニュー
    • メニューの位置の識別子：'main-menu'
    • メニューの説明のための文字列： 'Main Menu'
  • ２つめのナビゲーションメニュー
    • メニューの位置の識別子：'footer-menu'
    • メニューの説明のための文字列： 'Footer Menu'
function register_my_menus() {
  register_nav_menus( array(
    'main-menu' => 'Main Menu',
    'footer-menu'  => 'Footer Menu',
  ) );
}
add_action( 'after_setup_theme', 'register_my_menus' );

上記を functions.php に記述すると、管理画面「外観」に「メニュー」が追加されます。

以下はメニュー作成前の時点でのスクリーンショットです。

メニューに名前を付けてメニューを保存すると「メニューの位置」など「メニュー設定」の項目が表示されます。

管理画面「外観」に「メニュー」のスクリーンショット

メニューの作成

ナビゲーションメニューを登録しただけでは実際に表示されるメニュー（及びその内容）は作成されないので、登録したナビゲーションメニューに対応するメニューを管理画面で作成する必要があります。

この例では既にメニューに表示する固定ページやカテゴリーが作成済みであることを前提にしています。

また、この例では以下のように register_nav_menus() を使って２つのナビゲーションメニューを登録してあります。

//functions.php       
function register_my_menus() {
  register_nav_menus( array(
    'main-menu' => 'Main Menu',
    'footer-menu'  => 'Footer Menu',
  ) );
}
add_action( 'after_setup_theme', 'register_my_menus' );

２つのナビゲーションメニューを登録する際に指定したパラメータは以下の通りです。

  • １つめのナビゲーションメニュー
    • 「メニューの位置」の識別子： 'main-menu'
    • 「メニューの位置」に表示される名前（説明）： 'Main Menu'
  • ２つめのナビゲーションメニュー
    • 「メニューの位置」の識別子： 'footer-menu'
    • 「メニューの位置」に表示される名前（説明）： 'Footer Menu'

メニュー作成の流れは以下のようになります。

  1. 名前を付けてメニューを作成（メニュー名を付けて作成）
  2. 作成したメニューと登録したメニューを「メニューの位置」で関連付け（メニューの位置）
  3. 作成したメニューの構造（表示する内容）を設定（メニュー構造）

メニューの切り替え

登録してあるナビゲーションメニューの数より多くメニューを作成しておいて、必要に応じて管理画面で出力するメニューを切り替えることができます。

この例では２つのナビゲーションメニューを登録しそれぞれに対応するメニュー（main と footer）を作成しましたが、更にエキストラにメニューを作成すればそのメニューに切り替えることができます。

例えば以下のような tag_list と言う名前のメニューを作成します。

メニュー作成（メニュー名：tag_list）のスクリーンショット

作成したメニューを「位置の管理」の画面でどちらかの（または両方の）ナビゲーションメニューに指定することで、テンプレートファイルを変更せずに出力するメニューを切り替えることができます。

以下は Footer Menu に新しく作成したメニュー（tag_list）を設定する例です。

指定するメニューの項目に新しく作成したメニュー（tag_list）が追加されるので、それを選択して「変更を保存」をクリックします。

メニューを「位置の管理」の画面で切り替える場合のスクリーンショット

register_nav_menu() や register_nav_menus() を使ってナビゲーションメニューを登録してメニューを作成した場合、このように管理画面でメニューを切り替えることで出力するメニューを変更することができます。

これに対して、add_theme_support( 'menus' ) でナビゲーションメニューを有効化してメニューを作成した場合、出力するメニューを変更するには、テンプレートファイルのメニューの出力部分を書き換える必要があります。

add_theme_support( 'menus' ) でナビゲーションメニューを有効化した場合はメニューの作成画面で「位置の管理」のタブは表示されず、「メニューの位置」には何も表示されません。

add_theme_support( 'menus' ) でナビゲーションメニューを有効化した場合のメニューの作成画面のスクリーンショット