wp_enqueue_style 和 wp_enqueue_script 的使用方法

這兩個用法可以說是一樣的方式，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 );