如何在WPBakery短代码渲染前替换Single Image元素的图片占位符

你的原有逻辑执行顺序错误：调用do_shortcode('[porto_block id="47722"]')时，WordPress已经完成了区块内所有短代码（包括vc_single_image）的解析渲染，##IMAGE##会被WPBakery判定为无效图片ID直接输出错误的图片标签，后续再执行字符串替换已经没有作用。

方案1：先取区块原始内容、替换后再渲染（最稳定） #

Porto的自定义区块本质是名为porto_block的自定义文章类型，你可以直接读取该文章的原始未解析内容，替换占位符后再执行短代码渲染，代码示例如下：

// 前置逻辑已生成$image变量存储实际图片ID
$block_id = 47722;
$block_post = get_post($block_id);

if ($block_post && !is_wp_error($block_post)) {
    // 获取区块内的原始短代码内容，未经过任何解析
    $raw_block_content = $block_post->post_content;
    // 先替换占位符
    $processed_content = str_replace('##IMAGE##', $image, $raw_block_content);
    // 替换完成后再执行短代码渲染
    echo do_shortcode($processed_content);
}

这个方案兼容性最好，不会影响站点内其他短代码的执行逻辑，也完全保留Porto区块原本的所有样式和动态特性。

方案2：用过滤器拦截短代码渲染过程 #

如果你不想直接读取文章原始内容，可以用WordPress原生的pre_do_shortcode_tag过滤器，在vc_single_image短代码执行前替换属性值：

// 临时挂载短代码拦截过滤器
$replace_vc_image_placeholder = function ($output, $tag, $attrs) use ($image) {
    if ($tag === 'vc_single_image' && isset($attrs['image']) && $attrs['image'] === '##IMAGE##') {
        $attrs['image'] = $image;
        // 拼接替换属性后的短代码重新渲染
        $shortcode_attrs = [];
        foreach ($attrs as $key => $value) {
            $shortcode_attrs[] = esc_attr($key) . '="' . esc_attr($value) . '"';
        }
        return do_shortcode('[vc_single_image ' . implode(' ', $shortcode_attrs) . ']');
    }
    return $output;
};
add_filter('pre_do_shortcode_tag', $replace_vc_image_placeholder, 10, 3);

// 直接渲染Porto区块，过滤器会自动处理占位符替换
echo do_shortcode('[porto_block id="47722"]');

// 渲染完成后移除过滤器，避免影响其他位置的vc_single_image元素
remove_filter('pre_do_shortcode_tag', $replace_vc_image_placeholder, 10);

内容的提问来源于stack exchange，提问作者Faye D.