WordPress 進階教程 (三十五)：給菜單加上分隔線或者分隔字符

很多網頁設計都會給菜單之間加一個分割線，最常見的就是「|」了，如圖：

我們需要的是，每個菜單項之間有一個分隔符。傳統的方法是配置 WordPress 的菜單輸出函數 wp_nav_menu，給它加上一個 after 參數，

<?php
$args = array(
'after'=>'|' //菜單項後面加|字符
);
wp_nav_menu($args);
?>

這樣可以給每個菜單項的後面加一個字符，且 html 結構如下

<ul>
<li><a href=""> 阿樹工作室</a>|</li>
<li><a href=""> 阿樹工作室</a>|</li>
<li><a href=""> 阿樹工作室</a>|</li>
</ul>

這樣有個顯而易見的缺點就是每個菜單項後面都有個豎線，最後一個菜單項也有，可是我們肯定不需要菜單的最後面也出現豎線，當然這樣的結構，通過 css 還是可以寫出上面圖片中的樣式的。

我們要的效果：以及菜單每個菜單項後面加一個分割線，菜單的最後面不要，二級菜單不要。

分析：wp_nav_menu 函數輸出菜單項的代碼在 wp-includes/nav-menu-template.php 文件裏面，具體的呢，在文件中 Walker_Nav_Menu 類裏面的 start_el 函數，所以，方法就是改造這個函數。

步驟一：找到 wp_nav_menu 函數，增加一個 walker 參數，如下：

<?php
$args = array(
'depth'=>2, //支持二級菜單
'walker' => new ashuwp_navwalker(), //後面的 ashuwp_navwolker 是類名
'theme_location' => 'ashuwp-menu' //注意這個 theme-location 參數
);
wp_nav_menu($args);
?>

關於 walker 參數的用法，請參考官網。

步驟二：前面的代碼中 walker 參數的值，後面是一個類，類名是 ashuwp_navwolker，所以第二部就是新建這個類，如下：

//定義 ashuwp_navwalker 類，繼承 wp-includes/nav-menu-template.php 文件中的 Walker_Nav_Menu
class ashuwp_navwalker extends Walker_Nav_Menu {
//在中間添加函數，直接複製 Walker_Nav_Menu 類的 start_el 函數進來
}

新定義一個 ashuwp_navwalker 類，繼承 wp-includes/nav-menu-template.php 文件中的 Walker_Nav_Menu，然後將 Walker_Nav_Menu 類的 start_el 函數直接複製進去，複製完後，如下：

//定義 ashuwp_navwalker 類，繼承 wp-includes/nav-menu-template.php 文件中的 Walker_Nav_Menu
class ashuwp_navwalker extends Walker_Nav_Menu {
//在中間添加函數，直接複製 Walker_Nav_Menu 類的 start_el 函數進來
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$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 = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names .'>';
$atts = array();
$atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}

步驟三：改造 ashuwp_navwalker 類中的 start_el 函數。

1. 在 start_el 函數開頭，定義一個靜態數組變量，用來計數，用數組可以支持多個菜單。注意數組中的初始值，需要支持多少個菜單，都需要手動加上，靜態變量用來記每個輸出的菜單裏面的一級菜單的數量。

//定義 ashuwp_navwalker 類，繼承 wp-includes/nav-menu-template.php 文件中的 Walker_Nav_Menu
class ashuwp_navwalker extends Walker_Nav_Menu {
//在中間添加函數，直接複製 Walker_Nav_Menu 類的 start_el 函數進來
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
//定義靜態變量 $top_level_count 數組中的值對應多個 wp_nav_menu 函數中的 theme_location 參數的值
static $top_level_count = array('ashuwp-menu'=>0,'ashuwp-nav'=>0);
//......

2. 添加計算菜單中一級菜單數量的函數。該函數不需要放入類中，隨便放在主題的 functions.php 文件的某一位置。

//參數 $menu_id 為菜單 id
function ashuwp_count_top_level_menu_items($menu_id){
$count = 0;
$menu_items = wp_get_nav_menu_items($menu_id);
foreach($menu_items as $menu_item){
if($menu_item->menu_item_parent==0){
$count++;
}
}
return $count;
}

3. 重新定義 $args-after 的值，將下面的代碼加入 start_el 函數中。

/***add code****/
$args->after='';
if($item->menu_item_parent==0 and $top_level_count[$args->theme_location]!==null){ //Count top level menu items
$top_level_count[$args->theme_location]++; //Increment
}
$location_name = $args->theme_location;
if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $location_name ] ) ) {
$main_nav = wp_get_nav_menu_object( $locations[ $location_name ] );
if($item->menu_item_parent==0 && $top_level_count[$args->theme_location]!=ashuwp_count_top_level_menu_items($main_nav->term_id)){
$args->after= '|';
}
}
/*****add code*****/

做好 1 3 兩個點之後， ashuwp_navwalker extends 類如下：

//定義 ashuwp_navwalker 類，繼承 wp-includes/nav-menu-template.php 文件中的 Walker_Nav_Menu
class ashuwp_navwalker extends Walker_Nav_Menu {
//在中間添加函數，直接複製 Walker_Nav_Menu 類的 start_el 函數進來
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
//定義靜態變量 $top_level_count 數組中的值對應多個 wp_nav_menu 函數中的 theme_location 參數的值
static $top_level_count = array('ashuwp-menu'=>0,'ashuwp-nav'=>0);
$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 = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names .'>';
$atts = array();
$atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
/***add code****/
$args->after='';
if($item->menu_item_parent==0 and $top_level_count[$args->theme_location]!==null){ //Count top level menu items
$top_level_count[$args->theme_location]++; //Increment
}
$location_name = $args->theme_location;
if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $location_name ] ) ) {
$main_nav = wp_get_nav_menu_object( $locations[ $location_name ] );
if($item->menu_item_parent==0 && $top_level_count[$args->theme_location]!=ashuwp_count_top_level_menu_items($main_nav->term_id)){
$args->after= '|';
}
}
/*****add code*****/
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}

至此，就可以完成了。

懶人專用

將下列代碼複製到你的主題的 functions.php 文件中

function ashuwp_count_top_level_menu_items($menu_id){
$count = 0;
$menu_items = wp_get_nav_menu_items($menu_id);
foreach($menu_items as $menu_item){
if($menu_item->menu_item_parent==0){
$count++;
}
}
return $count;
}
class ashuwp_navwalker extends Walker_Nav_Menu {
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
//根據實際增加和修改下面的數組
static $top_level_count = array('ashu-menu'=>0,'top-menu'=>0);
$indent = ( $depth ) ? str_repeat( " ", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
/**
* Filter the CSS class(es) applied to a menu item's <li>.
*
* @since 3.0.0
*
* @param array $classes The CSS classes that are applied to the menu item's <li>.
* @param object $item The current menu item.
* @param array $args An array of arguments. @see wp_nav_menu()
*/
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
/**
* Filter the ID applied to a menu item's <li>.
*
* @since 3.0.1
*
* @param string The ID that is applied to the menu item's <li>.
* @param object $item The current menu item.
* @param array $args An array of arguments. @see wp_nav_menu()
*/
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names .'>';
$atts = array();
$atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
/**
* Filter the HTML attributes applied to a menu item's <a>.
*
* @since 3.6.0
*
* @param array $atts {
* The HTML attributes applied to the menu item's <a>, empty strings are ignored.
*
* @type string $title The title attribute.
* @type string $target The target attribute.
* @type string $rel The rel attribute.
* @type string $href The href attribute.
* }
* @param object $item The current menu item.
* @param array $args An array of arguments. @see wp_nav_menu()
*/
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
/***add code****/
$args->after='';
if($item->menu_item_parent==0 and $top_level_count[$args->theme_location]!==null){ //Count top level menu items
$top_level_count[$args->theme_location]++; //Increment
}
$location_name = $args->theme_location;
if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $location_name ] ) ) {
$main_nav = wp_get_nav_menu_object( $locations[ $location_name ] );
if($item->menu_item_parent==0 && $top_level_count[$args->theme_location]!=ashuwp_count_top_level_menu_items($main_nav->term_id)){
$args->after= '|';
}
}
/*****add code*****/
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
/** This filter is documented in wp-includes/post-template.php */
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
/**
* Filter a menu item's starting output.
*
* The menu item's starting output only includes $args->before, the opening <a>,
* the menu item's title, the closing </a>, and $args->after. Currently, there is
* no filter for modifying the opening and closing <li> for a menu item.
*
* @since 3.0.0
*
* @param string $item_output The menu item's starting HTML output.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param array $args An array of arguments. @see wp_nav_menu()
*/
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}

然後修改你的 wp_nav_menu 函數，添加 walker 參數

<?php
$args = array(
'depth'=>2, //支持二級菜單
'walker' => new ashuwp_navwalker(), //後面的 ashuwp_navwolker 是類名
'theme_location' => 'ashuwp-menu'
);
wp_nav_menu($args);
?>

WordPress 進階教程 (三十五)：給菜單加上分隔線或者分隔字符

WordPress 進階教程 (三十五)：給菜單加上分隔線或者分隔字符

訂單服務

媒體中心

服務支持

使用條款

關於公司