在 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 樣式，一起來製作個性的導航選單吧~