将使用 jQuery 的 Bootstrap 5 包含到 WordPress 中答案

【问题标题】：Include Bootstrap 5 Using jQuery Into WordPress将使用 jQuery 的 Bootstrap 5 包含到 WordPress 中
【发布时间】：2021-04-27 00:04:12
【问题描述】：

我正在尝试从 Bootstrap 4.6 升级到 Bootstrap 5.0 到我的 WordPress 主题中。下面是我如何包含 BS 5、jQuery 和一些自定义 JS 文件。

function add_theme_scripts() {
    wp_enqueue_style( 'style', get_template_directory_uri() . '/static/style.css');

    wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/static/js/bootstrap.bundle.min.js', array('jquery') );
    wp_enqueue_script( 'script', get_template_directory_uri() . '/static/js/min/build.min.js', array() );
        }
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

这就是我在单独的文件中启动 jQuery 的方式：

jQuery( document ).ready( function( $ ) {
    // Do Something;
});

只要我使用的是 BS 4.6，一切都可以正常工作，但自从我升级到 BS 5 后，Accordion 组件 就不再工作了。它只有在我禁用 jQuery 时才有效。
我没有收到任何控制台错误。
我已根据新文档更新了所有 BS 组件。事实上，除了 Accordion 之外，其他所有功能都可以使用。
我知道 BS 5 与 Vanilla JS 配合得更好，但现在我需要 BS 5 和 jQuery。

关于如何实现这一点的任何想法？谢谢。

【问题讨论】：

一个快速而肮脏的测试是将您的bootstrap.bundle.min.js 加载到头部而不是页脚部分。我知道这很奇怪，但它确实发生了。有时，某些组件需要立即使用 javascript 文件才能正常工作。试试这样的：wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/static/js/bootstrap.bundle.min.js', array('jquery'), "5.1", false );。注意队列末尾的false。
@Ruvee ...感谢您的建议。我试过了，但不幸的是它没有用。如果我加载非缩小的 js wp_enqueue_script( 'script', get_template_directory_uri() . '/static/js/index.js', array() ); 非常奇怪。

标签： javascript jquery wordpress bootstrap-5

【解决方案1】：

我确定您知道此行末尾有一个错字：

wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/static/js/bootstrap.bundle.min.js', array('jquery) );

但以防万一，更正的是：

wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/static/js/bootstrap.bundle.min.js', array('jquery') );

【讨论】：

谢谢，我知道了……真实代码中没有错字