Как добавить класс в тег qp_nav_menu <a>?

Question

Так что я бился над этим два дня. Мне просто нужно добавить загрузочный класс "nav-link" в мои теги в wp_nav_menu Вот что у меня сейчас есть.

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 в тег. Если я поменяю его на что-то другое, он будет работать нормально. У меня такое чувство, что в начальной загрузке есть конфликт.

Uncaught 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);