在 WordPress 3.0 中增加了自定義菜單功能，如果你在 WordPress 後台 （外觀》 菜單） 創建一個菜單，你可以在主題中使用 wp_nav_menu() 函數來顯示這些菜單。但是像圖中這種帶描述的導航菜單還無法簡單實現，本文將教你改變 WordPress 默認的菜單輸出結構，打造個性的導航菜單。
首先我們先看下默認的輸出結構：
<ul id="menu-main">
<li><a href="#"> 首頁</a></li>
<li><a href="#"> 關於</a></li>
<li><a href="#"> 聯繫</a></li>
<li><a href="#"> 博客</a></li>
</ul>
默認的結構根本不可能輸出我們想要的效果，所以我們需要改變輸出的結果：
<ul id="menu-main">
<li><a href="#"><strong> 首頁</strong><span>Home</span></a></li>
<li><a href="#"><strong> 關於</strong><span>About</span></a></li>
<li><a href="#"><strong> 聯繫</strong><span>Contact</span></a></li>
<li><a href="#"><strong> 博客</strong><span>Blog</span></a></li>
</ul>
準備工作
我們要做的第一件事就是到菜單頁面，你會發現每個菜單項都有一個 「標題屬性」，瞭解網頁都知道這是用來顯示鼠標移到鏈接上後的提示性文字，首先把你希望顯示的文字先填上~
自定義 walker 類編輯輸出結構
WordPress 使用一個特殊的 「Walker」 類來遍歷數據記錄並顯示出來。幸運的是，我們可以很輕鬆的創建屬於我們自己的 「Walker」 類從而改變菜單的輸出結構。
打開你主題文件中的 function.php 文件，並添加如下代碼：
class description_walker extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( " ", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = ' "';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names .'>';
$prepend = '<strong>';
$append = '</strong>';
$description = ! empty( $item->attr_title ) ? '<span>' . esc_attr( $item->attr_title ) . '</span>' : '';
if($depth != 0) {
$description = $append = $prepend = "";
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
}
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' %20.%20esc_attr(%20$item->url %20)%20.'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . $prepend . apply_filters( 'the_title', $item->title, $item->ID ) . $append;
$item_output .= $description . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
那麼這個類做了什麼呢？這個類在 WordPress 默認的 walker 代碼 （位於 wp-includes/nav-menu-template.php） 基礎上添加了幾行代碼。現在這個 walker 會檢測是否是頂級菜單，如果是就會輸出帶有描述的菜單結構。
添加回調函數
現在我們創建了一個自定義的 walker 類，我們還要做的就是告訴 WordPress 去使用我們的 walker 替代默認的。這步非常簡單，只要為 wp_nav_menu() 添加 walker 參數即可：
<?php wp_nav_menu( array('walker' => new description_walker())); ?>
好了，最後為你的菜單添加 CSS 樣式，一起來製作個性的導航菜單吧~