wpBakery后端vc_link字段保存后显示异常问题排查

问题情况 #

在wpBakery后端自定义元素中，使用vc_link字段时，输入链接后显示正常，但保存后字段内容变为一串冗长的加密字符串；前端页面的链接显示与跳转功能均正常。

自定义元素vc_map代码 #

function darkteaser_vc_map_init() {

$settings = array(
    'name'      => __( 'kleine Teaserbox mit Bild', 'js_composer' ),        // shortcode name
    'base'      => 'my_darkteaser_element',                         // shortcode base [my_darkteaser_element.php]
    'category'  => __( 'Meine Elemente', 'js_composer' ),   // param category tab in add elements view
    'icon'      => get_template_directory_uri() . '/image/darkteaser.png',   // Simply pass url to your icon here
    'description'   => __( 'kleine Teaserbox mit Bild und Text', 'js_composer' ),       // element description in add elements view

    'show_settings_on_create' => false,
    // don't show params window after adding
    'weight'                  => - 5,
    // Depends on ordering in list, Higher weight first
    
    'html_template'           => dirname( __FILE__ ) . '/vc_templates/my_darkteaser_element.php',
    // if you extend VC within your theme then you don't need this, VC will look for shortcode template in "wp-content/themes/your_theme/vc_templates/my_darkteaser_element.php" automatically. In this example we are extending VC from plugin, so we rewrite template

    'front_enqueue_css'       => preg_replace( '/\s/', '%20', plugins_url( 'assets/front_enqueue_css.css', __FILE__ ) ),
    // This will load extra css file in frontend editor (when you edit page with VC)

    'params' => array(
        array(
            'type'          => 'attach_image',
            'class'         => 'teaserboxPicDunkel',
            'heading'       => __( 'Bild auswählen', 'js_composer' ),
            'param_name'    => 'bildteaser',
            'value'         => __(''),
            'description'   => 'Bild für Teaserbox hinzufügen.'
        ),
        array(
            'type'        => 'textarea_html',
            'holder'      => 'div',
            'class'       => 'teaserboxtextDunkel',
            'heading'     => __( 'Text eingeben', 'js_composer' ),
            'param_name'  => 'content', //param_name for textarea_html must be named "content"
            'value'       => __( '', 'js_composer' ),
            'description' => __( 'Text für Teaserbox.', 'js_composer' )
        ),
        array(
            'type'        => 'vc_link',
            'holder'      => 'div',
            'class'       => 'teaserboxbuttonDunkel',
            'heading'     => __( 'Link setzen', 'js_composer' ),
            'param_name'  => 'linkteaser',
            'value'       => __( '', 'js_composer' ),
            'description' => 'Link zur Seite'
        ),
    )
);
vc_map( $settings );
}
add_action('vc_after_init', 'darkteaser_vc_map_init');

原因分析 #

这个问题的核心是wpBakery的vc_link字段在后端编辑界面缺少自动解析逻辑：

• vc_link字段会将链接的完整数据（URL、标题、打开方式等）序列化为字符串存储到数据库；
• 前端能正常显示是因为模板文件中已经调用了wpBakery内置的vc_build_link()等函数解析序列化数据；
• 但自定义元素的后端配置中，没有触发wpBakery为vc_link字段提供的后端格式化渲染机制，导致保存后直接显示原始的序列化字符串，而非可读的链接格式。

解决方法 #

方法1：添加admin_label属性 #

在vc_link字段的参数配置中新增admin_label => true，让wpBakery自动在后端解析并格式化链接显示：

array(
    'type'        => 'vc_link',
    'holder'      => 'div',
    'class'       => 'teaserboxbuttonDunkel',
    'heading'     => __( 'Link setzen', 'js_composer' ),
    'param_name'  => 'linkteaser',
    'value'       => __( '', 'js_composer' ),
    'description' => 'Link zur Seite',
    'admin_label' => true, // 新增该属性
),

方法2：指定save_callback回调 #

如果方法1不生效，可以为vc_link字段添加wpBakery内置的保存回调函数，强制处理序列化数据的显示：

array(
    'type'        => 'vc_link',
    'holder'      => 'div',
    'class'       => 'teaserboxbuttonDunkel',
    'heading'     => __( 'Link setzen', 'js_composer' ),
    'param_name'  => 'linkteaser',
    'value'       => __( '', 'js_composer' ),
    'description' => 'Link zur Seite',
    'save_callback' => 'vc_link_safe_save', // 新增该回调
),

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