如何在WPBakery(Visual Composer)页面编辑HTML为图片添加宽高属性

方法1：直接在Visual Composer可视化编辑器内设置 #

• 进入WordPress后台对应页面的编辑页，启动Visual Composer编辑模式
• 点击目标图片模块的编辑按钮，打开参数设置面板
• 找到「自定义属性」或「图片尺寸设置」分区：
  • 若有直接的宽度、高度输入栏，直接填入对应数值后保存即可
  • 若无对应输入栏，在自定义属性栏添加width="目标宽度"、height="目标高度"配置，保存后更新页面
• 清理站点缓存后刷新前端页面，即可看到图片标签已携带宽高属性

方法2：批量为所有VC输出的图片自动添加宽高属性 #

如果需要全局生效，可直接修改主题函数配置：

• 进入WordPress后台「外观」-「主题文件编辑器」，选中当前激活主题的functions.php文件
• 在文件末尾追加如下代码：

// 为所有媒体库图片自动补充宽高属性
add_filter('wp_get_attachment_image_attributes', function ($attrs, $attachment) {
    $image_meta = wp_get_attachment_metadata($attachment->ID);
    if (isset($image_meta['width'], $image_meta['height'])) {
        $attrs['width'] = $image_meta['width'];
        $attrs['height'] = $image_meta['height'];
    }
    return $attrs;
}, 10, 2);

• 保存文件并清理缓存，所有通过媒体库上传的图片都会自动带上原生宽高属性

方法3：通过短代码编辑手动添加 #

• 退出Visual Composer可视化编辑模式，切换到WordPress原生代码编辑视图
• 找到对应图片的VC短代码，格式一般为[vc_single_image image="xxx" ...]
• 在短代码参数中追加img_width="目标宽度" img_height="目标高度"，保存更新页面即可生效

内容的提问来源于stack exchange，提问作者Murat Çelebi