Put class on <a> instead li

时间：2018-07-30 作者：titimi

我将模板集成到Wordpress主题中。但是我的菜单有点问题<菜单随课程一起提供<li> 喜欢<li class="nav-link"> 如果激活<li class="nav-link active"> 但我想<a class="nav-link"> 如果激活<a class="nav-link active"> 我用过沃克。

这是我的菜单：

<nav class="collapse">
<ul class="nav nav-pills" id="mainNav">
<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-14 nav-link">
    <a href="http://mydom.com/">Accueil</a>
</li>
<li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85 nav-link">
    <a href="http://mydom.com/a-propos/">A propos</a>
</li>
<li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-97 dropdown nav-link">
    <a href="http://mydom.com/blog/" data-toggle="dropdown" data-target="#" class="dropdown-toggle">Blog<b class="caret"></b>
    </a>
  <ul class="dropdown-menu">
      <li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98 nav-link">
      <a href="http://mydom.com/sample-page/">Sample Page</a>
      </li>
  </ul>
</li>
<li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-77 current_page_item menu-item-79 nav-link nav-link active">
    <a href="http://mydom.com/contact/">Contact</a>
</li>
</ul>

现在我希望它看起来像这样：

<nav class="collapse">
<ul class="nav nav-pills" id="mainNav">
<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-14">
    <a href="http://mydom.com/" class="nav-link">Accueil</a>
</li>
<li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85">
    <a href="http://mydom.com/a-propos/" class="nav-link">A propos</a>
</li>
<li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-97 dropdown">
    <a href="http://mydom.com/blog/" data-toggle="dropdown" data-target="#" class="dropdown-toggle nav-link">Blog<b class="caret"></b></a>
  <ul class="dropdown-menu">
      <li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98">
      <a href="http://mydom.com/sample-page/" class="nav-link">Sample Page</a></li>
  </ul>
</li>
<li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-77 current_page_item menu-item-79">
    <a href="http://mydom.com/contact/" class="nav-link active">Contact</a>
</li>
</ul>

我使用这个类walker和函数：

class mydom_nav_walker extends Walker_Nav_Menu {    
function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\\t", $depth);
    $output .= "\\n$indent<ul class=\\"dropdown-menu\\">\\n";
}
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    $indent = ( $depth ) ? str_repeat( "\\t", $depth ) : \'\';

    $class_names = $value = \'\';

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $classes[] = \'menu-item-\' . $item->ID;
    if ($args->has_children && $depth > 0) {
        $classes[] = \'dropdown-submenu\';
    } else if($args->has_children && $depth === 0) {
        $classes[] = \'dropdown\';
    }
    $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 .\'>\';

    $attributes  = ! empty( $item->attr_title ) ? \' title="\'  . esc_attr( $item->attr_title ) .\'"\' : \'\';
    $attributes .= ! empty( $item->target )     ? \' target="\' . esc_attr( $item->target     ) .\'"\' : \'\';
    $attributes .= ! empty( $item->xfn )        ? \' rel="\'    . esc_attr( $item->xfn        ) .\'"\' : \'\';
    $attributes .= ! empty( $item->url )        ? \' href="\'   . esc_attr( $item->url        ) .\'"\' : \'\';
    $attributes .= ($args->has_children)        ? \' data-toggle="dropdown" data-target="#" class="dropdown-toggle"\' : \'\';

    $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 .= ($args->has_children && $depth == 0) ? \'<b class="caret"></b></a>\' : \'</a>\';
    $item_output .= $args->after;

    $output .= apply_filters( \'walker_nav_menu_start_el\', $item_output, $item, $depth, $args );
}
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {

    if ( !$element )
        return;

    $id_field = $this->db_fields[\'id\'];

    //display this element
    if ( is_array( $args[0] ) )
        $args[0][\'has_children\'] = ! empty( $children_elements[$element->$id_field] );
    else if ( is_object( $args[0] ) ) 
        $args[0]->has_children = ! empty( $children_elements[$element->$id_field] ); 
    $cb_args = array_merge( array(&$output, $element, $depth), $args);
    call_user_func_array(array($this, \'start_el\'), $cb_args);

    $id = $element->$id_field;

    // descend only when the depth is right and there are childrens for this element
    if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {

        foreach( $children_elements[ $id ] as $child ){

            if ( !isset($newlevel) ) {
                $newlevel = true;
                //start the child delimiter
                $cb_args = array_merge( array(&$output, $depth), $args);
                call_user_func_array(array($this, \'start_lvl\'), $cb_args);
            }
            $this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
        }
        unset( $children_elements[ $id ] );
    }

    if ( isset($newlevel) && $newlevel ){
        //end the child delimiter
        $cb_args = array_merge( array(&$output, $depth), $args);
        call_user_func_array(array($this, \'end_lvl\'), $cb_args);
    }
    //end this element
    $cb_args = array_merge( array(&$output, $element, $depth), $args);
    call_user_func_array(array($this, \'end_el\'), $cb_args);
}
}

function webriti_nav_menu_css_class( $classes ) {
    $classes[]  =   \'nav-link\';
    if ( in_array(\'current-menu-item\', $classes ) OR in_array( \'current-menu-ancestor\', $classes ) )
        $classes[]  =   \'nav-link active\';

    return $classes;
}

add_filter( \'nav_menu_css_class\', \'webriti_nav_menu_css_class\' );
在我的标题中，我这样调用菜单：

<nav class="collapse">
    <?php wp_nav_menu( array(
        \'theme_location\' => \'header-menu\',
        \'container\'=>false,
        \'walker\' => new mydom_nav_walker(),                             
        \'items_wrap\' => \'<ul class="nav nav-pills" id="mainNav">%3$s</ul>\'
    ) ); ?>
</nav>
谢谢你的帮助

1 个回复
最合适的回答,由SO网友:Krzysiek Dróżdż 整理而成

如果使用自定义Walker类，那么使用过滤器添加这些类是没有意义的。

让我们看看代码的这一部分：

$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 .\'>\';

$attributes  = ! empty( $item->attr_title ) ? \' title="\'  . esc_attr( $item->attr_title ) .\'"\' : \'\';
$attributes .= ! empty( $item->target )     ? \' target="\' . esc_attr( $item->target     ) .\'"\' : \'\';
$attributes .= ! empty( $item->xfn )        ? \' rel="\'    . esc_attr( $item->xfn        ) .\'"\' : \'\';
$attributes .= ! empty( $item->url )        ? \' href="\'   . esc_attr( $item->url        ) .\'"\' : \'\';
$attributes .= ($args->has_children)        ? \' data-toggle="dropdown" data-target="#" class="dropdown-toggle"\' : \'\';

$item_output = $args->before;
$item_output .= \'<a\'. $attributes .\'>\';
在第一行中调用过滤器，然后在中使用这些类<li> 要素

该片段的最后一行负责显示<a> 要素

下面是经过修改的函数（您不需要使用nav_menu_css_class 再过滤）：

function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    $indent = ( $depth ) ? str_repeat( "\\t", $depth ) : \'\';

    $class_names = $value = \'\';

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $classes[] = \'menu-item-\' . $item->ID;
    if ($args->has_children && $depth > 0) {
        $classes[] = \'dropdown-submenu\';
    } else if($args->has_children && $depth === 0) {
        $classes[] = \'dropdown\';
    }
    $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 .\'>\';

    $attributes  = ! empty( $item->attr_title ) ? \' title="\'  . esc_attr( $item->attr_title ) .\'"\' : \'\';
    $attributes .= ! empty( $item->target )     ? \' target="\' . esc_attr( $item->target     ) .\'"\' : \'\';
    $attributes .= ! empty( $item->xfn )        ? \' rel="\'    . esc_attr( $item->xfn        ) .\'"\' : \'\';
    $attributes .= ! empty( $item->url )        ? \' href="\'   . esc_attr( $item->url        ) .\'"\' : \'\';
    $attributes .= ($args->has_children)        ? \' data-toggle="dropdown" data-target="#" class="dropdown-toggle"\' : \'\';

    $a_classes = array(\'nav-link\');
    if ( in_array(\'current-menu-item\', $classes ) OR in_array( \'current-menu-ancestor\', $classes ) ) {
        $a_classes[]  =   \'active\';
    }
    $attributes .= ( ! empty( $a_classes ) ) ? \' class="\' . esc_attr( join( \' \', $a_classes) ) . \'"\' : \'\';

    $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 .= ($args->has_children && $depth == 0) ? \'<b class="caret"></b></a>\' : \'</a>\';
    $item_output .= $args->after;

    $output .= apply_filters( \'walker_nav_menu_start_el\', $item_output, $item, $depth, $args );
}

结束
标签： menus   walker   小码农  

相关推荐

Walker_Comment中的“$Depth”参数代表什么？

我正在尝试为我的注释编写一个自定义注释类，并且我已经尝试了很长一段时间来反构造代码，如下所示：class Custom_Comment_Walker extends Walker_Comment { var $tree_type = \'comment\'; var $db_fields = array( \'parent\' => \'comment_parent\', \'id\' => \'comment_ID\' ); // c