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(1行で出力されているのをインデントを付けています)
<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 設定に充分な注意と配慮が必要になるでしょう。