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

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

更新日:2019年05月14日

作成日:2019年03月31日

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

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

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

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

//1つのメニューを登録する場合
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

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

アクションフックに登録しなくても動作しますが、通常は 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 ) );
}

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

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

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

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

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' とした1つのナビゲーションメニューを登録する例です。

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

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

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

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

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

register_nav_menus

一度に複数のナビゲーションメニューを登録・有効化する関数です(1つだけ登録することもできます)。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(
  //各メニューの「メニューの位置」の情報をキーと値のペアで指定
  'キー(メニューの位置の識別子)' => '値(メニューの位置に表示される文字列)',
  'キー' => '値',
  ...
) );

//3つのナビゲーションメニューを登録する例
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 );
}

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

  • 1つめのナビゲーションメニュー
    • メニューの位置の識別子:'main-menu'
    • メニューの説明のための文字列: 'Main Menu'
  • 2つめのナビゲーションメニュー
    • メニューの位置の識別子:'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() を使って2つのナビゲーションメニューを登録してあります。

//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' );

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

  • 1つめのナビゲーションメニュー
    • 「メニューの位置」の識別子: 'main-menu'
    • 「メニューの位置」に表示される名前(説明): 'Main Menu'
  • 2つめのナビゲーションメニュー
    • 「メニューの位置」の識別子: 'footer-menu'
    • 「メニューの位置」に表示される名前(説明): 'Footer Menu'

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

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

メニューの切り替え

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

この例では2つのナビゲーションメニューを登録しそれぞれに対応するメニュー(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' ) でナビゲーションメニューを有効化した場合のメニューの作成画面のスクリーンショット