WordPress にカスタムメニューをいくつかいれる

WordPress 3 の新機能のカスタムメニューに対応させる方法を調べた。複数のメニューを入れることを前提で。

対応させるにはサイドバーウィジェットの仕組みと同じ感じで、テンプレートと functions.php に記述が必要。

テンプレート

テンプレート内のどこかにひとつめ

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary')); ?>

テンプレート内のどこかにふたつめ

<?php wp_nav_menu( array( 'container_class' => 'menu-footer', 'theme_location' => 'secondary')); ?>

上のテンプレートの theme_location の値は、そこにどのメニューを呼び出すかの指定で、 functions.php のregister_nav_menusのキーの部分に対応。

functions.php

//add_theme_support('menus');
register_nav_menus( array(
	'primary' => 'ヘッダーに入ります',
	'secondary' => 'フッターにに入ります'
));

functions.php の register_nav_menus の「ヘッダーに入ります」は管理画面で表示されるメニューの場所の説明。add_theme_support('menu') は、register_nav_menus() を書く場合には必要ないということで調べていない。

id・class・CSS

グローバルナビゲーションなどに使ったりするのなら、メニューごとに CSS を書くことになるのだけど、テンプレートで container_id, container_class, menu_class などを指定していても、ユーザーが設定からカスタムメニューを指定した場合と、指定しない状態（fallback_cb のデフォルトの wp_page_menu によりページ一覧が出る）で id・class が付いたり付かなかったり、どの html タグに class がつくのかが変わる。

テンプレートで container_class に YYYY を指定した場合、管理画面で設定したメニュー名前をXXXXとするとこうなった。

	`container_class` の指定無し	`'container_class' => 'YYY'`
カスタムメニューを指定無し	`<div class="menu"><ul><li ...`	`<div class="menu"><ul><li ...`
カスタムメニューを指定有り	`<div class="menu-XXX-container"><ul id="menu-XXX" class="menu"><li ...`	`<div class="YYY"><ul id="menu-XXX" class="menu"><li ...`

XXXX はユーザが管理画面で命名するので、テーマ側ではどんな名前になるのかはわからない。
container_classを指定しても付いたり、まったく付かなかったりする。class="menu" も div に付いたり、ul　に付いたりする。Twenty Ten を見ると、さらに外側の div を使って、container_class がある場合とない場合をそれぞれ指定している。

#access .menu-header,
div.menu {
	font-size: 13px;
	margin-left: 12px;
	width: 928px;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}

自分以外が使うテーマや、一般公開するようなテーマでは、カスタムメニューを指定してあったりなかったりする場合に対応しないとならないのでややこしい。

参考

2011-01-11T13:00:31.209Z 追記
自分で読み返してもわけがわからないので少し書き直しました。

/blog