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

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

    • 珂李斯

    发布于

    by

    在制作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.         }
    26.         return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    27.     }
    28. }

    第二步骤，前台调用的时候设置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. ?>

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

    类别：WordPress 进阶教程、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT


  • 评论功能已经关闭!