WordPress主题开发：HTML转WP后字体样式丢失求助

你的问题核心要么是自定义控件类型不支持保存样式，要么是没有把自定义的字体设置映射到前端CSS，下面分两种常见场景给你具体解决方案：

场景1：需要保留「富文本样式的标题」（比如原HTML标题带颜色、加粗、字体家族等内联样式） #

如果原标题是带HTML标签的富文本（比如<h2 style="font-family: 'Roboto'; color: #333;">Popular Courses</h2>），默认的文本控件无法保存这些样式，得换成富文本控件：

第一步：修改functions.php的自定义izer代码 #

把未完成的WP_Customize_Control替换为WP_Customize_Rich_Text_Control，让用户能在自定义izer里可视化编辑字体样式：

// Popular Course 自定义izer配置
$wp_customize->add_section('lwp_popular_course', array(
    'title' => 'Popular Course Edit'
));

$wp_customize->add_setting('lwp_popular_courses_heading', array(
    'default' => '<h2 style="font-family: \'Roboto\', sans-serif; color: #2d3748;">Popular Courses</h2>',
    'sanitize_callback' => 'wp_kses_post' // 安全过滤富文本内容，避免XSS风险
));

$wp_customize->add_control(new WP_Customize_Rich_Text_Control(
    $wp_customize,
    'lwp_popular_courses_heading_control',
    array(
        'label' => 'Popular Courses Heading',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_courses_heading'
    )
));

第二步：在模板文件中输出标题 #

直接调用get_theme_mod()即可，因为保存的是带样式的HTML：

echo get_theme_mod('lwp_popular_courses_heading', '<h2 style="font-family: \'Roboto\', sans-serif; color: #2d3748;">Popular Courses</h2>');

场景2：需要「统一控制字体样式属性」（原HTML标题靠CSS类控制样式，通过自定义izer调整字体家族/大小/颜色） #

如果原标题用CSS类定义样式（比如<h2 class="popular-heading">Popular Courses</h2>），需要在自定义izer里添加单独的字体设置项，再把这些值注入到前端CSS：

第一步：在functions.php添加字体相关设置项 #

添加字体家族、大小、颜色的可配置项：

// 1. 字体家族选择
$wp_customize->add_setting('lwp_popular_heading_font_family', array(
    'default' => 'Roboto, sans-serif',
    'sanitize_callback' => 'sanitize_text_field'
));
$wp_customize->add_control('lwp_popular_heading_font_family_control', array(
    'label' => 'Heading Font Family',
    'section' => 'lwp_popular_course',
    'settings' => 'lwp_popular_heading_font_family',
    'type' => 'select',
    'choices' => array(
        'Roboto, sans-serif' => 'Roboto',
        'Arial, sans-serif' => 'Arial',
        'Georgia, serif' => 'Georgia'
    )
));

// 2. 字体大小设置
$wp_customize->add_setting('lwp_popular_heading_font_size', array(
    'default' => '24px',
    'sanitize_callback' => 'sanitize_text_field'
));
$wp_customize->add_control('lwp_popular_heading_font_size_control', array(
    'label' => 'Heading Font Size',
    'section' => 'lwp_popular_course',
    'settings' => 'lwp_popular_heading_font_size',
    'type' => 'text'
));

// 3. 字体颜色选择器
$wp_customize->add_setting('lwp_popular_heading_font_color', array(
    'default' => '#2d3748',
    'sanitize_callback' => 'sanitize_hex_color'
));
$wp_customize->add_control(new WP_Customize_Color_Control(
    $wp_customize,
    'lwp_popular_heading_font_color_control',
    array(
        'label' => 'Heading Font Color',
        'section' => 'lwp_popular_course',
        'settings' => 'lwp_popular_heading_font_color'
    )
));

第二步：注入动态CSS到前端 #

在functions.php添加函数，把自定义izer的字体值转为CSS：

function lwp_inject_popular_heading_styles() {
    // 获取自定义izer配置的值
    $font_family = get_theme_mod('lwp_popular_heading_font_family', 'Roboto, sans-serif');
    $font_size = get_theme_mod('lwp_popular_heading_font_size', '24px');
    $font_color = get_theme_mod('lwp_popular_heading_font_color', '#2d3748');

    // 构建动态CSS
    $custom_css = "
        .popular-heading {
            font-family: {$font_family};
            font-size: {$font_size};
            color: {$font_color};
        }
    ";

    // 注入到主题主样式表（注意：'style'是你主题主样式的handle，需和wp_enqueue_style的handle一致）
    wp_add_inline_style('style', $custom_css);
}
add_action('wp_enqueue_scripts', 'lwp_inject_popular_heading_styles');

第三步：在模板文件输出标题 #

给标题加上对应的CSS类，让动态样式生效：

<h2 class="popular-heading"><?php echo get_theme_mod('lwp_popular_courses_heading', 'Popular Courses'); ?></h2>

额外注意事项 #

• 富文本场景下，wp_kses_post是安全的富文本过滤函数，避免恶意代码注入。
• 动态CSS场景中，wp_add_inline_style的第一个参数要和你主题注册主样式的handle一致（比如你用wp_enqueue_style('lwp-theme-style', get_stylesheet_uri())，这里就要写'lwp-theme-style'）。
• 修改后记得清空浏览器缓存，避免旧CSS覆盖新样式。

内容的提问来源于stack exchange，提问作者Asheeka K P