WordPress 短代码开发:别在 shortcode 回调里直接 echo

· wordpress · 阅读 10
摘要

短代码看着简单,但写法不对会引发编辑器内容错位,甚至让区块编辑器显示“无效内容”。正确姿势:return,不是 echoadd_shortcode('year', function(){ return date('Y'); });短

短代码看着简单,但写法不对会引发编辑器内容错位,甚至让区块编辑器显示“无效内容”。

正确姿势:return,不是 echo

add_shortcode('year', function(){
    return date('Y');
});

短代码回调必须返回字符串。用 echo 会把内容直接输出到页面顶部,位置完全乱掉。

带属性的短代码

add_shortcode('btn', function($atts, $content = null){
    $a = shortcode_atts([
        'url' => '#',
        'type' => 'primary',
    ], $atts, 'btn');
    return sprintf(
        '<a class="btn btn-%s" href="%s">%s</a>',
        esc_attr($a['type']),
        esc_url($a['url']),
        do_shortcode($content)
    );
});

三个细节:shortcode_atts 的第三个参数传短代码名,否则过滤钩子拿不到上下文;esc_url 和 esc_attr 必做;do_shortcode($content) 保证嵌套短代码能用。

什么时候不应该用短代码

  • 内容是结构化、需要复用管理的——用自定义文章类型
  • 是纯版式块——用区块编辑器自定义区块
  • 只是加一行统计代码——用 wp_footer 钩子

区块编辑器兼容

WP 5 之后,短代码在区块里会被包裹成 core/shortcode 块,如果短代码含大段 HTML 且没有闭合标签,编辑器可能把它拆成两个块。稳妥做法是注册 register_block_type 走原生区块。