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

Question

所以我两天来一直在为此自责。我只需要将引导"导航链接"类添加到我的标签中wp_nav_menu。这是我目前得到的。

标头.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,
) );
?>

函数.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：无法在 上执行"查询选择器" "文档"："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);