WordPress指定文章页眉页脚添加PHP/JavaScrip/CSS代码

原文链接：https://www.chenweiliang.com/cwl-2022.html

更新于：2026年3月30日

文章目录 [OFF]

• 1 WordPress怎么添加自定义字段？
  • 1.1 第一步：添加功能代码
  • 1.2 第二步：在文章编辑页使用

如果使用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 文件中，或者使用 Code Snippets 这类插件来管理自定义代码。

为了避免修改主题核心文件，我们通过 functions.php 挂载代码。

第一步：添加功能代码

请将以下 PHP 代码添加到你的主题 functions.php 文件末尾，或者通过 Code Snippets 插件新建一个代码片段并粘贴：

<?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. 逻辑清晰：将功能封装在函数中，方便后续维护。

希望陈沩亮博客（ https://www.chenweiliang.com/ ） 分享的《WordPress指定文章页眉页脚加载PHP/JavaScrip/CSS代码》，对您有帮助。

欢迎分享本文链接：https://www.chenweiliang.com/cwl-2022.html

网站地址：https://www.chenweiliang.com/



欲获取更多资讯内幕和秘技，欢迎进入Telegram频道：https://www.chenweiliang.com/go/tgchannel