更新WordPress或PHP后<picture>的srcset属性被加data-前缀如何解决

问题原因 #

新版本WordPress的内容安全过滤接口wp_kses默认的HTML属性白名单未将<source>标签的srcset、sizes纳入原生允许属性范围，未识别的属性会被自动添加data-前缀处理，和PHP版本本身没有直接关联。

最优解决方案 #

直接修改WordPress原生的允许HTML属性白名单，属于官方推荐的合规修改方式，不属于临时hack方案。
将以下代码添加到当前使用主题的functions.php文件，或者自定义功能插件的代码文件中即可：

add_filter('wp_kses_allowed_html', function ($allowed_tags, $context) {
    // 可根据实际使用场景调整上下文判断条件
    if (in_array($context, ['post', 'the_content', 'acf_the_content'])) {
        if (isset($allowed_tags['source'])) {
            $allowed_tags['source']['srcset'] = true;
            $allowed_tags['source']['sizes'] = true;
        }
    }
    return $allowed_tags;
}, 10, 2);

验证方法 #

添加代码后更新一篇包含对应<picture>标签的内容，查看前端输出的源代码，srcset和sizes属性就不会再被自动添加data-前缀。
如果仍然出现前缀添加的问题，可检查是否安装了额外的安全类插件、页面编辑器插件有独立的HTML过滤规则，参照插件的文档调整对应白名单即可。

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