能否将CSS变量作为theme-color元标签的content值？WordPress子主题需求

为什么直接用CSS变量不生效？ #

• 浏览器解析<meta>标签的时机远早于加载解析外部样式表，此时CSS变量还未被定义，根本识别不了var()语法。
• theme-color这类元标签的content属性只认具体颜色值（十六进制、RGB/RGBA、颜色名称等），不支持CSS变量。

无需插件+GUI修改的解决方案 #

用WordPress自带的**自定义izer（外观→自定义）**做可视化颜色设置，再把这个设置值动态塞进元标签里——既不用插件，后续改颜色也不用碰代码。

步骤1：在子主题functions.php加自定义izer设置 #

这段代码会在后台自定义面板里加一个颜色选择器：

function custom_theme_color_customize_register($wp_customize) {
    // 新增主题色设置面板
    $wp_customize->add_section('theme_color_section', array(
        'title' => __('主题色设置', 'textdomain'),
        'priority' => 30,
    ));

    // 注册主题色设置项
    $wp_customize->add_setting('theme_color_setting', array(
        'default' => '#000000', // 默认黑色，可自己改
        'sanitize_callback' => 'sanitize_hex_color',
    ));

    // 添加颜色选择控件
    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'theme_color_control', array(
        'label' => __('浏览器主题色', 'textdomain'),
        'section' => 'theme_color_section',
        'settings' => 'theme_color_setting',
    )));
}
add_action('customize_register', 'custom_theme_color_customize_register');

步骤2：修改元标签输出代码 #

把你原来的add_meta_tags函数换成下面这段，直接调用自定义izer里的颜色值：

function add_meta_tags() {
    // 获取自定义的主题色，没设置就用默认值#000000
    $theme_color = get_theme_mod('theme_color_setting', '#000000');

    // Chrome、Firefox OS、Opera
    echo '<meta name="theme-color" content="' . esc_attr($theme_color) . '">';
    // Windows Phone
    echo '<meta name="msapplication-navbutton-color" content="' . esc_attr($theme_color) . '">';
    // iOS Safari
    echo '<meta name="apple-mobile-web-app-capable" content="yes">';
    echo '<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">';
    // 注：你原来代码里重复输出了Blogger相关的元标签，没用的话可以删掉
}
add_action('wp_head', 'add_meta_tags');

步骤3：同步CSS变量（可选） #

如果想让原来的--wp--preset--color--contrast变量也跟着GUI设置同步，不用手动改样式表，可以加这段代码：

function enqueue_custom_theme_color_css() {
    $theme_color = get_theme_mod('theme_color_setting', '#000000');
    $custom_css = ":root { --wp--preset--color--contrast: {$theme_color}; }";
    // 替换成你子主题样式表的handle，一般是子主题的slug加-style
    wp_add_inline_style('your-child-theme-style', $custom_css);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_theme_color_css');

后续修改方式 #

以后要改主题色，直接进WordPress后台外观→自定义→主题色设置，用颜色选择器点几下就行，完全不用碰代码。

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