WordPress指定文章頁眉頁腳加載PHP/JavaScrip/CSS代碼

如果使用WordPress建立站，需要在WordPress的指定某篇文章或頁面，頁眉頁腳加載PHP/JavaScrip/CSS代碼，該如何實現？

我們可以使用WordPress強大的自定義字段，為指定的某篇文章或頁面加載實現不同的JavaScript頁面。

本文將向你展示：如何使用自定義字段在WordPress上，自定義JavaScript或CSS文件？

如果你能理解，自定義字段的值不像JavaScript和CSS文件那麼簡單。

WordPress怎麼添加自定義字段？

通常是打開WordPress主題的header.php 頁眉文件，確保已經加入以下程式碼▼

<?php wp_head(); ?>

WordPress怎麼自定義頁眉？更推薦的方式：透過 functions.php 或程式碼插件實現

直接修改主題的 header.php 或 footer.php 容易在主題更新後遺失程式碼。

更安全、更規範的做法是將以下程式碼新增至目前主題的 functions.php 文件中，或使用 代碼片段 這類外掛程式來管理自訂程式碼。

為了避免修改主題核心文件，我們透過 functions.php 掛載程式碼。

第一步：新增功能程式碼

請將以下PHP 程式碼加入你的主題 functions.php 文件末尾，或透過 代碼片段 插件新建一個程式碼片段並貼上：

<?php
/**
 * 指定文章/页面加载 Head 自定义字段代码
 */
add_action('wp_head', 'add_custom_head_code');

function add_custom_head_code() {
    // 只在文章详情页和独立页面执行
    if (is_single() || is_page()) {
        global $post;

        // 获取自定义字段 'head' 的值
        $head = get_post_meta($post->ID, 'head', true);

        // 如果有值，则输出到 head
        if (!empty($head)) {
            echo $head;
        }
    }
}

/**
 * 指定文章/页面加载 Foot 自定义字段代码
 */
add_action('wp_footer', 'add_custom_foot_code', 99);

function add_custom_foot_code() {
    // 只在文章详情页和独立页面执行
    if (is_single() || is_page()) {
        global $post;

        // 获取自定义字段 'foot' 的值
        $foot = get_post_meta($post->ID, 'foot', true);

        // 如果有值，则输出到 footer
        if (!empty($foot)) {
            echo $foot;
        }
    }
}

(注意：如果 functions.php 文件末尾已經有 ?>，請不要重複加，直接把上面的程式碼插在 ?> 之前即可)

第二步：在文章編輯頁使用

1. 進入WordPress 後台，編輯某篇文章或頁面。
2. 在編輯器頁面找到 “自訂欄位” metabox（如果沒看到，請點擊右上角的“顯示選項”或古騰堡編輯器的“偏好設定”，確保勾選了“自訂欄位”）。
3. 點擊 “輸入新的”：
   • 名稱(Name) 輸入：head (用於頭部代碼) 或 foot (用於底部代碼)。
   • 值(Value) 輸入框：貼上你需要新增的HTML、CSS 或JS 程式碼。
4. 點擊 “新增自訂欄位” 並更新/發布文章。

• 更新文章將允許你為主題的代碼，輸入這些自定義字段的值。

由於你只輸出“值”中是需要加載的代碼，因此需要在“值”中，輸入以下類似代碼 ▼

<script type="text/javascript">...</script>

或者 ▼

<style type="text/css">...</style>

來輸出以上代碼。

這樣修改的好處：

1. 更安全：不直接修改 header.php 和 footer.php，避免主題更新時代碼被覆蓋。
2. 更規範：使用WordPress 推薦的 add_action 鉤子方式掛載程式碼。
3. 邏輯清晰：將功能封裝在函數中，方便後續維護。