wp_nav_menu+カスタムメニューがナビゲーション・メニューを作るのに便利なことが分かってきた。
前回のPost : WordPress 3.x, wp_nav_menu コードを追ってみた
.menu の位置が状況によって変わるのでCSSの設定には注意が必要です。
Twentyten では次のように使われています。
header.php
wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) );
この時のHTML出力は以下のようになります。
カスタムメニューを使用しない場合
Output（１行で出力されているのをインデントを付けています）
<div class="menu"> <ul> <li > <a href="http://me.beginsprite.com/" title="ホーム">ホーム</a> </li> </ul> </div>
menu オプションを指定していないので、ul を wrap する div には class='menu' が設定されます。
Twentyten はデフォルトのページメニューを使用する場合 functions.php で 「ホーム」へのリンクを出力するように設定されています。
function twentyten_page_menu_args( $args ) { $args['show_home'] = true; return $args; } add_filter( 'wp_page_menu_args', 'twentyten_page_menu_args' );
カスタムメニューを設定した場合
<div class="menu-header"> <ul id="menu-カスタムメニュー名" class="menu"> <li > <a href="http://me.beginsprite.com/" title="ホーム">ホーム</a> </li> </ul> </div>
class='menu' の位置が「カスタムメニュー」を使うと container タグ内 ul タグに設定されます。
配布テーマを作成する時は CSS 設定に充分な注意と配慮が必要になるでしょう。