wordpress进阶教程(三十五):给菜单加上分隔线或者分隔字符

很多网页设计都会给菜单之间加一个分割线,最常见的就是“|”了,如图:

view

 

我们需要的是,每个菜单项之间有一个分隔符。传统的方法是配置wordpress的菜单输出函数wp_nav_menu,给它加上一个after参数,

  1. <?php
  2. $args = array(
  3.     'after'=>'|' //菜单项后面加|字符
  4. );
  5. wp_nav_menu($args);
  6. ?>

这样可以给每个菜单项的后面加一个字符,且html结构如下

  1. <ul>
  2.     <li><a href="">阿树工作室</a>|</li>
  3.     <li><a href="">阿树工作室</a>|</li>
  4.     <li><a href="">阿树工作室</a>|</li>
  5. </ul>

这样有个显而易见的缺点就是每个菜单项后面都有个竖线,最后一个菜单项也有,可是我们肯定不需要菜单的最后面也出现竖线,当然这样的结构,通过css还是可以写出上面图片中的样式的。

我们要的效果:每个菜单项后面加一个分割线,菜单的最后面不要,二级菜单不要。

分析:wp_nav_menu函数输出菜单项的代码在 wp-includes/nav-menu-template.php文件里面,具体的呢,在文件中Walker_Nav_Menu类里面的start_el函数,所以,方法就是改造这个函数。

步骤一:找到wp_nav_menu函数,增加一个walker参数,如下:

  1. <?php
  2. $args = array(
  3.     'depth'=>2, //支持二级菜单
  4.     'walker' => new ashuwp_navwalker(), //后面的ashuwp_navwolker是类名
  5.     'theme_location' => 'ashuwp-menu'   //注意这个theme-location参数
  6. );
  7. wp_nav_menu($args);
  8. ?>

关于walker参数的用法,请参考官网。

步骤二:前面的代码中walker参数的值,后面是一个类,类名是ashuwp_navwolker,所以第二部就是新建这个类,如下:

  1. //定义ashuwp_navwalker类,继承wp-includes/nav-menu-template.php文件中的Walker_Nav_Menu
  2. class ashuwp_navwalker extends Walker_Nav_Menu {
  3.     //在中间添加函数,直接复制Walker_Nav_Menu类的start_el函数进来
  4. }

新定义一个ashuwp_navwalker类,继承wp-includes/nav-menu-template.php文件中的Walker_Nav_Menu,然后将Walker_Nav_Menu类的start_el函数直接复制进去,复制完后,如下:

  1. //定义ashuwp_navwalker类,继承wp-includes/nav-menu-template.php文件中的Walker_Nav_Menu
  2. class ashuwp_navwalker extends Walker_Nav_Menu {
  3.     //在中间添加函数,直接复制Walker_Nav_Menu类的start_el函数进来
  4.     function start_el( &$output$item$depth = 0, $args = array(), $id = 0 ) {
  5.         $indent = ( $depth ) ? str_repeat"\t"$depth ) : '';
  6.         $class_names = $value = '';
  7.         $classes = empty$item->classes ) ? array() : (array$item->classes;
  8.         $classes[] = 'menu-item-' . $item->ID;
  9.         $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter$classes ), $item$args ) );
  10.         $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
  11.         $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item$args );
  12.         $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
  13.         $output .= $indent . '<li' . $id . $value . $class_names .'>';
  14.         $atts = array();
  15.         $atts['title']  = ! empty$item->attr_title ) ? $item->attr_title : '';
  16.         $atts['target'] = ! empty$item->target )     ? $item->target     : '';
  17.         $atts['rel']    = ! empty$item->xfn )        ? $item->xfn        : '';
  18.         $atts['href']   = ! empty$item->url )        ? $item->url        : '';
  19.         $atts = apply_filters( 'nav_menu_link_attributes', $atts$item$args );
  20.         $attributes = '';
  21.         foreach ( $atts as $attr => $value ) {
  22.             if ( ! empty$value ) ) {
  23.                 $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
  24.                 $attributes .= ' ' . $attr . '="' . $value . '"';
  25.             }
  26.         }
  27.         $item_output = $args->before;
  28.         $item_output .= '<a'. $attributes .'>';
  29.         $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
  30.         $item_output .= '</a>';
  31.         $item_output .= $args->after;
  32.         $output .= apply_filters( 'walker_nav_menu_start_el', $item_output$item$depth$args );
  33.     }
  34. }

步骤三:改造ashuwp_navwalker类中的start_el函数。

1.在start_el函数开头,定义一个静态数组变量,用来计数,用数组可以支持多个菜单。注意数组中的初始值,需要支持多少个菜单,都需要手动加上,静态变量用来记每个输出的菜单里面的一级菜单的数量。

  1. //定义ashuwp_navwalker类,继承wp-includes/nav-menu-template.php文件中的Walker_Nav_Menu
  2. class ashuwp_navwalker extends Walker_Nav_Menu {
  3.     //在中间添加函数,直接复制Walker_Nav_Menu类的start_el函数进来
  4.     function start_el( &$output$item$depth = 0, $args = array(), $id = 0 ) {
  5.         //定义静态变量$top_level_count 数组中的值对应多个wp_nav_menu函数中的theme_location参数的值
  6.         static $top_level_count = array('ashuwp-menu'=>0,'ashuwp-nav'=>0);
  7.         //......

2.添加计算菜单中一级菜单数量的函数。该函数不需要放入类中,随便放在主题的functions.php文件的某一位置。

  1. //参数$menu_id为菜单id
  2. function ashuwp_count_top_level_menu_items($menu_id){
  3.     $count = 0;
  4.     $menu_items = wp_get_nav_menu_items($menu_id);
  5.     foreach($menu_items as $menu_item){
  6.         if($menu_item->menu_item_parent==0){
  7.             $count++;
  8.         }
  9.     }
  10.     return $count;
  11. }

3.重新定义$args-after的值,将下面的代码加入start_el函数中。

  1. /***add code****/
  2.         $args->after='';
  3.         if($item->menu_item_parent==0 and $top_level_count[$args->theme_location]!==null){ //Count top level menu items
  4.             $top_level_count[$args->theme_location]++; //Increment
  5.         }
  6.         $location_name = $args->theme_location;
  7.         if ( ( $locations = get_nav_menu_locations() ) && isset( $locations$location_name ] ) ) {
  8.             $main_nav = wp_get_nav_menu_object( $locations$location_name ] );
  9.             if($item->menu_item_parent==0  && $top_level_count[$args->theme_location]!=ashuwp_count_top_level_menu_items($main_nav->term_id)){
  10.                 $args->after= '<span class="menu_line">|</span>';
  11.             }
  12.         }
  13.         /*****add code*****/

做好1 3两个点之后, ashuwp_navwalker extends类如下:

  1. //定义ashuwp_navwalker类,继承wp-includes/nav-menu-template.php文件中的Walker_Nav_Menu
  2. class ashuwp_navwalker extends Walker_Nav_Menu {
  3.     //在中间添加函数,直接复制Walker_Nav_Menu类的start_el函数进来
  4.     function start_el( &$output$item$depth = 0, $args = array(), $id = 0 ) {
  5.         //定义静态变量$top_level_count 数组中的值对应多个wp_nav_menu函数中的theme_location参数的值
  6.         static $top_level_count = array('ashuwp-menu'=>0,'ashuwp-nav'=>0);
  7.         $indent = ( $depth ) ? str_repeat"\t"$depth ) : '';
  8.         $class_names = $value = '';
  9.         $classes =empty$item->classes ) ? array() : (array$item->classes;
  10.         $classes[] = 'menu-item-' . $item->ID;
  11.         $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter$classes ), $item$args ) );
  12.         $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
  13.         $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item$args );
  14.         $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
  15.         $output .= $indent . '<li' . $id . $value . $class_names .'>';
  16.         $atts = array();
  17.         $atts['title']  = ! empty$item->attr_title ) ? $item->attr_title : '';
  18.         $atts['target'] = ! empty$item->target )     ? $item->target     : '';
  19.         $atts['rel']    = ! empty$item->xfn )        ? $item->xfn        : '';
  20.         $atts['href']   = ! empty$item->url )        ? $item->url        : '';
  21.         $atts = apply_filters( 'nav_menu_link_attributes', $atts$item$args );
  22.         $attributes = '';
  23.         foreach ( $atts as $attr => $value ) {
  24.             if ( ! empty$value ) ) {
  25.                 $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
  26.                 $attributes .= ' ' . $attr . '="' . $value . '"';
  27.             }
  28.         }
  29.         /***add code****/
  30.         $args->after='';
  31.         if($item->menu_item_parent==0 and $top_level_count[$args->theme_location]!==null){ //Count top level menu items
  32.             $top_level_count[$args->theme_location]++; //Increment
  33.         }
  34.         $location_name = $args->theme_location;
  35.         if ( ( $locations = get_nav_menu_locations() ) && isset( $locations$location_name ] ) ) {
  36.             $main_nav = wp_get_nav_menu_object( $locations$location_name ] );
  37.             if($item->menu_item_parent==0  && $top_level_count[$args->theme_location]!=ashuwp_count_top_level_menu_items($main_nav->term_id)){
  38.                 $args->after= '<span class="menu_line">|</span>';
  39.             }
  40.         }
  41.         /*****add code*****/
  42.         $item_output = $args->before;
  43.         $item_output .= '<a'. $attributes .'>';
  44.         $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
  45.         $item_output .= '</a>';
  46.         $item_output .= $args->after;
  47.         $output .= apply_filters( 'walker_nav_menu_start_el', $item_output$item$depth$args );
  48.     }
  49. }

至此,就可以完成了。

 

懒人专用

将下列代码复制到你的主题的functions.php文件中

  1. function ashuwp_count_top_level_menu_items($menu_id){
  2.     $count = 0;
  3.     $menu_items = wp_get_nav_menu_items($menu_id);
  4.     foreach($menu_items as $menu_item){
  5.         if($menu_item->menu_item_parent==0){
  6.             $count++;
  7.         }
  8.     }
  9.     return $count;
  10. }
  11. class ashuwp_navwalker extends Walker_Nav_Menu {
  12.     function start_el( &$output$item$depth = 0, $args = array(), $id = 0 ) {
  13.         //根据实际增加和修改下面的数组
  14.         static $top_level_count = array('ashu-menu'=>0,'top-menu'=>0);
  15.         $indent = ( $depth ) ? str_repeat"\t"$depth ) : '';
  16.         $class_names = $value = '';
  17.         $classes = empty$item->classes ) ? array() : (array$item->classes;
  18.         $classes[] = 'menu-item-' . $item->ID;
  19.         /**
  20.          * Filter the CSS class(es) applied to a menu item's <li>.
  21.          *
  22.          * @since 3.0.0
  23.          *
  24.          * @param array  $classes The CSS classes that are applied to the menu item's <li>.
  25.          * @param object $item    The current menu item.
  26.          * @param array  $args    An array of arguments. @see wp_nav_menu()
  27.          */
  28.         $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter$classes ), $item$args ) );
  29.         $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
  30.         /**
  31.          * Filter the ID applied to a menu item's <li>.
  32.          *
  33.          * @since 3.0.1
  34.          *
  35.          * @param string The ID that is applied to the menu item's <li>.
  36.          * @param object $item The current menu item.
  37.          * @param array $args An array of arguments. @see wp_nav_menu()
  38.          */
  39.         $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item$args );
  40.         $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
  41.         $output .= $indent . '<li' . $id . $value . $class_names .'>';
  42.         $atts = array();
  43.         $atts['title']  = ! empty$item->attr_title ) ? $item->attr_title : '';
  44.         $atts['target'] = ! empty$item->target )     ? $item->target     : '';
  45.         $atts['rel']    = ! empty$item->xfn )        ? $item->xfn        : '';
  46.         $atts['href']   = ! empty$item->url )        ? $item->url        : '';
  47.         /**
  48.          * Filter the HTML attributes applied to a menu item's <a>.
  49.          *
  50.          * @since 3.6.0
  51.          *
  52.          * @param array $atts {
  53.          *     The HTML attributes applied to the menu item's <a>, empty strings are ignored.
  54.          *
  55.          *     @type string $title  The title attribute.
  56.          *     @type string $target The target attribute.
  57.          *     @type string $rel    The rel attribute.
  58.          *     @type string $href   The href attribute.
  59.          * }
  60.          * @param object $item The current menu item.
  61.          * @param array  $args An array of arguments. @see wp_nav_menu()
  62.          */
  63.         $atts = apply_filters( 'nav_menu_link_attributes', $atts$item$args );
  64.         $attributes = '';
  65.         foreach ( $atts as $attr => $value ) {
  66.             if ( ! empty$value ) ) {
  67.                 $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
  68.                 $attributes .= ' ' . $attr . '="' . $value . '"';
  69.             }
  70.         }
  71.         /***add code****/
  72.         $args->after='';
  73.         if($item->menu_item_parent==0 and $top_level_count[$args->theme_location]!==null){ //Count top level menu items
  74.             $top_level_count[$args->theme_location]++; //Increment
  75.         }
  76.         $location_name = $args->theme_location;
  77.         if ( ( $locations = get_nav_menu_locations() ) && isset( $locations$location_name ] ) ) {
  78.             $main_nav = wp_get_nav_menu_object( $locations$location_name ] );
  79.             if($item->menu_item_parent==0  && $top_level_count[$args->theme_location]!=ashuwp_count_top_level_menu_items($main_nav->term_id)){
  80.                 $args->after= '<span class="menu_line">|</span>';
  81.             }
  82.         }
  83.         /*****add code*****/
  84.         $item_output = $args->before;
  85.         $item_output .= '<a'. $attributes .'>';
  86.         /** This filter is documented in wp-includes/post-template.php */
  87.         $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
  88.         $item_output .= '</a>';
  89.         $item_output .= $args->after;
  90.         /**
  91.          * Filter a menu item's starting output.
  92.          *
  93.          * The menu item's starting output only includes $args->before, the opening <a>,
  94.          * the menu item's title, the closing </a>, and $args->after. Currently, there is
  95.          * no filter for modifying the opening and closing <li> for a menu item.
  96.          *
  97.          * @since 3.0.0
  98.          *
  99.          * @param string $item_output The menu item's starting HTML output.
  100.          * @param object $item        Menu item data object.
  101.          * @param int    $depth       Depth of menu item. Used for padding.
  102.          * @param array  $args        An array of arguments. @see wp_nav_menu()
  103.          */
  104.         $output .= apply_filters( 'walker_nav_menu_start_el', $item_output$item$depth$args );
  105.     }
  106. }

然后修改你的wp_nav_menu函数,添加walker参数

  1. <?php
  2. $args = array(
  3.     'depth'=>2, //支持二级菜单
  4.     'walker' => new ashuwp_navwalker(), //后面的ashuwp_navwolker是类名
  5.     'theme_location' => 'ashuwp-menu'
  6. );
  7. wp_nav_menu($args);
  8. ?>

已有0评论

暂时木有评论.

发表评论