wp_enqueue_style 和 wp_enqueue_script 的使用方法

更新日期:2014-11-10

這兩個用法可以說是一樣的方式,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 註解掉內建 javascript,並用 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' );

發佈留言