如何阻止WordPress移除自定义<dotlottie-player>元素？

问题原因分析 #

你添加的KSes规则无效，大概率是以下几个原因：

• 上下文匹配不全：Tatsu页面构建器可能使用了自定义的内容上下文，你的规则只覆盖了post和default，没覆盖到Tatsu的上下文。
• 属性格式错误：KSes对布尔属性（如loop、autoplay）的允许规则，用true的写法已经过时，需要用空数组表示允许该属性存在。
• 规则被覆盖：其他插件、主题的KSes规则优先级更高，覆盖了你的设置。

修复KSes规则的调整方案 #

修改functions.php中的代码，全局允许dotlottie-player标签，同时修正属性格式：

function allow_lottie_tags($tags, $context) {
    $allowed_atts = array(
        'src' => array(),
        'background' => array(),
        'speed' => array(),
        'loop' => array(),
        'autoplay' => array(),
        'class' => array(),
        'id' => array(),
        'style' => array()
    );

    // 所有上下文都允许该标签
    $tags['dotlottie-player'] = $allowed_atts;
    return $tags;
}

// 覆盖更多上下文的过滤规则
add_filter('wp_kses_allowed_html', 'allow_lottie_tags', 999, 2);
add_filter('post_allowed_html', 'allow_lottie_tags', 999, 2);
add_filter('widget_allowed_html', 'allow_lottie_tags', 999, 2);

这里把属性值从true改为空数组，是因为当前KSes规范中，空数组表示允许该属性的任意值（或允许布尔属性存在），而旧的true写法不再可靠。

更稳定的替代方案：使用短代码 #

页面构建器的Code模块容易被KSes过滤，短代码是更可靠的方式，步骤如下：

1. 添加短代码函数到functions.php #

function dotlottie_player_shortcode($atts) {
    // 设置短代码参数默认值
    $atts = shortcode_atts(
        array(
            'src' => '',
            'background' => 'transparent',
            'speed' => '1',
            'loop' => 'true',
            'autoplay' => 'true'
        ),
        $atts,
        'dotlottie_player'
    );

    // 处理布尔属性的输出逻辑
    $loop_attr = $atts['loop'] === 'true' ? 'loop' : '';
    $autoplay_attr = $atts['autoplay'] === 'true' ? 'autoplay' : '';

    // 生成安全的HTML代码
    $output = sprintf(
        '<dotlottie-player src="%s" background="%s" speed="%s" %s %s></dotlottie-player>',
        esc_url($atts['src']),
        esc_attr($atts['background']),
        esc_attr($atts['speed']),
        $loop_attr,
        $autoplay_attr
    );

    return $output;
}
add_shortcode('dotlottie_player', 'dotlottie_player_shortcode');

2. 在Tatsu模块中使用短代码 #

替换原来的HTML代码，改用短代码：

[dotlottie_player src="https://lottie.host/******************.lottie" background="transparent" speed="1" loop="true" autoplay="true"]

额外准备：加载DotLottie脚本 #

如果你的网站还没加载DotLottie播放器脚本，在functions.php中添加：

function enqueue_dotlottie_script() {
    wp_enqueue_script('dotlottie-player', 'https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_dotlottie_script');

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