WordPress は記事のヘッダーとフッターを指定して、PHP/JavaScript/CSS コードを読み込みます

使用する場合WordPressのウェブサイトヘッダーとフッターに PHP/JavaScript/CSS コードを読み込むには、WordPress で特定の記事またはページを指定する必要があります。

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