WordPress 如何引用 Bootstrap 的 CSS 及 JS 档案制作精美画面

Bootstrap 是全球最流行的前端开发工具，可以快速设计及自定义响应式网站。而 WordPress 也是全球最热门的架站工具，这次要教学如何在 WordPress 引用 Bootstrap 档案，制作精美画面。

在 WordPress 要引用 Javascript 和 CSS 有许多种方式，而 WordPress 官方最推荐的方式是使用专用函式来载入档案，这样是确保网站保持高效能及避免重复载入。

在我过去用了 Bootstrap 做了很多网站，例如云投资，大量用了 Bootstrap 样版设计画面。
觉得这样好用的设计样版，不放在 WordPress 就太可惜了。

可是当我选择 WordPress 布景主题之後，发现它并没有使用 Bootstrap 套件，所以这次就来试着把 Bootstrap 引用在布景主题内。

下载 Bootstrap 最新版本

要引用 Bootstrap 主要有 2 种方法，一种不下载档案，直接引用 CDN 网址。另一种就是下载原始档跟网站放在一起，直接引用网站内档案。

备注:
CDN 指的是档案在网路上，只要网址就可以，CDN 还会因应地理为位置，自动选择距离较近的载点。

我个人是推荐直接下载档案放到网站内，一来可以避免 CDN 网址发生错误，二来也方便自定修改档案内容。

下载 Bootstrap 就直接下载最新版本，目前是 5.1 版本，如果将来有出新版本，记得选新版本。

Bootstrap 官网: https://getbootstrap.com/
Bootstrap 5.1 下载网页: https://getbootstrap.com/docs/5.1/getting-started/download/

打开下载网页，找到「Compiled CSS and JS」，点击「Download」。

下载解压缩後，只有 css 和 js 目录。

打开 css 目录，档案很多，而我们这次只会用到 bootstrap.min.css 和 bootstrap.min.css.map 两个档案。
bootstrap.min.css 是主要档案，而 bootstrap.min.css.map 是让网页开发者工具快速找到设定值及行数。

再打开 js 目录，我们会使用到的是 bootstrap.min.js 和 bootstrap.min.js.map。
bootstrap.min.js 是主要档案，而 bootstrap.min.js.map 同样是让网页开发者工具快速对应行数。

这些档案是接下来要上传至网站的档案。

Bootstrap 优点介绍

如果没用过 Bootstrap 的话，那一定要认识一下。我整理一些优点。

1. 针对常见网页元素，例如按钮、下拉、表单、讯息等功能，设计好精美的现代风格，可以直接使用。可以在官网文件直接找范例。
2. 针对行动装置浏览者增加，Bootstrap 内建直接对所有元件设计 RWD 效果，同一份网页同时适用在电脑及行动装置上浏览。
3. 网路上有众多以 Bootstrap 设计的专业主题样版可以直接使用，例如 Bootstrap Themes, Strap Bootstrap, AdminLTE。当我要设计新网页时，都是先选好 Bootstrap 主题样版後，就可以开始写程序开发网站了。

上传 Bootstrap 档案放置布景主题内

接下来要把刚刚下载的 Bootstrap 档案，放在布景主题内。

安装 File Manager 外挂

首先安装外挂 File Manager。
在後台安装外挂的地方，输入 File Manager，找到此外挂後安装。

找到主题目录名称

可能你同时下载很多布置主题，但也只有一个在使用而已，这里是教学怎麽知道布景主题名称，好方便後续找到对应的目录。

打开「外观 > 布景主题」，记一下目前在使用的布景主题名称。我示范的名称是 “BusinessDeal”。

开启布景主题目录

在左边选单有「WP File Manager」，打开後找到布景主题目录。
在 WordPress 目录内找「wp-content > themes > {布景主题名称}」。
在目录内会看到「css」及「js」两个目录。

上传 bootstrap CSS 档案

先进入「css」目录，点功能列的「Upload files」。

选择「SELECT FILES」。

选择刚刚下载 Bootstrap 目录下的「css」目录的 “bootstrap.min.css” 及 “bootstrap.min.css.map” 两个档案。

上传档案至网站内。

上传 Bootstrap Javascript 档案

回到上一层目录，切换目录到「js」目录，一样按上面功能列的「Upload files」。

选择「SELECT FILES」。

选择刚刚下载 Bootstrap 目录下的「js」目录的 “bootstrap.min.js” 及 “bootstrap.min.js.map” 两个档案。

上传至网站。

引用 Javascript 及 CSS 函式

这里要将刚刚放上服务器的档案，注册Javascript 及 CSS在布景主题内的 区域内。

安装 Code Snippets

安装 Code Snippets 是为了执行 WordPress 引用 Script 及 CSS 的专用函式。

在後台安装外挂地方输入「Code Snippets」，安装此外挂。

建立引用 Bootstrap 程序码

安装後在左边功能列会出现「Snippets」，打开後，在上面执行「Add New」。

在主题位置输入 “引用 Bootstrap CSS & Javascript”
在「Code」内输入语法:

function bootstrap_enqueue() {
	// 引用 Bootstrap CSS
	wp_enqueue_style('bootstrap-css',get_template_directory_uri().'/css/bootstrap.min.css');

	// 引用 Bootstrap scripts
	wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js');
}
add_action('wp_enqueue_scripts', 'bootstrap_enqueue',80);

在下面勾选「Only run on site front-end」。

程序码说明:

wp_enqueue_style(): 引用 CSS 档案。取得布置主题路径下的 CSS 档案。

wp_enqueue_script(): 引用 Javascript 档案。取得布置主题路径下的 JS 档案。

add_action: 让功能运作起来。
参数1: “wp_enqueue_scripts” 触发引用 Script 及 CSS 。
参数2: “bootstrap_enqueue” 对应上面的 function 名称。
参数3: “80” 是调整优先权，预设值为 10，数字愈大排最後面，因为我的主题会引用 jQuery，而 Bootstrap 要跑在jQuery 後面，所以要设超过 10 排在 jQuery 後面。

get_template_directory_uri(): 是取得主题的路径，因为我们刚刚把 Script 及 CSS 都放在主题里面。

注意:
要运行 Bootstrap Javascript 是需要 jQuery 做底层引用的，因为我的主题里面已经有用到 jQuery 了，所以我只额外引用了 Bootstrap 的 CSS 及 JS，如果你发现引用後没有执行，可检查是否已引用 jQuery。

建立 RWD 测试页面

这里我们建一个测试文章，在文章编辑内，选择「文字」，输入一些 Bootstrap 语法。

我测试的语法是从官网复制一些语法来使用。

我测试语法是：

<p>Grid 展示</p>
<div class="row">
    <div class="col-sm" style='border: 1px solid'>
      One of three columns
    </div>
    <div class="col-sm" style='border: 1px solid'>
      One of three columns
    </div>
    <div class="col-sm" style='border: 1px solid'>
      One of three columns
    </div>
  </div>
<br>
<p>Table 展示</p>
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<p>Alert 展示</p>
<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>

先切换至「文字」就可以输入 HTML 语法。

我的画面是使用 Classic Editor (传统编辑器)  。
如果你是区块编辑器可选择「编辑 HTML 程序码」输入语法。

电脑版执行画面

输入以上语法後，在画面上就可以呈现 Bootstrap 的设计风格。

我自己最常用 Grid 来设计我的画面，让电脑版看到可以横向展示。
当在手机浏览时，又可以转为直向排列。

这是在手机浏览的画面。
Grid 是设计 RWD 很好用的语法，在手机上可以自动排列适合的位置。

检视原始码

在网页测试页按 打开原始码，在 之间，看一下引用 Javascript 及 CSS 的位置。
会看到正确引用了 Javascript 及 CSS。
其中特别注意的是 bootstrap.min.js 需要在 jquery.min.js 之後，这样才会正确，不然 bootstrap.min.js 就会抛出错误喔。
调整方法就是刚刚执行add_action() 输入的 80 参数。

重点整理

1. WordPress 引用 Bootstrap 後，可以设计出更好看的画面
2. 下载 Bootstrap 档案放置在布景主题内
3. 使用 WordPress 函式载入 CSS 及 JS 在 区域内

相关学习文章

[ASP.Net MVC] 如何套用 Bootstrap 网页设计样版 SB Admin 2 开发网站管理介面 (附范例)