WordPress 3.0 引入導(dǎo)航菜單功能, 讓頁面的導(dǎo)航和鏈接的管理變得簡(jiǎn)單易用. WP 向用戶提供了菜單管理頁面和多種調(diào)用方法, 我們先來看一下一般WordPress 的導(dǎo)航菜單都具有哪些功能.

管理菜單頁面

頁面路徑: Appearance > Menus
由從界面來看, 能夠創(chuàng)建多個(gè)菜單, 并且可以向菜單中添加自定義鏈接, 頁面鏈接和分類鏈接.

但有一點(diǎn)需要注意, 如果將頁面鏈接和分類鏈接加入, 被帶入菜單的僅是鏈接, 而不是頁面和分類本身, 也就是說, 子頁面和子分類不會(huì)成為菜單的一部分.

另外, 我們也不能在菜單中加入別的菜單, 所以這種自定義的菜單注定只存在一級(jí). 在右邊排列菜單區(qū)塊中, 只要將某個(gè)菜單往右移一格, 就可以作為下級(jí)菜單. 所以是可以創(chuàng)建多級(jí)的.
創(chuàng)建菜單后, 我們就可以通過在 Widgets 頁面將這些菜單添加到側(cè)邊欄上了.

登記自定義菜單

在菜單管理頁面中注意到 Theme Locations 區(qū)塊提示如下:

The current theme does not natively support menus, but you can use the "Custom Menu" widget to add any menus you create here to the theme's sidebar.

意思是說, 現(xiàn)在你的主題不支持自定義菜單, 但可以通過 Widget 的方式將自定義加到主題的側(cè)邊欄. 那如何讓主題也能支持自定義菜單呢? 請(qǐng)將以下代碼加到 function.php 中.

register_nav_menus(array(
 'primary' => 'Primary Navigation'
));

這段代碼用于記錄一個(gè)自定義菜單, 你可以為它選擇具體的應(yīng)用菜單, 其中 primary 應(yīng)是唯一識(shí)別符, Primary Navigation 是菜單的名稱. 可以通過這個(gè)函數(shù)為主題添加多個(gè)自定義菜單. 如果在 function.php 添加登記方法如下:

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

在菜單管理頁面將會(huì)看到如下圖的內(nèi)容.

主題調(diào)用菜單

在主題中如何調(diào)用菜單呢? 在主題的適合位置使用方法 wp_nav_menu();, 向頁面輸出菜單.
方法中提供參數(shù) theme_location, 用于指定對(duì)應(yīng)的自定義菜單. 如要調(diào)用第一個(gè)菜單, 則代碼如下:

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

在默認(rèn)情況下如果沒有定義任何菜單, 使用 wp_nav_menu 方法與 wp_list_pages (調(diào)用頁面列表) 方法無異, 但效率不及后者. 所以, 如果你準(zhǔn)備用頁面列表或者分類列表作為導(dǎo)航菜單, 建議不要使用 wp_nav_menu.

用法

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

<?php wp_nav_menu(); ?>

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

參數(shù)

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

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

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

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

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

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

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

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

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

// 如果找不到指定菜單, 或者菜單不存在任何條目并沒有指定自定義菜單, 使用 call_user_func 方法來進(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 的描述是不是倒過來了?

$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 文件里使用以下語句:

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

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

最新評(píng)論