WordPress 插件或主題載入 CSS & JS 檔案

將插件或主題載入 CSS & JS 檔案

CSS與JS在網站中可說是不可或缺的資源，我們在進行插件開發的時候，會面臨到如何載入CSS&JS，WordPress 設計了一個勾 wp_enqueue_scripts ，專門處理載入CSS&JS資源，再利用wp_enqueue_script & wp_enqueue_style 載入，但是載入會有先後順序之分，以下範例介紹，如何設定依賴的資源。

在插件中：

在插件中用 plugins_url()  來取得當前插件的路徑：

plugins_url( '/js/script.js' , __FILE__ )

Plugin 載入 JS

載入Javascript ， 並依賴 jquery & jquery-ui-tabs

/**
* 
* v123 DEV
* https://v123.tw
* 
*/
function my_scripts_method() {
 wp_enqueue_script( 'newscript', plugins_url( '/js/script.js' , __FILE__ ), array( 'jquery' , 'jquery-ui-tabs' ) );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Plugin 載入 CSS

載入CSS， 並依賴 main_css

/**
* 
* v123 DEV
* https://v123.tw
* 
*/
function my_css_method() {
 wp_enqueue_style('theme-override', plugins_url( '/css/style.css' , __FILE__ ) , array( 'main_css' ), '0.1.0', 'all');
}
add_action( 'wp_enqueue_scripts', 'my_css_method' );

主題：

在主題中用 get_stylesheet_directory_uri()  來取得當前主題的路徑：

get_stylesheet_directory_uri() . '/js/myscript.js'

主題中載入 JS

載入Javascript 並依賴 jquery & jquery-ui-tabs

/**
* 
* v123 DEV
* https://v123.tw
* 
*/
function my_scripts_method() {
 wp_enqueue_script( 'newscript', get_stylesheet_directory_uri() . '/js/script.js' , array( 'jquery' , 'jquery-ui-tabs' ) );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

主題中載入 CSS

載入CSS， 並依賴 main_css

/**
* 
* v123 DEV
* https://v123.tw
* 
*/
function my_css_method() {
 wp_enqueue_style('theme-override', get_stylesheet_directory_uri() . '/css/style.css' , array( 'main_css' ), '0.1.0', 'all');
}
add_action( 'wp_enqueue_scripts', 'my_css_method' );

載入WordPress jQuery庫

/**
* 
* v123 DEV
* https://v123.tw
* 
*/
function v123_theme_main_scripts() {
        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-ui-core');
        wp_enqueue_script('jquery-effects-core');
}
add_action('wp_enqueue_scripts', 'v123_theme_main_scripts');

預先載入 CSS 或 JS

/**
* 
* v123 DEV
* https://v123.tw
* 
*/
// 預先註冊 Style
wp_register_style( 'v123-style', get_stylesheet_directory_uri() . '/assets/css/style.css' );
// 預先註冊 Script
wp_register_script( 'v123-script', get_stylesheet_directory_uri() . '/assets/css/script.js' );

// 使用預先註冊的 Style 或 Script
function v123_theme_style_and_script() {
      wp_enqueue_style('v123-style');
      wp_enqueue_script('v123-script');
}
add_action( 'wp_enqueue_scripts', 'v123_theme_style_and_script' );