為什麼及何時需要添加菜單描述?
一些用戶認為添加菜單描述有助於 SEO。然而，我們認為主要原因是為了提升網站的用戶體驗。描述可以用來告訴訪客點擊後會發現什麼。一個吸引人的描述將吸引更多用戶點擊菜單。
步驟 1：開啟菜單描述
進入【外觀】->【菜單】。在頁面右上角點擊螢幕選項按鈕，勾選“描述”選項。
這將在您的菜單項中啟用描述字段，像這樣：
現在，您可以在 WordPress 菜單項中添加描述。然而，這些描述尚未出現在您的主題中。要顯示菜單描述，我們需要添加一些程式碼。
步驟 2：添加 Walker 分類
Walker 分類擴展了 WordPress 中已存在的分類，它基本上只是添加了一行程式碼來顯示菜單項描述。將此程式碼添加到您的主題的 functions.php 文件中。
class Menu_With_Description 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; $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ); $class_names = ' class="' . esc_attr( $class_names ) . '"'; $output .= $indent . 'ID . '"' . $value . $class_names .'>'; $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="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; $item_output .= ''; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '
' . $item->description . ''; $item_output .= ''; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } 步驟 3：在 wp_nav_menu 中啟用 Walker
WordPress 主題使用 wp_nav_menu() 函數來顯示菜單。我們還為初學者發佈了一篇有關如何在 WordPress 主題中添加自定義導航菜單的教程。大多數 WordPress 主題在 header.php 模板中添加菜單。然而，您的主題可能使用了其他模板文件來顯示菜單。
我們需要做的就是在主題中找到 wp_nav_menu() 函數（最有可能在 header.php 中），並將其更改如下：
<?php $walker = new Menu_With_Description; ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>步驟 4：設計描述
我們之前添加的 Walker 類別在這行程式碼中顯示項目描述：
$item_output .= '
' . $item->description . '';上面的程式碼通過添加 <br /> 標籤向菜單項中添加換行符，然後將您的描述包裹在一個 class 為 sub 的 span 標籤中。像這樣：
<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.example.com/about/">關於<br /><span class="sub">我們是誰？</span></a></li>要更改描述在您網站上的顯示方式，您可以在主題的樣式表中添加 CSS。我們在 Twenty Twelve 主題上測試過並使用了這些 CSS 設置。
.menu-item { border-left: 1px solid #ccc; } span.sub { font-style:italic; font-size:small; }我們希望您會覺得這篇文章有用，並能幫助您在主題中創建酷炫的菜單描述。如果有任何問題，請在下方留言。
其他資源
如何設計 WordPress 導航菜單
如何向特定的 WordPress 菜單添加自定義項目
Bill Erickson 的帶描述的菜單類別
