WordPress 菜单如何仅将 class 添加到父元素？

Question

我想仅将 class 下拉列表添加到父元素。 我尝试向functions.php 添加一些代码，但这并没有解决我的问题。 可以用 jquery/js 做到这一点吗？

<nav class="container_menu">
    <ul class="reset">
        <li class="active "><a title="Home" href="/" class="class here">Home</a></li>

        <li class="menu "><a title="parent" href="/parent" class="class here">parent</a>
            <ul class="reset">
                <li class=""><a title="child1" href="/child/child1">child 1</a></li>
                <li class=""><a title=child2" href="/child/child2">Child 2</a></li>
            </ul>
        </li>

    </ul>
</nav>

Answer 1

不使用 jquery 或 javascript 或其他框架客户端。

您可以创建一个 function 并将过滤器添加到 wp_nav_menu_objects，如下所示：

/**
* Add a parent CSS class for nav menu items.
*
* @param array  $items The menu items, sorted by each menu item's menu order.
* @return array (maybe) modified parent CSS class.
*/
function wpdocs_add_menu_parent_class( $items ) {
    $parents = array();

    // Collect menu items with parents.
    foreach ( $items as $item ) {
        if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
            $parents[] = $item->menu_item_parent;
        }
    }

    // Add class.
    foreach ( $items as $item ) {
        if ( in_array( $item->ID, $parents ) ) {
            $item->classes[] = 'dropdown'; //here attach the class
        }
    }
    return $items;
}
add_filter( 'wp_nav_menu_objects', 'wpdocs_add_menu_parent_class' );

Answer 2

你可以做这样的事情来实现你想要的。 这会将 class“someclass”添加到任何在给定结构中包含“ul”元素的“li”元素。

var menu = document.querySelector('nav.container_menu > ul');
  menu.childNodes.forEach((node,idx)=>{
    // find child-nodes of the ul 
    if(node.tagName == 'LI'){
      var hasSubMenu = false;
      node.childNodes.forEach( (subnode,idx)=>{
        if(subnode.tagName == 'UL'){
          hasSubMenu = true;
        }
      });
      if(hasSubMenu){
        node.classList+=" someclass";
      }
    }
  });

However, as you are working with wordpress, I suggest you do it the way you are supposed to create menus, iE with Walker_Nav_Menu / Walker_Page (see https://codex.wordpress.org/Class_Reference/Walker_Page ) and wp_nav_menu() (see https://developer.wordpress.org/reference/functions/wp_nav_menu/ ）。

经过快速搜索，我认为这几乎可以详细解释它：

https://www.ibenic.com/how-to-create-wordpress-custom-menu-walker-nav-menu-class/

Answer 3

您可以使用nav_menu_link_attributes过滤器来修改<a>属性。

对于您的情况，您可以使用以下代码：

function add_classname_to_parent_nav_link($atts, $item) {

    // add class only on parent
    if($item->menu_item_parent == 0) {
        $atts['class'] = 'your-class-name';
    }   
    return $atts;   
}
add_filter('nav_menu_link_attributes', 'add_classname_to_parent_nav_link', 10, 2);