Visual Composer自定义vc_single_image无法保存图片问题排查

看起来你遇到的图片无法保存/不显示的问题，主要来自几个代码和操作上的小疏漏，我帮你逐个拆解：

1. 模板目录设置的代码未被正确触发 #

你定义了设置VC自定义模板目录的函数，但没有将这个函数绑定到正确的钩子上，导致这段代码完全没执行——VC根本不知道要去你的主题vc-elements目录加载自定义模板，还是在用默认的短码模板。

修正方法： #

把钩子绑定的代码改成这样：

function vc_set_custom_template_dir() { 
    if( function_exists('vc_set_shortcodes_templates_dir') ){ 
        vc_set_shortcodes_templates_dir( get_template_directory() . '/vc-elements' ); 
    } 
} 
add_action( 'vc_after_init', 'vc_set_custom_template_dir' ); 

function vc_add_second_image_param() { 
    $vc_single_image_new_params = array( 
        array( 
            'type' => 'attach_image', 
            'heading' => __( 'Second Image', 'js_composer' ), 
            'param_name' => 'secondImage', 
            'value' => '', 
            'description' => __( 'If you need use 2 image inside one "single image"', 'js_composer' ), 
            'dependency' => array( 
                'element' => 'source', 
                'value' => 'media_library', 
            ), 
            'admin_label' => true, 
            'group' => 'Additional', // 修正你拼写错误的Addititonal
        ), 
    ); 
    vc_add_params( 'vc_single_image', $vc_single_image_new_params ); 
}
add_action( 'vc_after_init', 'vc_add_second_image_param' );

2. 自定义模板文件名错误 #

你提到复制js_composer/include/shortcodes/vc_single_images文件到主题目录，但VC的vc_single_image短码对应的原文件是vc_single_image.php（单数形式，不是复数vc_single_images）。如果文件名不对，VC会忽略你的自定义模板，继续用默认的输出逻辑，自然看不到第二张图。

修正方法： #

• 复制原文件js_composer/include/shortcodes/vc_single_image.php到主题的MyTheme/vc-elements/目录下
• 保持文件名不变，依然为vc_single_image.php

3. 自定义模板中未正确处理secondImage参数 #

VC的attach_image类型参数保存的是图片的附件ID，不是直接的URL。如果你只是在模板里硬写$secondImage变量，输出的会是一串数字（ID），而且没有判断参数是否为空的逻辑，也会导致保存后无法正确渲染。

修正方法： #

打开你复制到主题的vc_single_image.php，找到原有的图片输出代码，在后面添加第二张图的输出逻辑：

// 在原有<img>标签之后添加这段代码
<?php if ( ! empty( $secondImage ) ) : ?>
    <img src="<?php echo esc_url( wp_get_attachment_url( $secondImage ) ); ?>" class="vc_single_image-img attachment-full template-mac--ins">
<?php endif; ?>

这段代码既会判断是否存在第二张图的参数，又能正确获取到图片的URL，同时用esc_url保证输出的URL安全。

4. 额外注意：VC缓存问题 #

有时候VC会缓存短码配置，修改代码后可能需要清除缓存才能生效：

• 进入WordPress后台的「Visual Composer」→「General Settings」，找到「Reset Templates Cache」选项，点击重置
• 同时可以清除浏览器缓存，再刷新页面测试

按照上面的步骤修正后，应该就能正常保存并显示两张图片了。

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