Visual Composer自定义元素发布后图标与图片无法显示问题求助

图标不显示排查 #

• 确认Openiconic字体样式已加载
  VC不会为自定义元素自动加载第三方图标库资源，你需要在短代码渲染逻辑中手动引入对应样式，参考代码：

  wp_enqueue_style( 'openiconic', vc_asset_url( 'lib/bower/openiconic/css/openiconic.min.css' ) );
  

• 确认图标类名输出格式正确
  iconpicker存储的仅为图标后缀名，输出时需要拼接Openiconic专属类前缀，参考代码：

  <i class="vc-oi vc-oi-<?php echo esc_attr( $icon_openiconic ); ?>"></i>
  

• 确认依赖参数已定义
  你给图标参数配置了icon_type等于openiconic的显示依赖，必须先在参数列表中定义icon_type参数，否则图标选择器不会生效，参数值也无法正常存储。

图片不显示排查 #

attach_image类型参数存储的是附件ID而非图片URL，直接输出参数只会得到数字ID，需要先将ID转换为可访问的图片地址，参考代码：

// 第二个参数可指定图片尺寸，如thumbnail、medium或自定义尺寸
$img_url = wp_get_attachment_image_url( $image, 'full' );
// 输出img标签
echo '<img src="'.esc_url( $img_url ).'" alt="">';

通用检查项 #

• 确认短代码渲染函数中已声明接收对应参数，参考代码：

  extract( shortcode_atts( array(
    'icon_openiconic' => '',
    'image' => '',
    // 其余参数依次在此声明
  ), $atts ) );
  

• 修改代码后清理所有缓存再测试，包括站点缓存、WPBakery元素缓存、浏览器本地缓存，避免缓存导致的修改不生效问题。

内容的提问来源于stack exchange，提问作者Umair Fayyaz