WordPress自定义主题：添加外观自定义颜色选项及调用方法

一、添加自定义颜色选项到「颜色」面板 #

你需要在主题的functions.php文件中添加以下代码，通过WordPress自定义器API注册新的颜色设置和控件：

// 注册自定义颜色选项
function custom_theme_customize_register( $wp_customize ) {
    // 添加Primary颜色
    $wp_customize->add_setting( 'primary_color', array(
        'default'           => '#2196F3', // 默认蓝色
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'refresh',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
        'label'    => __( 'Primary', 'your-theme-text-domain' ),
        'section'  => 'colors',
        'settings' => 'primary_color',
    ) ) );

    // 添加Light-primary颜色
    $wp_customize->add_setting( 'light_primary_color', array(
        'default'           => '#BBDEFB',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'refresh',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'light_primary_color', array(
        'label'    => __( 'Light-primary', 'your-theme-text-domain' ),
        'section'  => 'colors',
        'settings' => 'light_primary_color',
    ) ) );

    // 添加Urgent颜色
    $wp_customize->add_setting( 'urgent_color', array(
        'default'           => '#FFC107',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'refresh',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'urgent_color', array(
        'label'    => __( 'Urgent', 'your-theme-text-domain' ),
        'section'  => 'colors',
        'settings' => 'urgent_color',
    ) ) );

    // 添加Alert颜色
    $wp_customize->add_setting( 'alert_color', array(
        'default'           => '#F44336',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'refresh',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'alert_color', array(
        'label'    => __( 'Alert', 'your-theme-text-domain' ),
        'section'  => 'colors',
        'settings' => 'alert_color',
    ) ) );
}
add_action( 'customize_register', 'custom_theme_customize_register' );

代码说明 #

• sanitize_callback：用WordPress内置函数确保用户输入的是合法十六进制颜色值
• transport：refresh表示保存设置后刷新页面生效；若要实时预览，可改为postMessage并配合JS代码扩展
• your-theme-text-domain：替换为你主题的文本域，用于多语言支持

二、调用自定义颜色选项 #

1. 在PHP模板中直接调用 #

在主题模板文件（如header.php、single.php）中，用get_theme_mod()获取颜色值：

// 用Primary颜色设置标题文本色
echo '<h1 style="color:' . esc_attr( get_theme_mod( 'primary_color', '#2196F3' ) ) . ';">示例标题</h1>';

// 用Alert颜色设置背景色
echo '<div style="background-color:' . esc_attr( get_theme_mod( 'alert_color', '#F44336' ) ) . ';">警告提示</div>';

2. 注入到CSS中（推荐） #

将颜色值转为CSS变量，避免内联样式，在functions.php中添加：

// 注入自定义颜色到主题样式
function custom_theme_enqueue_custom_colors() {
    $primary_color = get_theme_mod( 'primary_color', '#2196F3' );
    $light_primary_color = get_theme_mod( 'light_primary_color', '#BBDEFB' );
    $urgent_color = get_theme_mod( 'urgent_color', '#FFC107' );
    $alert_color = get_theme_mod( 'alert_color', '#F44336' );

    $custom_css = "
        :root {
            --primary-color: {$primary_color};
            --light-primary-color: {$light_primary_color};
            --urgent-color: {$urgent_color};
            --alert-color: {$alert_color};
        }
    ";

    wp_add_inline_style( 'your-theme-style-handle', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'custom_theme_enqueue_custom_colors' );

之后在主题CSS文件中通过变量调用：

/* Primary按钮样式 */
.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
}

/* 警告文本样式 */
.alert-text {
    color: var(--alert-color);
    font-weight: 700;
}

注意事项 #

• your-theme-style-handle：替换为你主题主样式表的handle（比如默认主题是twentytwentyfour-style）
• 用esc_attr()和wp_add_inline_style保证代码安全，避免XSS风险

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