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:

PHP
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 控制排序。

PHP
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 載入特定頁面

PHP
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 減少衝突的發生。

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

最後修改日期: 2024 年 4 月 5 日

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。