Question

我正在为我的WordPress网站使用bootstrap nav walker，但是下拉列表没有显示出来或折叠不起作用

// bootstrap wp导航栏代码

    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <a href="#" class="navbar-brand"><?php bloginfo('name'); ?></a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            
            <div class="navbar-nav ml-auto">
            <?php
wp_nav_menu( array(
    'menu'              => 'primary',
    'theme_location'    => 'primary',
    'depth'             => 3,
    'container'         => 'div',
    'container_id'      => 'navbarNavDropdown',
    'container_class'   => 'collapse navbar-collapse',
    'container_id'      => 'bs-example-navbar-collapse-1',
    'menu_class'        => 'nav navbar-nav',
    'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
    'walker'            => new WP_Bootstrap_Navwalker())
);
?>
            </div>
        </div>
    </nav>

//功能php文件

    <?php
// Register Nav Walker Class_alias
require_once('wp-bootstrap-navwalker.php');

//Theme support
function wpb_theme_setup() {
    //nav menu
    register_nav_menus(array(

        'primary' => __('Primary Menu')
    ));
}

add_action('after_setup_theme', 'wpb_theme_setup');

Answer 1

问题是因为我尝试从footer.php加载bootstrap css

我尝试使用此代码将其包含在function.php文件中

function abc_load_my_scripts() {
  wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js', array('jquery'));
  wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array('jquery'));
  wp_enqueue_script( 'boot3','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'abc_load_my_scripts', 999);

Answer 2

首先：转到 class-wp-bootstrap-navwalker.php 文件

寻找 $atts['data-toggle'] ="dropdown";

将其替换为 $atts['data-bs-toggle'] ="dropdown";

导航栏下拉菜单和折叠不起作用[wordpress +引导程序]

2 个答案: