WordPress短码引入含HTML/JS的PHP文件报错及异常问题排查

核心问题分析 #

1. 短码显示1：include()函数执行成功时返回值为1，你直接return这个返回值，所以短码位置会输出1而非目标内容。
2. 保存页面时JSON响应错误：shipping-calculator.php里的HTML/JS是直接输出的，而WordPress保存页面时通过REST API交互，要求响应是纯JSON格式，直接输出的内容会破坏响应结构，导致报错。

修复代码 #

把短码函数改成输出缓冲的方式，捕获include文件的输出内容再返回：

function shippingcal(){
    ob_start(); // 开启输出缓冲，捕获后续所有输出
    include ("KB/widget/shipping-calculator.php");
    $widget_content = ob_get_clean(); // 获取缓冲内容并关闭缓冲
    return $widget_content;
};

add_shortcode('sc_shippingcal', 'shippingcal');

原理说明 #

• ob_start()会拦截所有原本要直接输出到页面的内容，暂存到缓冲区。
• 执行include时，文件里的HTML、JS代码会被存入缓冲区，不会直接发送到浏览器，也就不会干扰WordPress的JSON响应。
• ob_get_clean()取出缓冲区的内容，作为短码的返回值，这样就能正确渲染运费计算小部件，同时解决保存页面的报错问题。

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