WordPressのナビゲーションメニューの作成方法と、表示をカスタマイズする方法

2017年12月4日

WordPressの機能でナビゲーションメニューを作成する方法と、そのカスタマイズ方法についてメモ。

WordPressのメニューの作り方

WordPressの以下のテンプレートタグを使用します。

  • wp_nav_menu()
  • register_nav_menus() / register_nav_menus()

コーデックスの該当ページは以下。

ナビゲーションメニュー – WordPress Codex 日本語版
テンプレートタグ/wp nav menu – WordPress Codex 日本語版
関数リファレンス/register nav menus – WordPress Codex 日本語版
関数リファレンス/register nav menu – WordPress Codex 日本語版

作成の手順は大きく三つに分けられます。

  1. ナビゲーションメニューの登録
  2. ナビゲーションメニューの出力指定
  3. メニュー表示項目の設定

それぞれの手順で、
(1)テーマで使用できるようメニューを登録し、
(2)出力する条件や形式を指定し、
(3)項目を設定します。

ここでは主に上記の項目1及び2について紹介します。項目3は管理画面からの簡単な操作なため説明を割愛します。

ナビゲーションメニューの登録

functions.phpに以下の記述を追加します。
追加したいメニューが単数か複数かによって、使用する関数が異なります。

//追加するメニューが一つの場合
function register_my_menu() {
  register_nav_menu('header-menu',__( 'ヘッダーメニュー' ));
}
add_action( 'init', 'register_my_menu' );
//追加するメニューが二つ以上の場合
function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'ヘッダーメニュー' ),
      'extra-menu' => __( '追加メニュー' )//必要なメニューの数だけ追加
    )
  );
}
add_action( 'init', 'register_my_menus' );

上記の例の「header-menu」「ヘッダーメニュー」といったように、1つのメニューには2種類の名前を指定します。
このうち前者の名前は後でメニューの表示を指定するときにも使用します。
後者の名前は、 管理画面 > 外観 > メニュー > 位置の管理 などに表示されます。

なお、メニューの名前には、任意の値を指定できます。メニューを実際に表示する箇所に応じて、わかりやすい名前をつけると良いでしょう。

add_theme_support()は使わない

ネットで調べていると、add_theme_support()という関数を用いた指定方法もいくつかヒットし、どちらを使うべきか混乱するかもしれません。
以前私もメニューの追加にadd_theme_support()を使っていたのですが、コーデックスのadd_theme_supportのページに以下のように注記がされています。

次のパラメータは読み出し専用で、current_theme_supports()の文脈の中でのみ使用されるべきです。
menus: 代わりにregister_nav_menu()かregister_nav_menus()を使用ください。

current_theme_supportsというのは個人的に使用したことがないのですが、どうやらテーマがその機能をサポートしているかどうかを確認するための関数のようです。

また、register_nav_menuのページには以下のように明記されています。

この関数は自動的にテーマのカスタム・メニューサポートを登録します。そのため add_theme_support( ‘menus’ ); を呼ぶ必要はありません。

ということで、register_nav_menu()register_nav_menus()を使用しましょう。

ナビゲーションメニューの出力指定

メニューの登録ができたら、次はそれを出力するための指定をしましょう。

header.phpなどのテンプレートファイル内の、メニューを出力させたい箇所に以下の記述を追加します。

header-menu の箇所には、先ほど register_nav_menu / register_nav_menus で指定した名前を入れます。

上記のコードだけではデフォルトの出力となりますが、これに様々なパラメータ渡すことで、任意の出力結果を得ることができます。

出力するメニューのカスタマイズ

指定できるパラメータの一部を以下に紹介します。
指定しているのはデフォルト値、コメントが内容になります。必要に応じて変更し使用しましょう。

<?php
$args = array(
	'menu_class'      => 'menu', //メニューを構成する ul 要素に適用するクラス名
	'menu_id'         => '{メニューのスラッグ}-{連番}', //メニューを構成する ul 要素に適用するID
	'container'       => 'div', //ul を囲むタグ(コンテナ)の指定。囲む場合は div または nav を指定。囲まない場合は false を指定する(falseにはクォーテーションは不要)。
	'container_class' => 'menu-{メニューのスラッグ}-container', //コンテナに適用するクラス名
	'container_id'    => '', //コンテナに適用するID
	'before'          => '', //リンクテキストの前のテキスト
	'after'           => '', //リンクテキストの後のテキスト
	'link_before'     => '', //リンクの前のテキスト
	'link_after'      => '', //リンクの後のテキスト
	'theme_location'  => '' //テーマの中で使われる位置。register_nav_menu() で登録されている必要がある。
);
wp_nav_menu( $args );
?>

例えば、「header-menuでは nav というクラス名をつけた ul だけでマークアップしたい」と言った場合、以下のような記述になります。

管理画面で項目を設定

テンプレート側でのメニューの指定に合わせて、管理画面からメニューを設定します。
メニューの項目設定は 管理画面 > 外観 > メニュー から設定できます。

まとめと所感

他のテンプレートタグと同様に、どのようなパラメータが設定できるかを知っていれば様々な表示を行うことができます。

管理画面上でメニューの変更ができるようになることで、次のようなメリットが考えられます。

  • メニュー項目の変更や管理が容易になる
  • HTML・PHPの知識のない人でも編集できる

テーマの作成者と利用者が違う場合(WordPressの場合は大多数がそうかもしれません)であれば、必須とも言える機能です。

一方で、サイト運営者自身がテーマを作成する場合には、メニューで利用可能な機能のほとんどは他の方法でも実装可能であり、管理画面からメニューを設定できるというメリットも恩恵が薄いかもしれません。
とはいえ、そのような場合もサイトの管理方法は極力明確に統一させておきたいもの。メニュー項目は管理画面から変更する、というのはわかりやすく、WordPressを使用するならぜひ取り入れるべき機能だと思います。