WordPress 自定義 CSS 與 JS 檔案載入實作筆記

前言

在開發 WordPress 網站時，常常需要加入自定義的 CSS 和 JavaScript 來調整樣式或增加互動效果。直接在主題的 functions.php 檔案中註冊並載入這些檔案，是一種方便且易於維護的做法，適合本地開發與版本控管。

在 functions.php 中載入自定義 CSS 和 JS

WordPress 提供了 wp_enqueue_style 和 wp_enqueue_script 兩個函式，分別用來載入 CSS 和 JS 檔案。通常會將這些載入動作放在一個自訂函式中，並透過 add_action 掛載到 wp_enqueue_scripts 鉤子。

以下是範例程式碼片段：

add_action( 'wp_enqueue_scripts', 'custom_style_scripts' );

/**
 * Enqueue scripts and styles.
 */
function custom_style_scripts() {
    // CSS 檔案放在子主題的 css 資料夾中
    wp_enqueue_style( 'main_css', get_stylesheet_directory_uri() . '/css/main.css' );

    // JS 檔案放在子主題的 js 資料夾中，依賴 jQuery，並放置於頁面底部
    wp_enqueue_script( 'main_js', get_stylesheet_directory_uri() . '/js/main.js', array('jquery'), false, true );
}

實務應用與注意事項

• 建議將 CSS 和 JS 分別放在子主題的 css 和 js 資料夾中，方便管理與版本控制。
• 在本地開發時，可以搭配 Gulp 或其他前端工具編譯 SCSS，並自動更新這些檔案。
• wp_enqueue_script 的最後一個參數設為 true，確保 JS 載入於頁面底部，提升頁面載入效能。
• 若有多個腳本或樣式檔案，依照需求分別註冊並載入，避免重複或衝突。

相關官方文件

• wp_enqueue_script
• wp_enqueue_style

完整程式碼

add_action( 'wp_enqueue_scripts', 'custom_style_scripts' );

/**
 * Enqueue scripts and styles.
 */
function custom_style_scripts() {
    //目錄可自行在子主題下面建立路徑像是css都放到css資料夾中，js就放到js資料夾中
    //載入CSS
    wp_enqueue_style( 'main_css', get_stylesheet_directory_uri() . '/css/main.css' );
    //載入JS
    wp_enqueue_script( 'main_js', get_stylesheet_directory_uri() . '/js/main.js', array('jquery'), false, true );
}