WordPress自定义短代码导致编辑器自动跳转至损坏预览页问题

核心问题原因 #

WordPress短代码的回调函数必须通过return返回要输出的内容，禁止直接使用echo输出。你当前的代码直接echo字符串，会导致输出时机错乱：

• 古腾堡编辑器渲染短代码预览时，需要服务端返回标准JSON格式的响应数据
• 直接echo的内容会提前插入到响应头与JSON数据之间，破坏响应结构，触发编辑器错误 fallback，最终跳转到损坏的预览界面

修复后的代码 #

将回调函数的echo改为return即可：

//TEST SHORTCODE
add_shortcode( 'sc_brandon_test', 'brandon_test' );
function brandon_test(){
    return 'Brandon\'s Test Shortcode file works correctly!';
}

补充说明 #

如果你的短代码后续需要输出大量HTML内容，可使用输出缓冲区捕获内容后再返回，示例如下：

function brandon_test(){
    ob_start();
    // 此处可编写任意echo、HTML输出逻辑
    echo 'Brandon\'s Test Shortcode file works correctly!';
    return ob_get_clean();
}

修改完成后清空站点缓存，再重新测试短代码效果即可。

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