wordpress进阶教程(二十三):给菜单标签中添加自定义类属性

在制作wordpress主题实际应用中,在做一些菜单特效的时候,我们经常需要在输出的菜单中添加自定义的类,比如我们需要一个下面类似的菜单结构(在一级菜单的<li>标签中添加level1的类,在二级菜单的<li>标签中中添加level2的类,然后在含有子级菜单的菜单<li>标签中添加类haschildren):

  1. <ul>
  2. <li class="level1"><a href="http://ashuwp.com">阿树工作室一级菜单</a></li>
  3. <li class="haschildren level1"><a href="http://ashuwp.com">阿树工作室一级菜单(有下拉)</a>
  4. <ul class="sub-menu">
  5.     <li class="level2"><a href="http://ashuwp.com">阿树工作室二级菜单</a></li>
  6. </ul>
  7. </li>
  8. </ul>
  9. <!--上面的代码省略了wp默认输出的class类和id-->

wordperss使用wp_nav_menu函数输出菜单是不会有这个效果的,但是wp_nav_menu函数有个重要的参数:

  1. <?php
  2. $defaults = array(
  3.     'theme_location'  => '',
  4.     'menu'            => '',
  5.     'container'       => 'div',
  6.     'container_class' => '',
  7.     'container_id'    => '',
  8.     'menu_class'      => 'menu',
  9.     'menu_id'         => '',
  10.     'echo'            => true,
  11.     'fallback_cb'     => 'wp_page_menu',
  12.     'before'          => '',
  13.     'after'           => '',
  14.     'link_before'     => '',
  15.     'link_after'      => '',
  16.     'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
  17.     'depth'           => 0,
  18.     'walker'          => '' //该参数为类,可用来改变菜单的输出  ,默认为 Walker_Nav_Menu
  19. );
  20. wp_nav_menu( $defaults );
  21. ?>

要实现我们要的效果,第一步我们要为输出菜单中的walker参数准备一个类(将下面的代码加入到主题的functions.php中):

  1. /*******ashu_menu_walker继承类Walker_Nav_Menu***********/
  2. class ashu_menu_walker extends Walker_Nav_Menu{
  3.     function display_element( $element, &$children_elements$max_depth$depth=0, $args, &$output ) {
  4.         $id_field = $this->db_fields['id'];
  5.         if( isset($children_elements[$element->$id_field]) ) {
  6.             $classes = empty$element->classes ) ? array() : (array$element->classes;
  7.             $classes[] = 'haschildren';
  8.             $element->classes =$classes;
  9.         }
  10.         if( 0 == $depth ){
  11.             $classes = empty$element->classes ) ? array() : (array$element->classes;
  12.             $classes[] = 'level1';
  13.             $element->classes =$classes;
  14.         }
  15.         if( 1 == $depth ){
  16.             $classes = empty$element->classes ) ? array() : (array$element->classes;
  17.             $classes[] = 'level2';
  18.             $element->classes =$classes;
  19.         }
  20.         if( 2 == $depth ){
  21.             $classes = empty$element->classes ) ? array() : (array$element->classes;
  22.             $classes[] = 'level3';
  23.             $element->classes =$classes;
  24.         }
  25.         return parent::display_element( $element$children_elements$max_depth$depth$args$output );
  26.     }
  27. }

第二步骤,前台调用的时候设置walker参数为我们刚刚添加的类,示例:

  1. <?php
  2. $args = array(
  3.     'walker' => new ashu_menu_walker(), //注意是 new ashu_menu_walker();
  4.     'theme_location' => 'ashu-menu',
  5. );
  6. wp_nav_menu($args);
  7. ?>

这样输出菜单即为我们前面需要的效果。

已有2条评论

  1. 哈哈
    哈哈 : 回复

    3级菜单 的UL类 也都不同 LI都不同,开发个插件添加到框架里吧,可以填写上3级下拉菜单的每一级的 UL LI的 class的名称

  2. 刚哥笔记
    刚哥笔记 : 回复

    如果想去掉class=“sub-menu”呢,因为有了它,导航在ie9下显示不正常。只有ul和li都不要应用样式才能显示正常。

发表评论