如何利用自定义字段修改WordPress模板CSS实现单篇文章背景色自定义？

方案一：直接在头部输出内联CSS（最简单直接） #

在主题的header.php文件的<head>标签区域，插入以下代码：

<?php
// 仅在单文章/单页面生效，避免列表页出错
if (is_singular()) {
    $bg_color = get_post_meta(get_the_ID(), 'Background color', true);
    if (!empty($bg_color)) {
        // 统一颜色格式：自动补全#前缀，兼容用户输入带/不带#的情况
        $bg_color = '#' . ltrim($bg_color, '#');
        // 输出内联样式，esc_attr确保安全转义
        echo '<style>body { background-color: ' . esc_attr($bg_color) . '; }</style>';
    }
}
?>

• 优势：无需额外配置，直接生效，纯后端输出不依赖JS
• 注意：如果原有主题样式中body背景的权重更高，可以给选择器加权重（比如body.single）或临时使用!important覆盖

方案二：通过WordPress规范的样式注入（更整洁） #

如果希望样式输出更符合WordPress开发规范，可在主题的functions.php中添加以下代码：

function custom_post_background_style() {
    // 仅针对单内容页执行
    if (!is_singular()) return;

    $bg_color = get_post_meta(get_the_ID(), 'Background color', true);
    if (empty($bg_color)) return;

    // 统一颜色格式
    $bg_color = '#' . ltrim($bg_color, '#');
    $custom_css = "body { background-color: {$bg_color}; }";
    
    // 替换成你的主题主样式表的handle（可在主题functions.php中找wp_enqueue_style的第一个参数）
    wp_add_inline_style('your-theme-main-style', $custom_css);
}
add_action('wp_enqueue_scripts', 'custom_post_background_style');

• 优势：样式会合并到主题已有的样式输出中，页面结构更整洁
• 注意：需要替换your-theme-main-style为实际的主题样式handle（比如默认主题的twenty-twenty-four-style）

关键细节处理 #

• 颜色格式兼容：自动处理用户输入带/不带#的情况，避免无效颜色值
• 安全防护：用esc_attr()转义输出内容，防止XSS注入风险
• 场景限制：通过is_singular()确保代码只在单文章、单页面等独立内容页生效，避免首页、列表页出现异常

内容的提问来源于stack exchange，提问作者Staker Humanoid