在 WordPress 導(dǎo)航菜單的使用篇中, 已經(jīng)介紹過(guò) WP 3.0 導(dǎo)航菜單這一新功能. 在老版本的 WordPress 上, 頁(yè)面列表和分類(lèi)列表一直被用作導(dǎo)航菜單, 現(xiàn)在引入該功能, 我們應(yīng)該怎樣選擇或者兼容兩者呢? 本文將更加深入, 在代碼層面繼續(xù)發(fā)掘其更多特性. 在看到這些特性之后, 或許能勾起你的一些頭緒.

關(guān)于導(dǎo)航菜單的使用方法, 請(qǐng)查看使用篇的介紹, 本文將側(cè)重于主題開(kāi)發(fā).

用法

在主題調(diào)用導(dǎo)航菜單, 方法很簡(jiǎn)單. 只需加入以下語(yǔ)句在頁(yè)面上輸出菜單.

<?php wp_nav_menu(); ?>

但其實(shí)這個(gè)方法提供了很多可配置的參數(shù), 下面我們逐一描述.

參數(shù)

參數(shù)列表來(lái)自 WordPress Codex, 下面逐一翻譯, 并對(duì)不易理解的參數(shù)進(jìn)行詳細(xì)說(shuō)明.

$menu
(字符串)(可選) 期望顯示的菜單; 接受 (按順序匹配的) id, slug, name
默認(rèn)值: None

我們看一下 WordPress 取菜單的方法. 就像 Codex 上的描述一樣, 它是按 id, slug, name 的順序去取的.

function wp_get_nav_menu_object( $menu ) {
	// 沒(méi)有提供參數(shù), 返回空
	if ( ! $menu )
		return false;
 
	// 根據(jù) id 找
	$menu_obj = get_term( $menu, 'nav_menu' );
 
	// 如果找不到, 根據(jù) slug 來(lái)找
	if ( ! $menu_obj )
		$menu_obj = get_term_by( 'slug', $menu, 'nav_menu' );
 
	// 如果還找不到, 再根據(jù) name 來(lái)找
	if ( ! $menu_obj )
		$menu_obj = get_term_by( 'name', $menu, 'nav_menu' );
 
	// 最終沒(méi)找到, 返回空
	if ( ! $menu_obj )
		$menu_obj = false;
 
	return $menu_obj;
}

$container
(字符串)(可選) ul 父節(jié)點(diǎn)的標(biāo)簽類(lèi)型
默認(rèn)值: div

千萬(wàn)不要以為什么標(biāo)簽都可以使用, 事實(shí)上只有 div 和 nav 會(huì)被采用, 如果輸入別的值, ul 父節(jié)點(diǎn)的標(biāo)簽將不會(huì)顯示, 可見(jiàn) Codex 的描述不夠詳盡. (從另一個(gè)角度看, WordPress 使用 nav 標(biāo)簽說(shuō)明它正在提升對(duì) HTML5 的支持力度.)

// 被允許使用的標(biāo)簽只有 div 和 nav
$allowed_tags = apply_filters( 'wp_nav_menu_container_allowedtags', array( 'div', 'nav' ) );

$container_class
(字符串)(可選) ul 父節(jié)點(diǎn)的 class 屬性值
默認(rèn)值: menu-{menu slug}-container

$container_id
(字符串)(可選) ul 父節(jié)點(diǎn)的 id 屬性值
默認(rèn)值: None

$menu_class
(字符串)(可選) ul 節(jié)點(diǎn)的 class 屬性值
默認(rèn)值: menu

$menu_id
(字符串)(可選) ul 節(jié)點(diǎn)的 id 屬性值
默認(rèn)值: menu slug, 自增長(zhǎng)的

$echo
(布爾型)(可選) 決定直接顯示菜單還是返回 HTML 片段
默認(rèn)值: true (直接顯示)

$fallback_cb
(字符串)(可選) 如果菜單不存在, 調(diào)用的回調(diào)函數(shù)
默認(rèn)值: wp_page_menu (顯示頁(yè)面列表作為菜單)

這是一個(gè)很重要的方法, 可以通過(guò)它去兼容老版本主題. 下面我們看看代碼. 關(guān)鍵是 $args 也被傳入 call_user_func 中. 例如, 我們將參數(shù) 'sort_column'=>'menu_order' 寫(xiě)入 wp_nav_menu 的參數(shù), 那它同樣會(huì)被傳到 call_user_func 方法中. 如果 call_user_func 是 wp_page_menu 方法, 那么顯示的頁(yè)面列表將以認(rèn)為賦予的序號(hào)來(lái)排序輸出.

// 如果找不到指定菜單, 或者菜單不存在任何條目并沒(méi)有指定自定義菜單, 使用 call_user_func 方法來(lái)進(jìn)行處理
if ( ( !$menu || is_wp_error($menu) || ( isset($menu_items) && empty($menu_items) && !$args->theme_location ) )
	&& ( function_exists($args->fallback_cb) || is_callable( $args->fallback_cb ) ) )
		return call_user_func( $args->fallback_cb, (array) $args );

$before
(字符串)(可選) 顯示在每個(gè)菜單鏈接前的文本
默認(rèn)值: None

$after
(字符串)(可選) 顯示在每個(gè)菜單鏈接后的文本
默認(rèn)值: None

$link_before
(字符串)(可選) 顯示在每個(gè)菜單鏈接文本前的文本
默認(rèn)值: None

$link_after
(字符串)(可選) 顯示在每個(gè)菜單鏈接文本后的文本
默認(rèn)值: None

我懷疑 Codex 對(duì) $before 與 $link_before, $after 與 $link_after 的描述是不是倒過(guò)來(lái)了?

$depth
(整型)(可選) 顯示菜單的深度, 當(dāng)數(shù)值為 0 時(shí)顯示所有
默認(rèn)值: 0

$walker
(字符串)(可選) 自定義的遍歷對(duì)象
默認(rèn)值: None

$theme_locaton
(字符串)(可選) the location in the theme to be used--must be registered with register_nav_menu() in order to be selectable by the user
默認(rèn)值: None

如果主題在 function.php 中登記了 3 個(gè)自定義菜單, 如下:

register_nav_menus(array('primary' => 'Primary Navigation'));
register_nav_menus(array('secondary' => 'Secondary Navigation'));
register_nav_menus(array('bottom' => 'Bottom Navigation'));

要調(diào)用 Secondary Navigation 這個(gè)導(dǎo)航菜單, 則可以在 header.php 文件里使用以下語(yǔ)句:

wp_nav_menu(array(
	'theme_location'	=>'secondary'
));

也就是說(shuō), 這是用來(lái)指定調(diào)用某個(gè)自定義菜單的.

我準(zhǔn)備在所有發(fā)布的主題里添加對(duì)導(dǎo)航菜單的支持, 將會(huì)設(shè)計(jì)一套對(duì)老版本的兼容方案, 并以文章形式分享出來(lái).
對(duì)于本文內(nèi)容如有任何疑問(wèn)和建議, 請(qǐng)?jiān)诖肆粞?