WordPress 在客製化自己的佈景主題時，大家都是怎麼載入 CSS 與 JS 檔案，最快的方式就是直接在 header.php、footer.php 直接加上 CSS & JS 連結，就連 style.css 也是直接加🤣。正規來說應該都是要使用 Hook 來載入 CSS & JS，使用 Hook 的方式有個好處，就是可以控制 CSS & JS 載入特定頁面，可以減少在頁面上卦太多 CSS 互相干擾，還有 JS 上的互相衝突，正規來說沒用到就不要載入，可以減少不必要的麻煩😏，我說”正規”，恩~正規!
如何使用 Hook 載入 CSS & JS
下面是使用 Hook 載入 CSS & JS：
function dafatime_edu_scripts() {
wp_enqueue_style( 'edu-style', get_stylesheet_uri(), array(), '0.1' );
wp_enqueue_script( 'bootstrap5-js', get_template_directory_uri() . '/js/bootstrap.js', array(), 'v5.1.3', true );
//打發時間 https://dafatime.idv.tw
}
add_action( 'wp_enqueue_scripts', 'dafatime_edu_scripts' );如果發現頁面上沒有順利載入CSS表示，header.php 檔案沒有添加 wp_head() 函式。
如何使用 Hook 控制 CSS & JS 載入順序
大家都知道 CSS 與 JS 都有先後順序關係，載入時也可以在 Hook 控制排序。
function dafatime_edu_scripts() {
wp_enqueue_style( 'edu-style', get_stylesheet_uri(), array(), '0.1' );
wp_enqueue_style( 'bootstrap5-style', get_template_directory_uri() . '/css/bootstrap.css', array(), '5.1.3' );
//在這裡加入後續的 CSS
wp_enqueue_script( 'bootstrap5-js', get_template_directory_uri() . '/js/bootstrap.js', array(), 'v5.1.3', true );
wp_enqueue_script( 'dafatime-js', get_template_directory_uri() . '/js/dafatime.js', array(), 'v1.0', true );
//在這裡加入後續的 JS
//打發時間 https://dafatime.idv.tw
}
add_action( 'wp_enqueue_scripts', 'dafatime_edu_scripts' );就是在 Hook 內排序，是不是少了些什麼，上面在 JS 最後有個 true，這個是在控制 JS，是要載入 header.php 還是 fooder.php 中，true 是載入 footer.php，false 是載入 header.php，照上面方式部署 CSS & JS 是不是比直接，比寫在 header.php、fooder.php 檔案上更方便管理，不需要在兩個檔案來回調整。
如何使用 Hook 控制 CSS & JS 載入特定頁面
function dafatime_edu_scripts() {
wp_enqueue_style( 'edu-style', get_stylesheet_uri(), array(), '0.1' );
if (is_home()) {
wp_enqueue_style( 'bootstrap5-style', get_template_directory_uri() . '/css/bootstrap.css', array(), '5.1.3' );
}
//在這裡加入後續的 CSS
wp_enqueue_script( 'bootstrap5-js', get_template_directory_uri() . '/js/bootstrap.js', array(), 'v5.1.3', true );
if (is_front_page()) {
wp_enqueue_script( 'dafatime-js', get_template_directory_uri() . '/js/dafatime.js', array(), 'v1.0', true );
}
//在這裡加入後續的 JS
//打發時間 https://dafatime.idv.tw
}
add_action( 'wp_enqueue_scripts', 'dafatime_edu_scripts' );上面程式碼 is_home() 與 is_front_page() 來判斷頁面為首頁才會載入CSS 與 JS，但如果使用後台設定->閱讀使用靜態頁面當首頁，上面的 CSS 與 JS 是不會載入的，因為不會判斷成首頁，如果要讓判斷特定頁面可可以使用 is_front_page(‘頁面代稱’) 加上頁面代稱(slug)，使用代稱也可以是中文文字，這樣就可以在特定的頁面來載入 CSS 與 JS 減少衝突的發生。
function dafatime_edu_scripts() {
wp_enqueue_style( 'edu-style', get_stylesheet_uri(), array(), '0.1' );
if (is_home()) {
wp_enqueue_style( 'bootstrap5-style', get_template_directory_uri() . '/css/bootstrap.css', array(), '5.1.3' );
}
//在這裡加入後續的 CSS
wp_enqueue_script( 'bootstrap5-js', get_template_directory_uri() . '/js/bootstrap.js', array(), 'v5.1.3', true );
if (is_front_page('頁面代稱')) {
wp_enqueue_script( 'dafatime-js', get_template_directory_uri() . '/js/dafatime.js', array(), 'v1.0', true );
}
//在這裡加入後續的 JS
//打發時間 https://dafatime.idv.tw
}
add_action( 'wp_enqueue_scripts', 'dafatime_edu_scripts' );上面就使用 Hook 載入方式，到這裡就結束了，謝謝觀賞~!掰~!
留言