如何将类添加到 wp_nav_menu <a> 标签？

Question

所以这两天我一直在自责。我只需要使用 wp_nav_menu 将引导程序“nav-link”类添加到我的标签中。这是我目前得到的。

header.php

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

functions.php

//Load Custom Menu Navigation
add_action( 'init', 'wpb_custom_new_menu' );
function wpb_custom_new_menu() {
    register_nav_menu( 'my-custom-menu', __( 'My Custom 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_filter( 'nav_menu_link_attributes', 'custom_nav_menu_link_attributes', 10, 4 );
function custom_nav_menu_link_attributes( $atts, $item, $args, $depth ) {
    if ( $args->theme_location == 'my-custom-menu' ) {

        $class = "nav";

        // Make sure not to overwrite any existing classes
        $atts['class'] = ( ! empty( $atts['class'] ) ) ? $atts['class'] . ' ' . $class : $class;
    }

    return $atts;
}

这是我得到的带有错误代码的当前输出：

输出

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul id="menu-main-navigation-menu" class="navbar-nav ml-auto"><li class="nav-item"><a href="http://localhost/" class="nav-link">Home</a></li>
        <li class="nav-item"><a href="http://localhost/test-article/" aria-current="page" class="nav-link">Test Article</a></li>
    </ul>
</div>

这是我收到的错误。我只在尝试将 nav-link 类传递给标签时收到此错误。如果我将它更改为任何其他类，它工作正常。我感觉引导程序中存在一些冲突。

未捕获的 DOMException：无法执行“querySelector” “文档”：“http://localhost/”不是有效的选择器。

所以这就是我所在的位置，如果需要更多信息或者我想含糊其辞，请告诉我，我会在必要时进行更新，TIA！

下面是我正在寻找的类似结果：

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a class="nav-link active" href="#top">Home<span class="sr-only">(current)</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Articles</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
    </ul>
</div>

所以这就是解决方案。我的 bootstrap.min.js 文件中有一段代码反映了以下内容。

document.querySelector(e)?e:null}

更改为以下为我修复了它

document.querySelector("[e]")?e:null}

Answer 1

试试这个

function add_class_anchor_nav($atts, $item, $args)
{
    // check if the item is in the primary menu
    if ($args->theme_location == 'primary') {
        // add the class
        $atts['class'] = 'nav-link';
    }
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_class_anchor_nav', 10, 3);