在 WordPress 網站讀入 Bootstrap 的 CSS 或 JS

現在應該不少人會使用 Bootstrap 來輔助開發網站，如果要在以 WordPress 架設的網站使用的話，是可以直接打開佈景主題的 head.php 的檔案，但比較不建議這麼做，WordPress 比較建議是在 functions.php 這隻檔案加上要讀入的外部資源，而如果要在隻檔案加上讀取外部資源的程式，更建議使用 Code Snippets 這個外掛來幫助撰寫讀取的程式碼。

Step 1

那這邊如果已經安裝好 Code Snippets 的話，接著就可以到 Bootstrap 的官網下載 CSS 及 JS 的程式碼，如果沒有要用到 Bootstrap 的 JS 的話是可以不用下載 JS 的部分。

Step 2

解壓縮後將 bootstrap.min.css 跟 bootstrap.min.js(如果有需要用到)上傳到網站的 wp-content/佈景主題名稱 的資料夾內。

Step 3

接著在後台管理頁面的左側找到程式碼片段，點選新增程式碼片段：

Step 4

貼入以下代碼：

function bootstrap_enqueue() {
	// 讀入 Bootstrap CSS
	wp_enqueue_style('bootstrap-css',get_template_directory_uri().'/bootstrap.min.css');
 
	// 讀入 Bootstrap js 如果有需要用到
	wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/bootstrap.min.js');
}
add_action('wp_enqueue_scripts', 'bootstrap_enqueue');

下面要勾選僅執行於網站前端。

存檔並啟用後，網站就會套用 Bootstrap 了。