在開發 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 );
}

在使用 WordPress 建置網站時，若頁面內容多以 shortcode 方式組合，想要在頁面中靈活顯示特定文章類型（Post Type）的文章，就需要將查詢文章的功能包裝成 shortcode。這樣可以方便在任何頁面或文章中插入，提升內容管理彈性。本文適合有基礎 PHP 與 WordPress 開發經驗的工程師或自學者。

建立自訂 Shortcode 函式

我們可以在主題的 functions.php 檔案中，撰寫一個函式來查詢指定的文章類型，並輸出 HTML 結構。以下為範例關鍵程式碼說明：

function home_post_listing_shortcode( $atts ) {
    ob_start();
    // 建立 WP_Query 物件，查詢 post_type 為 'post' 的文章，限制顯示 3 篇，依標題排序（降冪）
    $query = new WP_Query( array(
        'post_type'      => 'post', // 可替換成想抓取的自訂文章類型
        'posts_per_page' => 3,      // 取出文章數量
        'order'          => 'DESC', // 排序方式 ASC(小->大), DESC(大->小)
        'orderby'        => 'title' // 依標題排序
    ) );

    if ( $query->have_posts() ) {
        echo '<ul class="info-listing">';
        while ( $query->have_posts() ) {
            $query->the_post();
            ?>
            <li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <div class="category_name"><?php the_category(); ?></div>
                <?php the_date('Y-m-d at g:ia', '<div class="news_date">', '</div>'); ?>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
            <?php
        }
        echo '</ul>';
        wp_reset_postdata();
    }

    return ob_get_clean();
}

註冊 Shortcode

將上述函式註冊為 shortcode，讓 WordPress 辨識並可在頁面中使用：

add_shortcode( 'list-posts-home', 'home_post_listing_shortcode' );

註冊後，只要在 WordPress 後台的頁面編輯器中插入 [list-posts-home]，就會顯示該 shortcode 所輸出的文章列表。

實際應用與延伸

• 可修改 post_type 參數為自訂文章類型，如 product、event 等。
• 可加入 category_name 或 tax_query 參數，篩選特定分類文章。
• 調整 posts_per_page 與排序條件，符合不同需求。
• 搭配頁面建構器（如 Visual Composer）使用，提升內容排版彈性。

常見坑點

• order 參數應為 DESC（大到小），原範例中寫成 DSC 會無效。
• 使用 the_date() 時，若多篇文章同一天只會顯示一次日期，改用 the_time() 可避免此問題。
• 記得使用 wp_reset_postdata() 恢復全域文章資料，避免影響其他查詢。

完整程式碼

function home_post_listing_shortcode( $atts ) {
    ob_start();
    $query = new WP_Query( array(
        'post_type'      => 'post',
        'posts_per_page' => 3,
        'order'          => 'DESC',
        'orderby'        => 'title',
    ) );

    if ( $query->have_posts() ) {
        echo '<ul class="info-listing">';
        while ( $query->have_posts() ) {
            $query->the_post();
            ?>
            <li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <div class="category_name"><?php the_category(); ?></div>
                <?php the_date('Y-m-d at g:ia', '<div class="news_date">', '</div>'); ?>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
            <?php
        }
        echo '</ul>';
        wp_reset_postdata();
    }

    return ob_get_clean();
}

add_shortcode( 'list-posts-home', 'home_post_listing_shortcode' );