Wordpress 主题开发中使用 wp_enqueue_script 引入 Bootstrap 的 JavaScript

在 WordPress 主题开发中，引入 JavaScript 脚本可以通过使用 wp_enqueue_script 函数实现。Bootstrap 是一个非常流行的前端框架，提供了许多有用的 JavaScript 组件和工具，它可以帮助我们很方便地实现一些常见的效果。

引入 Bootstrap JavaScript

使用 wp_enqueue_script 函数可以将 Bootstrap 的 JavaScript 文件引入到你的 WordPress 主题中。在主题的 functions.php 文件中可以添加如下代码：

function mytheme_load_scripts() {
    wp_enqueue_script( 'bootstrap', '//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js', array('jquery'), '5.1.3', true );
}

add_action( 'wp_enqueue_scripts', 'mytheme_load_scripts' );

代码解释：

• wp_enqueue_script 函数用于向 WordPress 加载一个指定的 JavaScript 文件。
• bootstrap 是脚本的句柄，用于后续的函数调用等。
• //cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js 是 Bootstrap 的 JavaScript 文件的地址。
• array('jquery') 表示该脚本依赖于 jQuery 库，所以需要在加载前先加载 jQuery。
• '5.1.3' 是该脚本的版本号，用于缓存和更新控制。
• true 参数表示将该脚本放在 body 标签底部。

优化引入的 Bootstrap 脚本

一般来说，Bootstrap 的 JavaScript 只会在某些情况下使用，比如在弹出 modal 、下拉菜单等组件时需要。所以在每个页面都直接加载整个 Bootstrap JavaScript 文件是不必要的。我们可以通过按需加载和拆分 Bootstrap 的 JavaScript 文件来优化这个问题。这里推荐使用 Bootstrap Native 库。

在 WordPress 中使用 Bootstrap Native 的方法与普通的 JavaScript 库一样，就是添加如下代码：

function mytheme_load_scripts() {
    wp_register_script( 'bootstrap', '//cdn.jsdelivr.net/npm/bootstrap.native@3.0.15/dist/bootstrap-native-v4.min.js', array('jquery'), '3.0.15', true );
    wp_enqueue_script( 'bootstrap' );
}

add_action( 'wp_enqueue_scripts', 'mytheme_load_scripts' );

需要注意的是，Bootstrap Native 并不依赖于 jQuery，所以将 'jquery' 参数去掉。并且在注册脚本时，需要使用 wp_register_script 函数，而不是直接使用 wp_enqueue_script 函数。

总结

在 WordPress 主题开发中，通过 wp_enqueue_script 函数引入 Bootstrap 的 JavaScript 可以帮助我们快速实现常用的前端效果。但是需要注意，加载整个 Bootstrap 的 JavaScript 会增加页面的加载时间，最好是使用按需加载或者拆分后的 Bootstrap Native 库。