WordPress, wp_nav_menuのbefore, after と link_before, link_after

wp_nav_menuのbefore, after と link_before, link_after 用法が誤解を生みそうな件。

$before
(文字列) (オプション) リンクテキストの前のテキスト
初期値: なし

$after
(文字列) (オプション) リンクテキストの後のテキスト
初期値: なし

$link_before
(文字列) (オプション) リンクの前のテキスト
初期値: なし

$link_after
(文字列) (オプション) リンクの後のテキスト
初期値: なし

before と link_before の説明がどうもすっきりしない。

Usage:

<?php wp_nav_menu( array(
    'link_before' => '<span class="link_before">', 
    'link_after' => '</span>', 
    'before' => '<span class="before">', 
    'after' => '</span>', 
    'theme_location' => 'primary', 
    'depth' => '1' )
 );

Output:

<div class="menu">
    <ul>
        <li>
            <span class="before">
                <a href="/"><span class="link_before">Home</span></a>
            </span>
        </li>
    </ul>
</div>

出力結果をみても逆な気がしてしょうがない。

WordPress, wp_nav_menu+カスタムメニューのCSS設定

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 オプションを指定していないので、ulwrap する 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 設定に充分な注意と配慮が必要になるでしょう。

WordPress 3.x, wp_nav_menu コードを追ってみた

WordPress 3.0 から追加された wp_nav_menu のコードを追ったオレメモ。
多分「カスタムメニュー」に関係あるはず。

WordPress.com 日本語ブログ : 新カスタムメニュー機能 (など)
WordPress.com Support : Menus

Function Reference/wp nav menu
trac : nav-menu-template.php

$defaults = array(
'menu'            => ,
'container'       => 'div',
'container_class' => ,
'container_id'    => ,
'menu_class'      => 'menu',
'menu_id'         => ,
'echo'            => true,
'fallback_cb'     => 'wp_page_menu',
'before'          => ,
'after'           => ,
'link_before'     => ,
'link_after'      => ,
'depth'           = 0,
'walker'          => ,
'theme_location'  => );

wp_nav_menufallback_cb の設定をしない時は wp_page_menu を使って出力するので Parameter は wp_page_menu の Parameter を追加して設定できます。

fallback_cb => wp_page_menu のデフォルト時は wp_nav_menu の Parameter で次のものは設定しても無視されるようです。
container_class, container_id, before, after, link_before, link_after, menu_id.

wp_nav_menu は「カスタムメニュー」を使用しない時は wp_page_menu を出力します。
このとき出力される ul タグを container オプションのデフォルト div でwrapします。
この div には menu_class オプションのデフォルト class='menu' が設定されます。
menu_class オプションは wp_page_menu を使っているときでも設定可能です。
複数のクラスを設定したい時は半角スペースを使い設定します。
Usage :
'menu_class' => 'menu main-menu navigation'

theme_location が重要なようですが、さてこれは何を指定すれば良いのでしょう?
コードを追っていくと

// nav-menu.php
function get_nav_menu_locations() {
	return get_theme_mod( 'nav_menu_locations' );
}
 
// theme.php
function get_theme_mod($name, $default = false) {
	$theme = get_current_theme();
 
	$mods = get_option( "mods_$theme" );
 
	if ( isset($mods[$name]) )
		return apply_filters( "theme_mod_$name", $mods[$name] );
 
	return apply_filters( "theme_mod_$name", sprintf($default, get_template_directory_uri(), get_stylesheet_directory_uri()) );
}

ということはこんな感じかなぁ。

apply_filters(theme_mod_nav_menu_locations, $mods['nav_menu_locations']);

で、何をやってるのかは???
おしえて、わかる人。

update

2010-08-25

コードの意味は良くわかりませんが、、、
カスタムメニューで登録したメニューをデフォルト設定にした時、”primary” にすることで wp_nav_menu で出力できるようです。

“primary” のほかにどんな設定値があるのかは以前不明です。

wp_nav_menumenu オプションを設定すると「カスタムメニュー」で登録したメニューを呼び出せます。
カスタムメニューを使うとタイトルへのリンクをパーマリンクを変更せずに名称を変更できます。

カスタムメニューはページ、カテゴリー、タグなどを混在させたメニューを簡単に作成できます。
テンプレート・タグを駆使してグローバル・ナビゲーションを作成したことのある方にはありがたい機能です。

Usage:

 'menu-header',
    'menu' => 'gnavi',
    'container_id' => 'menu-main-menu',
    'menu_class' => 'inazumatv-menu inazumatv',
    'link_before' => '<span>', 'link_after' => '</span>',
    'menu_id' => "menu-main-menu-nav",
    'theme_location' =>; 'primary', 'depth' => '1' )
 );

Output:

<div id="menu-main-menu" class="menu-header">
<ul id="menu-main-menu-nav" class="inazumatv-menu inazumatv">
	<li id="menu-item-ID" class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-ID">
            <a href="/"><span>Home</span></a></li>
	<li id="menu-item-ID2" class="menu-item menu-item-type-post_type menu-item-ID2">
            <a href="URL"><span>Title</span></a></li>
</ul>
</div>

外観 -> メニュー
で “gnavi” という名称のカスタムメニューを登録しています。

これはかなり便利そうです。
カスタムメニューは複数登録できそうなので、これからメニューを作る時は「カスタムメニュー」+ wp_nav_menu の組み合わせがステキです。

update 2010-08-25
タグに関してはカスタムリンクを使えばメニューに加えることも可能ですが、他と比べて「簡単に」ではないので削除しました。