主题更新后WPBakery标签在自定义PHP模板中无法正常显示

安全阿岳

2026-7-15

问题分析与解决方案

核心原因

新版Salient主题及配套WPBakery Page Builder对标签模块的短代码结构、渲染逻辑做了调整，旧版直接通过do_shortcode输出自定义拼接短代码的方式，无法适配新版的解析规则，导致标签容器（UL）未被正确初始化，内容虽存在于DOM但无法正常显示。

解决步骤

1. 确认新版短代码结构

先在WP后台用WPBakery编辑器新建测试页面，插入标签模块（Salient主题可能是自定义的「Nectar Tabs」而非原生WPBakery的Tabs），切换到「文本模式」查看生成的短代码，对比你当前的旧代码：

原生WPBakery新版短代码通常是[vc_tabs]包裹[vc_tab]
Salient主题自定义标签模块一般是[nectar_tabs]包裹[nectar_tab]，且带有style、active_tab等必填属性

2. 替换为新版兼容的短代码格式

根据测试得到的短代码结构，修改你的模板代码。比如Salient新版的写法：

echo do_shortcode(
    '[nectar_tabs style="default" active_tab="1" tab_position="top"]'.
    '[nectar_tab title="Description" id="video-description-tab"]'.
    $clip_tab . $description_tab .
    '[/nectar_tab]' .
    
    get_post_meta(get_the_ID(), "additional_tabs", true) . 
    
    '[nectar_tab title="Selected Clips" id="selected-clips-tab"]' .
    $extras_tab .
    '[/nectar_tab]' .
    
    '[nectar_tab title="Create a Clip" id="create-clip-tab"]' .
    $share_tab .
    '[/nectar_tab]' .
    
    '[/nectar_tabs]'
);

注意：additional_tabs字段存储的旧版短代码也需要同步替换为新版格式，否则拼接后会导致解析异常。

3. 改用WPBakery官方API渲染（更稳定）

直接拼接短代码容易因主题/WPBakery的过滤钩子失效，建议用官方API生成并渲染：

// 构造标签数据数组
$tabs_data = [
    [
        'title'   => 'Description',
        'tab_id'  => 'video-description-tab',
        'content' => $clip_tab . $description_tab
    ],
    [
        'title'   => 'Selected Clips',
        'tab_id'  => 'selected-clips-tab',
        'content' => $extras_tab
    ],
    [
        'title'   => 'Create a Clip',
        'tab_id'  => 'create-clip-tab',
        'content' => $share_tab
    ]
];

// 处理自定义字段中的额外标签（需确保字段内短代码已更新）
$additional_tabs = get_post_meta(get_the_ID(), "additional_tabs", true);

// 构建完整短代码内容
$tabs_content = $additional_tabs;
foreach ($tabs_data as $tab) {
    $tabs_content .= sprintf(
        '[vc_tab title="%s" tab_id="%s"]%s[/vc_tab]',
        esc_attr($tab['title']),
        esc_attr($tab['tab_id']),
        $tab['content']
    );
}

// 用WPBakery API渲染标签模块
echo apply_filters(
    'vc_build_shortcode',
    '[vc_tabs style="classic" active_tab="1"]' . $tabs_content . '[/vc_tabs]'
);

4. 排查CSS/JS异常

如果替换短代码后仍有问题：

检查浏览器控制台是否有JS错误，确认WPBakery的初始化脚本是否正常加载（需确保模板中调用了wp_head()和wp_footer()）
对比正常页面（编辑器生成的标签）的HTML结构，查看自定义模板生成的标签是否缺失类名、属性，补全后调整CSS适配

5. 验证子主题模板兼容性

确保自定义文章类型模板符合新版Salient的模板层次，必要时将短代码输出逻辑迁移到主题默认的content-{post-type}.php模板中，避免因模板上下文缺失导致WPBakery无法正常解析。

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