WordPress引入Bootstrap 5 JS后Carousel/Dropdown组件失效问题

核心问题 #

你同时入队了bootstrap.bundle.min.js和bootstrap.min.js，这两个文件功能重叠引发冲突：

• Bootstrap 5的bootstrap.bundle.min.js已经包含了Popper.js（Dropdown、Carousel等组件依赖的定位/交互库），是完整的独立运行包。
• bootstrap.min.js是不含Popper的精简版本，同时加载两个文件会导致JS变量重复定义、组件初始化逻辑被破坏，最终依赖Popper的Dropdown、Carousel失效，而Modal组件因不依赖Popper仍能正常运行。

修复步骤 #

1. 移除bootstrap.min.js的注册与入队操作，仅保留bootstrap.bundle.min.js即可满足所有Bootstrap组件的运行需求。
2. 可选：补充样式注册时的版本号参数，便于后续版本管理。

修改后的代码 #

function theme_assets()
{
    // 样式文件注册
    wp_register_style('style-CSS', get_stylesheet_uri(), array(), 'all');
    wp_register_style('bootstrap-CSS', get_template_directory_uri() . '/assets/css/bootstrap.rtl.min.css', array(), '5.0', 'all');
    wp_register_style('owl-CSS', get_template_directory_uri() . '/assets/css/owl.carousel.css', array(), 'all');
    wp_register_style('main-CSS', get_template_directory_uri() . '/assets/css/main.css', array(), 'all');

    // 脚本文件注册
    wp_register_script('bootstrap-bundle-JS', get_theme_file_uri('/assets/js/bootstrap.bundle.min.js'), array(), '5.0', true);
    wp_register_script('script-JS', get_theme_file_uri('/assets/js/script.js'), array('jquery'), '1.0', true);
    
    // 入队所有资源
    wp_enqueue_style('style-CSS');
    wp_enqueue_style('bootstrap-CSS');
    wp_enqueue_style('owl-CSS');
    wp_enqueue_style('main-CSS');

    wp_enqueue_script('bootstrap-bundle-JS');
    wp_enqueue_script('script-JS');
}

add_action('wp_enqueue_scripts', 'theme_assets');

额外验证点 #

• 确认模板中组件的HTML属性符合Bootstrap 5规范，比如Dropdown需带有data-bs-toggle="dropdown"，Carousel需设置data-bs-ride="carousel"等（静态开发正常的话这部分通常没问题）。
• 清除浏览器缓存后重新加载页面，确保新的脚本文件生效。

内容的提问来源于stack exchange，提问作者Alipvd