WordPress中注册calc_pat短代码后前端无任何内容显示是什么原因？

核心问题原因 #

WordPress短代码的回调函数要求必须返回待渲染的字符串内容，不能直接在函数内部输出HTML内容，你当前的写法直接在函数中嵌套输出HTML，不符合短代码的运行机制，因此会出现无输出的问题。

修复方法 #

推荐使用输出缓冲的方案，不需要调整原有HTML结构，修改后的代码如下：

<?php
function calc_shortcode(){
    // 开启输出缓冲捕获HTML内容
    ob_start();
?>
<div>
    <form>
        <h3>Price High</h3>
        <input name="priceHigh" type="text" />
        <h3>Price Low</h3>
        <input name="priceLow" type="text" />
        <h3>Price Up</h3>
        <input name="priceUp" type="text" />
        <h3>Price Down</h3>
        <input name="priceDown" type="text" /></br>
        <input name="submit" type="submit" value="Calculate" class="btn btn-primary" />
    </form>
</div>
<?php
    // 返回捕获到的缓冲内容，符合短代码运行规范
    return ob_get_clean();
}
add_shortcode('calc_pat', 'calc_shortcode');

额外验证事项 #

• 确认代码放置位置正确：这段代码需要放在当前使用主题的functions.php文件中，或者自定义插件的代码文件内，不能放在独立页面模板文件中，否则短代码注册不生效
• 确认短代码调用格式正确：文章/页面中调用时填写[calc_pat]即可，不要拼写错误或添加多余字符
• 若站点开启了缓存功能，修改代码后需要清空全站缓存再测试效果

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