在 WordPress 網站讀入 Bootstrap 的 CSS 或 JS

分享:
標籤: WordPress PHP bootstrap

現在應該不少人會使用 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 了。

 

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。