如何在 WordPress 上使用 Bootstrap ？-牛奇网

在本文中，牛奇网将向您介绍如何在 WordPress 网站上使用 Bootstrap 框架。

检查 WordPress 是否已经加载 Bootstrap

WordPress 网站的插件和主题含有自己的代码，其中可能包含引用 Bootstrap 的代码行。如果网站已经加载了 bootstrap ，不要重复加载该脚本，以避免冲突。

要检查 WordPress 网站上是否已经加载了 Bootstrap，可以通过下面两种方式来检查。

使用 wp_script_is()

“wp_script_is()” 是 WordPress 的内置函数，用于检查网站上是否加载了某个脚本。要使用这个函数，需要知道该脚本的名称，脚本名称由在主题或插件代码中注册 Bootstrap 的开发人员定义。

if ( ! wp_script_is( 'bootstrap-js' ) ) {

// Integrate Boostrap

}

如果您知道该脚本的名称，则可以使用“wp_script_is()” 来判断网站是否加载了脚本，使用时将上例中的“boostrap-js”替换为 Bootstrap 脚本名称。

如果网站尚未使用 Bootstrap，那么就可以集成 Bootstrap 脚本。

如果不知道 Bootstrap 脚本名称，可以尝试在主题或插件文件中搜索 “boostrap”的。

在 Chrome 浏览器安装 Wappalyzer 来检测

Wappalyzer 是一个可在 Google Chrome 或 Firefox 浏览器上安装的扩展插件，可用以检查 WordPress 网站上安装的插件、框架或其他信息的工具。

在谷歌浏览器上安装了 Wappalyzer 后，会在谷歌浏览器地址栏右侧的工具栏中，显示 Wappalyzer 的图标，如果没有显示可以点击扩展程序图标，会弹出所有扩展程序的列表，找到 Wappalyzer 将其固定在地址栏。

要想查看一个网站的框架相关信息，可以在访问网站后，点击 Wappalyzer 图标，将打开一个窗口，列出网站上的内容管理系统、安装的插件、使用的框架、Web 服务器类型、编程语言和缓存技术等信息。

使用 Wappalyzer 也可以探测网站是否使用 Bootstrap 框架，但是该工具获得的结果不能保证 100% 准确。

将 Bootstrap 集成到 WordPress

要在 WordPress 中使用 Bootstrap 框架，需要下载 Bootstrap，并通过 FTP 客户端将该文件上传到服务器。

在 WordPress 中载入 Bootstrap，我们可以使用 “wp_enqueue_script()” 和 “wp_enqueue_style()” 函数。

以下是将 Bootstrap 添加到 WordPress 主题的函数：

function charger_bootstrap() {

wp_enqueue_script( 'bootstrap-js', get_stylesheet_directory_uri() . 'bootstrap/js/bootstrap.min.js', array( 'jquery' ), null, true );

wp_enqueue_style( 'bootstrap-css', get_stylesheet_directory_uri() . 'bootstrap/css/bootstrap.min.css' );

}

add_action('wp_enqueue_scripts', 'charger_bootstrap');

或者，如果想加载 Bootstrap 的 CDN ：

wp_enqueue_script( 'bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js', array( 'jquery' ), null, true );

wp_enqueue_style( 'bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css');

要在 WordPress 插件中载入 Bootstrap，可以使用下面的代码：

wp_enqueue_script( 'bootstrap-js',plugins_url( '/bootstrap/js/bootstrap.min.js', __FILE__ ), array( 'jquery' ), null, true );

wp_enqueue_style( 'bootstrap-css',plugins_url( '/bootstrap/css/bootstrap.min.css', __FILE__ ) );