admin管理员组

文章数量:1026989

I've this DOM here:

<ul class="sub-menu">
    <li id="menu-item-1424" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">
        <a href="#">Item</a>
    </li>
</ul>

What I need to do is, to add a custom class (has-ripple) to only the sub-menu > a items:

<ul class="sub-menu">
    <li id="menu-item-1424" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">
        <a href="#" class="has-ripple">Item</a>
    </li>
</ul>

This is what I've tried:

add_filter( 'nav_menu_link_attributes', 'nav_menu_link_class', 10, 3 );
function nav_menu_link_class( $atts, $item, $args ) {
    $class         = 'has-ripple';
    $atts['class'] = $class;

    return $atts;
}

This works but it also add the class to non-submenu a items outside of the dropdown. So how can I do this right?

I've this DOM here:

<ul class="sub-menu">
    <li id="menu-item-1424" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">
        <a href="#">Item</a>
    </li>
</ul>

What I need to do is, to add a custom class (has-ripple) to only the sub-menu > a items:

<ul class="sub-menu">
    <li id="menu-item-1424" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">
        <a href="#" class="has-ripple">Item</a>
    </li>
</ul>

This is what I've tried:

add_filter( 'nav_menu_link_attributes', 'nav_menu_link_class', 10, 3 );
function nav_menu_link_class( $atts, $item, $args ) {
    $class         = 'has-ripple';
    $atts['class'] = $class;

    return $atts;
}

This works but it also add the class to non-submenu a items outside of the dropdown. So how can I do this right?

  • php
  • menus
  • navigation
Share Improve this question asked Mar 26, 2019 at 15:03 Johnny97Johnny97 2147 silver badges18 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 2

To be applied to sub-menu items only, your code should be:

add_filter( 'nav_menu_link_attributes', 'nav_menu_link_class', 10, 2 );
function nav_menu_link_class( $atts, $item ) {
    if( !$item->has_children && $item->menu_item_parent > 0 ) {
        $class         = 'has-ripple';
        $atts['class'] = $class;
    }

    return $atts;
}

Try this : Documentation

add_filter( 'nav_menu_link_attributes', 'nav_menu_link_class', 10, 4 );

function nav_menu_link_class(  $atts, $item, $args, $depth ) {

      if ( 0 !== $depth ) {
         $class         = 'has-ripple';
         $atts['class'] = $class;
      }
    return $atts;
}

I hope this may help.

I've this DOM here:

<ul class="sub-menu">
    <li id="menu-item-1424" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">
        <a href="#">Item</a>
    </li>
</ul>

What I need to do is, to add a custom class (has-ripple) to only the sub-menu > a items:

<ul class="sub-menu">
    <li id="menu-item-1424" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">
        <a href="#" class="has-ripple">Item</a>
    </li>
</ul>

This is what I've tried:

add_filter( 'nav_menu_link_attributes', 'nav_menu_link_class', 10, 3 );
function nav_menu_link_class( $atts, $item, $args ) {
    $class         = 'has-ripple';
    $atts['class'] = $class;

    return $atts;
}

This works but it also add the class to non-submenu a items outside of the dropdown. So how can I do this right?

I've this DOM here:

<ul class="sub-menu">
    <li id="menu-item-1424" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">
        <a href="#">Item</a>
    </li>
</ul>

What I need to do is, to add a custom class (has-ripple) to only the sub-menu > a items:

<ul class="sub-menu">
    <li id="menu-item-1424" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">
        <a href="#" class="has-ripple">Item</a>
    </li>
</ul>

This is what I've tried:

add_filter( 'nav_menu_link_attributes', 'nav_menu_link_class', 10, 3 );
function nav_menu_link_class( $atts, $item, $args ) {
    $class         = 'has-ripple';
    $atts['class'] = $class;

    return $atts;
}

This works but it also add the class to non-submenu a items outside of the dropdown. So how can I do this right?

  • php
  • menus
  • navigation
Share Improve this question asked Mar 26, 2019 at 15:03 Johnny97Johnny97 2147 silver badges18 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 2

To be applied to sub-menu items only, your code should be:

add_filter( 'nav_menu_link_attributes', 'nav_menu_link_class', 10, 2 );
function nav_menu_link_class( $atts, $item ) {
    if( !$item->has_children && $item->menu_item_parent > 0 ) {
        $class         = 'has-ripple';
        $atts['class'] = $class;
    }

    return $atts;
}

Try this : Documentation

add_filter( 'nav_menu_link_attributes', 'nav_menu_link_class', 10, 4 );

function nav_menu_link_class(  $atts, $item, $args, $depth ) {

      if ( 0 !== $depth ) {
         $class         = 'has-ripple';
         $atts['class'] = $class;
      }
    return $atts;
}

I hope this may help.

本文标签： phpHow can I add a custom class to only nav submenu gt li gt a items in WordPress

版权声明：本文标题：php - How can I add a custom class to only nav sub-menu &gt; li &gt; a items in WordPress? 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745656546a2161628.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。