迁移至Azure后，如何修改WPBakery Page Builder短码以从Azure Blob存储加载图片

嘿，我来帮你搞定这个问题！既然你已经把媒体文件迁移到Azure Blob存储并更新了数据库URL，要让WPBakery的[vc_single_image]短码从Blob加载图片，有几个靠谱的方法，我给你详细说说：

方法一：用WordPress过滤器自动替换图片URL（推荐） #

这个方法不用修改WPBakery的核心代码，插件更新也不会受影响。你可以把下面的代码添加到主题的functions.php文件里，或者用代码片段插件来添加：

add_filter('vc_shortcode_output_filter', 'redirect_vc_images_to_azure_blob', 10, 3);

function redirect_vc_images_to_azure_blob($output, $tag, $atts) {
    // 只处理vc_single_image短码
    if ($tag !== 'vc_single_image') {
        return $output;
    }

    // 获取短码里的图片ID
    $image_id = isset($atts['image']) ? intval($atts['image']) : 0;
    if (!$image_id) {
        return $output;
    }

    // 获取Azure Blob存储中的图片URL（如果你的数据库已经更新了媒体URL，wp_get_attachment_url会直接返回Blob地址）
    $azure_image_url = wp_get_attachment_url($image_id);
    if (!$azure_image_url) {
        return $output;
    }

    // 替换输出中的图片src和srcset
    $dom = new DOMDocument();
    @$dom->loadHTML($output);
    $img_elements = $dom->getElementsByTagName('img');
    
    foreach ($img_elements as $img) {
        // 替换主图片URL
        $img->setAttribute('src', $azure_image_url);
        
        // 处理响应式图片的srcset（如果有的话）
        if ($img->hasAttribute('srcset')) {
            $old_upload_base = wp_upload_dir()['baseurl'];
            // 替换成你的Azure Blob存储的媒体根地址
            $azure_upload_base = 'https://your-blob-container.blob.core.windows.net/your-media-folder';
            $updated_srcset = str_replace($old_upload_base, $azure_upload_base, $img->getAttribute('srcset'));
            $img->setAttribute('srcset', $updated_srcset);
        }
    }

    return $dom->saveHTML();
}

代码说明： #

• 这个过滤器会拦截vc_single_image短码的输出内容
• 通过图片ID获取对应的Azure Blob存储URL
• 自动替换输出HTML里的图片src和srcset属性，指向Blob存储

方法二：用Azure存储专用插件自动处理（更省心） #

如果不想自己写代码，可以用专门的WordPress媒体迁移插件，比如WP Offload Media（支持Azure Blob存储）。安装并配置好后，它会自动接管所有媒体文件的URL输出，包括WPBakery短码生成的图片，不需要手动修改任何代码。

配置要点： #

1. 安装插件后，在设置里连接你的Azure Blob存储账户
2. 确保插件设置中开启了“替换媒体URL”的选项
3. 插件会自动把所有媒体URL（包括短码里的）替换成Blob存储的地址

注意事项 #

• 修改主题functions.php前，一定要备份文件和数据库，避免出错
• 确保Azure Blob存储的CORS设置允许你的网站域名访问，否则图片会加载失败
• 如果用了响应式图片，记得同步更新srcset里的URL，不然不同尺寸的图片还是会指向旧路径

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