wordpress网站后台主题自定义全局配色设置（纯代码）

将以下代码粘贴到主题根目录 functions.php 最底部

/**
 * 自定义器：会展网站全局配色设置
 */
function expo_theme_customizer($wp_customize) {

    // 新增配色面板
    $wp_customize->add_section('expo_color_section', array(
        'title'       => '智展网｜全局网站配色',
        'priority'    => 30,
        'description' => '修改后全站CSS自动生效，无需改动模板文件',
    ));

    $color_settings = [
        'primary'         => ['label' => '主色调', 'default' => '#2c7be0'],
        'primary_dark'    => ['label' => '主色深色hover', 'default' => '#1a5bbf'],
        'danger'          => ['label' => '警示色（倒计时）', 'default' => '#e74c3c'],
        'text_dark'       => ['label' => '正文深色标题', 'default' => '#1a2634'],
        'text_normal'     => ['label' => '常规文字颜色', 'default' => '#3d4a5c'],
        'text_light'      => ['label' => '浅色辅助文字', 'default' => '#7b8ba3'],
        'bg_body'         => ['label' => '页面背景色', 'default' => '#f5f7fa'],
        'bg_card'         => ['label' => '卡片白色背景', 'default' => '#ffffff'],
        'bg_light'        => ['label' => '浅灰区块背景', 'default' => '#f8fafc'],
        'border_color'    => ['label' => '边框颜色', 'default' => '#f0f2f6'],
    ];

    foreach ($color_settings as $key => $opt) {
        $wp_customize->add_setting("expo_color_{$key}", array(
            'default'           => $opt['default'],
            'sanitize_callback' => 'sanitize_hex_color',
            'transport'         => 'refresh'
        ));

        $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, "expo_color_{$key}", array(
            'label'    => $opt['label'],
            'section'  => 'expo_color_section',
            'settings' => "expo_color_{$key}"
        )));
    }
}
add_action('customize_register', 'expo_theme_customizer');

/**
 * 头部自动输出 :root 全局CSS变量
 * priority:99 保证靠后输出，覆盖主题默认样式
 */
function expo_output_root_css_vars() {
    // 避免后台编辑器加载多余样式
    if ( is_admin() ) return;
    
    $vars = [
        '--primary'         => get_theme_mod('expo_color_primary', '#2c7be0'),
        '--primary-dark'    => get_theme_mod('expo_color_primary_dark', '#1a5bbf'),
        '--danger'          => get_theme_mod('expo_color_danger', '#e74c3c'),
        '--text-dark'       => get_theme_mod('expo_color_text_dark', '#1a2634'),
        '--text-normal'     => get_theme_mod('expo_color_text_normal', '#3d4a5c'),
        '--text-light'      => get_theme_mod('expo_color_text_light', '#7b8ba3'),
        '--bg-body'         => get_theme_mod('expo_color_bg_body', '#f5f7fa'),
        '--bg-card'         => get_theme_mod('expo_color_bg_card', '#ffffff'),
        '--bg-light'        => get_theme_mod('expo_color_bg_light', '#f8fafc'),
        '--border-color'    => get_theme_mod('expo_color_border_color', '#f0f2f6'),
        // 无需后台调整的样式常量
        '--shadow-sm'      => '0 2px 8px rgba(0,0,0,0.03)',
        '--shadow-hover'   => '0 8px 20px rgba(0,0,0,0.06)',
        '--transition'     => 'all 0.24s ease',
    ];

    $css = '<style id="expo-root-css">:root{';
    foreach ($vars as $name => $val) {
        $css .= esc_attr($name) . ':' . esc_attr($val) . ';';
    }
    $css .= '}</style>' . "\n";
    
    echo $css;
}
// priority=99，延后输出，优先级更高，防止被其他样式覆盖
add_action('wp_head', 'expo_output_root_css_vars', 99);