wordpress和bootstrap实现导航条_wordress elementor 导航栏怎么像bootstrap一样-CSDN博客

前言：是不是有一种办法可以直接去掉默认的ul li标签，然后在直接通过link_before和link_after直接实现添加自己的类和标签，这样就不用通过过滤器和函数来实现了，但是我这个没有用这种方法，不知道怎么操作，所以我用了最笨的方法，其实网上用插件比较简单。如果有说得不对的地方，请指正。
functions.php

<?php
function simple_theme_setup()
{
    //添加缩略图支持
    add_theme_support('post_thumbnails');
    // 自定义菜单
    register_nav_menus(array(
        'one_menu' => _('第一个菜单栏'),
        'two_menu' => _('第二个菜单栏')
    ));
}
add_action('after_setup_theme', 'simple_theme_setup');
function menu_args()
{
    if (function_exists('wp_nav_menu')):
        wp_nav_menu(
         array(
                'menu'=>'one_menu',
                'depth'=> 0, // 1 = no dropdowns, 2 = with dropdowns.
                'container'=> 'div',
                'container_class' => 'collapse navbar-collapse',
                'container_id'    => 'nav-top',
                'menu_class'      => 'navbar-nav mr-auto',
//                'link_before'=>'<li class="nav-item"><a href="#"> ',
//                'link_after'=>'</a></li>',
                'walker'          => ''
            )
        );

    endif;
}
//去掉默认的类和id还有class
add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
function my_css_attributes_filter($var) {
    //添加类
    return is_array($var) ? array('nav-link nav-item') : '';
}
//操作a标签
function xintheme_menu_link_atts( $atts, $item, $args ) {
    //给a标签添加类
    $atts['class'] = 'nav-link text-dark';
    //给a标签添加属性
//    $atts['data-link-alt'] = $item->title;
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'xintheme_menu_link_atts', 10, 3 );

index.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?php bloginfo('name') ?></title>
    <link rel="stylesheet" href="<?php bloginfo('template_directory')?>/style.css">
    <link rel="stylesheet" href="<?php bloginfo('template_directory') ?>/css/bootstrap-4.0.0.css">
    <script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/bootstrap-4.0.0.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/popper.min.js"></script>
</head>
<style>
</style>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-top">
        <span class="navbar-toggler-icon"></span>
    </button>
    <?php
    menu_args();
    ?>
</nav>
</body>
<script>
    $('.navbar-nav>li').eq(0).addClass('active');
//    $('.navbar-nav>li>a').addClass('text-dark');
</script>
</html>