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” 'Document'：'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);

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

1 个答案: