如何在WordPress Customizer中使用HTML代码避免标签被移除

问题原因 #

HTML标签被自动清理的核心原因是你当前配置的sanitize_custom_options清理回调默认会过滤用户输入中的所有HTML标签，而默认值没有走用户输入的清理逻辑，所以可以正常在页面生效。

解决方案 #

你可以通过调整清理回调规则，实现保留指定HTML标签的需求：

方案1：自定义允许指定标签的清理回调（安全性最高） #

首先在你的对应类中新增自定义清理方法，明确声明允许的HTML标签和属性：

public function sanitize_banner_title( $input ) {
    // 定义允许的HTML标签和对应支持的属性
    $allowed_tags = array(
        'span' => array(
            'class' => array(),
            'style' => array()
        ),
        'small' => array(
            'class' => array(),
            'style' => array()
        ),
        'strong' => array(),
        'em' => array(),
        'br' => array()
    );
    return wp_kses( $input, $allowed_tags );
}

之后修改add_setting的配置，替换清理回调为上面新增的方法：

$wp_customize->add_setting('banner_title_display',array(
        'default' => 'Largest <span> GiveAway</span> collections <small>Online</small>',
        'sanitize_callback' => array($this, 'sanitize_banner_title')
));

后续如果需要支持更多标签，直接在$allowed_tags数组中添加对应规则即可。

方案2：使用内置文章级HTML清理回调（操作最简单） #

如果不需要严格限制标签范围，可以直接使用WordPress内置的wp_kses_post作为清理回调，该函数默认允许所有文章编辑场景下支持的合法HTML标签，不需要自己维护允许列表：

$wp_customize->add_setting('banner_title_display',array(
        'default' => 'Largest <span> GiveAway</span> collections <small>Online</small>',
        'sanitize_callback' => 'wp_kses_post'
));

注意事项 #

• 前端输出该设置值时不要使用esc_html()、esc_textarea()等转义函数，否则已保存的HTML标签会被转义为纯文本显示，正确输出写法如下：

echo get_theme_mod('banner_title_display', 'Largest <span> GiveAway</span> collections <small>Online</small>');

• 不要直接使用'sanitize_callback' => '__return_true'跳过所有清理逻辑，会存在XSS注入安全风险。

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