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 載入方式,到這裡就結束了,謝謝觀賞~!掰~!
留言