カスタムメニューのキホン〜作り方と表示設定〜 wp_nav_menu()

カスタムメニューを使う事で、メニュー表示項目を管理画面から簡単に操作できます。
ワードプレスのテーマ制作で必須の機能となってきます。

作り方 register_nav_menus()

テーマ基本設定を参考に、必要なメニューを作成します。
参考：テーマの基本設定を行い機能を実装します。add_theme_support()

register_nav_menus( array(
	'nav' => 'Global Navi',
	'nav-footer' => 'Footer Navi',
	'nav-sp' => 'SP Navi',
) );

左側の、’nav’等は、ロケーション名で表示させる際に使用するワードになります。
右側の、’Global Navi’等は、管理画面の外観＞メニューでメニューの位置情報として使います。

wp_nav_menu()の仕様

wp_nav_menu()関数は、header.phpやfooter.phpなどでメニューを表示する際に使用します。

<?php wp_nav_menu( $args ); ?>

パラメータ	初期値	説明
menu	（なし）
menu_class	menu	ul 要素に適用するCSS クラス名
menu_id	{メニューのスラッグ}-{連番}	ul 要素に適用するID
container	div	ulをラップするタグ div / nav つけない場合は、false
container_class	menu-{メニューのスラッグ}-container	コンテナに適用するクラス名
container_id	（なし）	コンテナに適用するID
fallback_cb	wp_page_menu	メニューが存在しない場合にコールバック関数を呼び出す
before	（なし）	リンクテキストの前のテキスト
after	（なし）	リンクテキストの後のテキスト
link_before	（なし）	リンクの前のテキスト
link_after	（なし）	リンクの後のテキスト
echo	true	メニューをHTML出力する(true)か、PHPの値で返す(false)か
depth	0	何階層まで表示するか。0 は全階層。
walker	（なし）	使用するカスタムウォーカーオブジェクト
theme_location	（なし）	register_nav_menu() で登録したロケーション名を指定
items_wrap	<ul id=”%1$s” class=”%2$s”>%3$s</ul>	それぞれ代入されます。 %1$s に ‘menu_id’ の値 %2$s に ‘menu_class’ の値 %3$s はリスト項目

初期値

<?php
	wp_nav_menu( array(
		'menu'            => '',
		'menu_class'      => 'menu',
		'menu_id'         => '{メニューのスラッグ}-{連番}',
		'container'       => 'div',
		'container_class' => 'menu-{メニューのスラッグ}-container',
		'container_id'    => '',
		'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>',
	);
?>

{メニューのスラッグ}は、管理画面で付けたメニュー名になります。
liタグに付与されるCSSについてはこちらの、メニュー項目のCSSクラスをご覧ください。

基本のコードと出力されるHTML

最低限、register_nav_menus()で作成したロケーション名を指定します。

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

管理画面の外観＞メニュー＞メニュー名をglobalと名前をつけていた場合・・・
※日本語などの2バイト文字をつけた場合、エンコードされます

<div class="menu-global-container">
	<ul id="menu-global-1" class="menu">
		<!-- ここに管理画面で設定したメニューがはいります。 -->
	</ul>
</div>

theme_locationが未設定の場合、wp_page_menu()が実行され固定ページがリスト表示されます。

カスタム設定

HTML5対応でnavタグを使う

divをnavにしてオリジナルクラスをつける。
管理画面のメニュー名で日本語を使ってもいいように、ulからidを外す。

<?php
	wp_nav_menu( array(
		'container'       => 'nav',
		'container_class' => 'nav-gloabl',
		'theme_location'  => 'nav',
		'items_wrap'      => '<ul class="%2$s">%3$s</ul>',
	) );
?>

<nav class="nav-gloabl">
	<ul class="menu">
		<!-- ここに管理画面で設定したメニューがはいります。 -->
	</ul>
</nav>

JSから操作できるようにIDをつける

オフキャンバスなどJavaScriptで操作出来るようにコンテナにIDをつけます。

<?php
	wp_nav_menu( array(
		'container'       => 'nav',
		'container_class' => 'nav-gloabl',
		'container_id'    => 'offcanvas',
		'theme_location'  => 'nav',
		'items_wrap'      => '<ul class="%2$s">%3$s</ul>',
	) );
?>

<nav id="offcanvas" class="nav-gloabl">
	<ul class="menu">
		<!-- ここに管理画面で設定したメニューがはいります。 -->
	</ul>
</nav>

navとulの間にDIVを設定したい場合

<?php
	wp_nav_menu( array(
		'container'       => 'nav',
		'container_class' => 'nav-gloabl',
		'container_id'    => 'offcanvas',
		'theme_location'  => 'nav',
		'items_wrap'      => '<div class="inner"><ul class="%2$s">%3$s</ul></div>',
	) );
?>

<nav id="offcanvas" class="nav-gloabl">
	<div class="inner">
		<ul class="menu">
			<!-- ここに管理画面で設定したメニューがはいります。 -->
		</ul>
	</div>
</nav>

beforeとlink_beforeの違い

'before'          => '【',
'after'           => '】',
'link_before'     => '[',
'link_after'      => ']',

このように出力されます。

<li>【<a href="https://example.com/">[ホーム]</a>】</li>

Codex

まとめ

使いこなしてくると、wp_nav_menu()のパラメータを変える事で、一つのメニューセットでヘッダー / フッター / スマホで同じものを使いつつ、CSSでデザインを変えたり、ヘッダーはドロップダウンでサブメニューを表示し、フッターでは第一階層のみといった制御ができるようになります。

ulやliに付与されるクラスについてや、日英の併記についてはまた別の機会に・・・