更新日期:2021-10-14

這兩個用法可以說是一樣的方式,wp_enqueue_script 是用來載入 javascript 檔,wp_enqueue_style 是用來載入 css 檔。雖然我們可以在 header.php 中直接寫入要載入的檔案,但是官方建議使用這種方式來避免重複載入,也可以任意修改、覆蓋、刪除即將被加載的 javascript 檔和 css 檔。

用法如下:

語法

wp_enqueue_style( $handle, $src, $deps, $ver, $media );
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

wp_enqueue_script 參數說明

$handle:用於區別 script 名稱(string);
$src:javascript 檔案位置(string);
$deps:相關性,指此 javascript 必須在此 javascript 之前載入(array,非必需的);
$ver:幫 javascript 加註版本,留空白則使用當前 wordpress 版本號碼(string,非必需);
$in_footer:是否放置到網頁HTML底部載入(boolean,非必需)。

wp_enqueue_style 參數說明

$handle:用於區別 CSS 的名稱(string);
$src:CSS 檔案位置(string);
$deps:相關性,指此 CSS 必須在此 CSS 之前載入(array,非必需);
$ver:幫 CSS 加註版本,留空白則使用當前 wordpress 版本號碼(string,非必需);
$media:用於 CSS 的 media 參數值(string,非必需)。

程式範例

function theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

其他補充

1.使用系統內建的 javascript。

wp_enqueue_script( 'jquery' );

2.使用 wp_deregister_script 註解掉內建 jquery,並用 wp_register_script 重新註冊來使用自己的版本。

wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
wp_enqueue_script( 'jquery' );

3.偵測是否註冊,若未註冊再註冊一次

add_action( 'wp_enqueue_scripts', function(){
    if ( ! wp_script_is( 'jquery', 'enqueued' )) {
        wp_enqueue_script( 'jquery' );
    }
}, 10 );