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 进阶教程 (三十五)：给菜单加上分隔线或者分隔字符

订单服务

媒体中心

服务支持

使用条款

关于公司