WordPress自定义动态面板图片不显示问题求助

核心原因 #

你的短代码处理函数大概率对content参数使用了HTML转义函数（比如esc_html()），导致<img>标签被转义成实体字符，最终页面只显示空的<p>标签；或者参数传递时HTML被编辑器自动转义。

解决方案 #

1. 修改短代码处理函数的输出逻辑 #

检查functions.php里的短代码函数，把对content的转义方式从esc_html()替换为wp_kses_post()——这个函数会保留WordPress认可的安全HTML标签（包括<img>），同时过滤危险代码。

错误示例（导致HTML被转义）：

function dynamic_panel_shortcode($atts, $content = null) {
    $atts = shortcode_atts([
        'title' => '默认标题'
    ], $atts);
    // 这里用esc_html会转义所有HTML，包括img标签
    return '<div class="dynamic-panel"><h3>' . esc_html($atts['title']) . '</h3><p>' . esc_html($content) . '</p></div>';
}
add_shortcode('dynamic_panel', 'dynamic_panel_shortcode');

修正后的代码：

function dynamic_panel_shortcode($atts, $content = null) {
    $atts = shortcode_atts([
        'title' => '默认标题'
    ], $atts);
    // 使用wp_kses_post保留安全HTML
    $safe_content = wp_kses_post($content);
    return '<div class="dynamic-panel"><h3>' . esc_html($atts['title']) . '</h3><p>' . $safe_content . '</p></div>';
}
add_shortcode('dynamic_panel', 'dynamic_panel_shortcode');

2. 优先使用闭合式短代码传递HTML内容 #

如果之前是通过content参数直接传入HTML（比如[dynamic_panel content="<img src='xxx'>"]），建议改用闭合式短代码写法，避免编辑器自动转义引号或HTML：

[dynamic_panel title="我的面板"]
<img src="https://example.com/your-image.jpg" alt="图片描述">
[/dynamic_panel]

这种写法下，短代码的$content变量会直接获取到标签内部的HTML内容，处理起来更稳定。

3. 检查编辑器的HTML过滤 #

如果使用古腾堡编辑器，确保在“代码编辑器”模式下编写短代码，避免可视化编辑器自动修改HTML结构；如果是经典编辑器，关闭“自动格式化”选项（设置→写作→取消勾选“自动转换引号为智能引号”等选项）。

内容的提问来源于stack exchange，提问作者Wp-PHP