javascript - WordPress - 如何仅将类添加到顶级导航链接

Question

我正在尝试在 WordPress 中创建以下菜单:

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown submenu">
       <a href="#" class="dropdown-toggle nav-active">Link</a>
    </li>
    <li class="dropdown submenu">
       <a href="#" class="dropdown-toggle">Link</a>
    </li>
    <li class="dropdown submenu">
       <a href="#" class="dropdown-toggle">Link</a>
    </li>
    <li class="dropdown submenu">
       <a href="#" class="dropdown-toggle">Link</a>
         <ul class="dropdown-menu other_dropdwn">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
         </ul>
    </li>
    <li class="dropdown submenu">
        <a href="#" class="dropdown-toggle">Link</a>
         <ul class="dropdown-menu other_dropdwn">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
         </ul>
    </li>
    <li class="dropdown submenu">
        <a href="#" class="dropdown-toggle">Link</a>
         <ul class="dropdown-menu">
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
         </ul>
    </li>
    <li><a href="#">Link</a></li>

到目前为止，这就是我想出的......

菜单本身嵌入在我的 header.php 中

<?php 
    wp_nav_menu( array(
    'theme_location' => 'primary-menu',
    'menu' => 'primary-menu',
    'container' => false,
    'container_class' => false,
    'container_id' => false,
    'menu_class' => 'nav navbar-nav navbar-right',
    'menu_id' => false,
    'depth' => 0,));
?>

我的functions.php页面

//Load Custom Menu Navigation
add_action( 'init', 'register_my_menus' );
function register_my_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( 'Primary Menu' ),
        )
    );
}

//Clean up Custom Menu by Removing Unecessary Tags
add_filter( 'nav_menu_item_id', 'wp_nav_menu_attributes_filter', 100, 1 );
add_filter( 'page_css_class', 'wp_nav_menu_attributes_filter', 100, 1 );
add_action( 'init', 'wp_nav_menu_attributes_filter' );
function wp_nav_menu_attributes_filter( $var ) {
    return is_array( $var ) ? array_intersect( $var, array( 'current-menu-item' ) ) : '';
}

//Remove Unecessary <li> Classes
add_filter( 'nav_menu_css_class', 'my_nav_menu_css_class' );
function my_nav_menu_css_class( $classes ) {
    $custom_classes = array();

    foreach ( $classes as $class ) {

        if ( $class == 'menu-item' ) {
            return $custom_classes;
        }
        $custom_classes[] = $class;
    }
}

//Add Custom Class to Navigation <a> Tags
add_filter( 'nav_menu_link_attributes', 'add_class_anchor_nav_primary', 10, 3 );
function add_class_anchor_nav_primary( $atts, $item, $args ) {
    //Check for Location of Menu
    if ( $args->theme_location == 'primary-menu' ) {
        // Add the Class
        $atts['class'] = 'dropdown submenu';
    }

    return $atts;
}

这是将类添加到每个标签，而我只需要它们位于链接的第一层，而不是下拉的子菜单项。任何意见都将不胜感激，TIA!

Answer 1

问题是 primary-menu 是完整的顶部菜单，因此这不适用于您的菜单项。试试这个:

add_filter( 'nav_menu_link_attributes', 'add_class_anchor_nav_primary', 10, 3 );
function add_class_anchor_nav_primary( $atts, $item, $args ) {
    if ( (int) $item->menu_item_parent === 0 ) {
        $class         = 'dropdown submenu';
        $atts['class'] = $class;
    }

    return $atts;
}

这会将您的类(class)添加到除下 zipper 接之外的所有主链接中。它之所以有效，是因为我们正在检查给定的项目是否有父项。如果不是(=== 0)，我们可以说这是一个非下 zipper 接。我已经测试过它并且有效。