Go to top Go to bottom

ナビゲーションメニューは、サイトのメニューを管理画面で簡単に追加・変更ができるようにする機能です(カスタムメニュー、カスタムナビゲーションメニューとも呼ばれます)。この機能はデフォルトの状態では有効になっていませんので、register_nav_menu()を使用して有効化する必要があります。

ナビゲーションメニューとは

ナビゲーションメニューとは、しばしばサイトの上に配置される、各ページへ遷移するためのメニューを実装するための機能のことを指します。

ナビゲーションメニューの例
ナビゲーションメニューの例

もちろん、上部に限らず、サイドバーの一部や、あるいはフッターに表示しても構いません。また、サイトのナビゲーションに限らず、たとえばあるカテゴリだけを集めたメニューや、あるいはおすすめの投稿だけを集めたメニューを作成することも可能です。

これは管理画面の[外観]にある[メニュー]画面でマネージメントすることができます。

「位置」にメニューを登録
「位置」にメニューを登録

追加・並び順の変更・メニューのラベルの変更などを直観的に、簡単に行うことができます。

ナビゲーションメニューを有効にする

ナビゲーションメニューは便利な機能ですが、デフォルトの状態では有効になっていません。そこで、register_nav_menu()という関数を用いて有効化します。

<?php register_nav_menu( $location, $description ); ?>

$locationはメニューの位置を識別する名前のようなもの(メニューの位置を識別するID)、$descriptionはメニューの説明を入れます。実際には、functions.phpに次のように記載します。

function twpp_setup_theme() {
  register_nav_menu( 'header-navigation', 'Header Navigation' );
}

add_action( 'after_setup_theme', 'twpp_setup_theme' );

これでテーマにおいてメニューが有効化され、管理画面に「メニュー」という項目が出現するようになりました。

この$locationで定義される「位置」と実際のメニューの関係性がわかりにくいのですが、「位置」はメニューを入れるための箱のようなものだと考えるとわかりやすいと思います。テーマ上に(サイト上に)この箱を配置するにはwp_nav_menu()という関数を使用します。

  1. register_nav_menu()で箱を定義
  2. wp_nav_menu()で箱をテーマ上に配置。このとき中身は空
  3. 管理画面で新しいナビゲーションメニューを作成
  4. 管理画面で箱にナビゲーションメニューを格納

「位置」にメニューを登録する

管理画面の[メニュー]で、register_nav_menu()で登録した「位置」にメニューを割り当てることができます。

「位置」にメニューを登録
「位置」にメニューを登録

方法は2通りありますが、基本的にはBにある「メニューの位置」のチェックボックスで設定するのが簡単でしょう。位置とメニューが多く、一覧で設定したい場合は、Aの[位置]メニューを使用します。

複数のナビゲーションメニューを一度に登録する

メニューがたくさんあるときは、register_nav_menu()で一つひとつ登録するよりも、register_nav_menus()を使用して一気に登録したほうが簡単です。

register_nav_menus( array(
  'header-navigation' => 'Header Navigation',
  'footer-navigation' => 'Footer Navigation',
  'social-links'      => 'Social Links',
) );

配列形式でarray( 'location' => 'description' )として複数の位置を登録することができます。

ナビゲーションメニューを表示する

実際にメニューを表示する方法は、このライブラリを参照してください。