如何用WPBakery（VS）轮播展示用户浏览量Top5的帖子？

给你几个接地气的解决思路，按需选择：

1. 写自定义短代码整合数据与轮播结构 #

WPBakery的轮播只认特定HTML结构，直接插WPP短代码不兼容，你可以自己写个短代码，调用WPP接口获取热门帖子数据，再输出轮播能识别的格式：

• 打开主题的functions.php（或者用「代码片段」插件更安全），添加这段代码：

function wpp_vc_carousel() {
    // 调用WPP获取前5条热门帖子
    $popular_posts = wpp_get_most_popular(array(
        'limit' => 5,
        'post_type' => 'post'
    ));
    
    // 输出WPBakery轮播要求的结构
    $output = '<div class="vc_row wpb_row vc_inner vc_row-fluid">';
    $output .= '<div class="vc_col-sm-12 wpb_column vc_column_container">';
    $output .= '<div class="wpb_wrapper">';
    $output .= '<div class="vc_carousel-inner">';
    
    foreach ($popular_posts as $post) {
        setup_postdata($post);
        $output .= '<div class="vc_carousel-slide">';
        $output .= '<a href="' . get_permalink($post->ID) . '">' . get_the_post_thumbnail($post->ID, 'medium') . '</a>';
        $output .= '<h3><a href="' . get_permalink($post->ID) . '">' . get_the_title($post->ID) . '</a></h3>';
        $output .= '<p>' . wp_trim_words(get_the_excerpt($post->ID), 15) . '</p>';
        $output .= '</div>';
    }
    
    wp_reset_postdata();
    
    $output .= '</div></div></div></div>';
    return $output;
}
add_shortcode('wpp_vc_carousel', 'wpp_vc_carousel');

• 保存后，在第二个标签页添加「文本」元素，插入短代码[wpp_vc_carousel]，就能生成符合WPBakery要求的轮播结构。

2. 给WPP输出套自定义轮播样式 #

不想写代码的话，用WPBakery的「自定义HTML」元素，搭配简单JS/CSS把WPP输出改成轮播：

• 进入WPP设置页面，找到「HTML标记」，把外层容器类改成wpp-carousel，列表项类改成wpp-slide；
• 在第二个标签页添加「自定义HTML」元素，插入WPP短代码[wpp limit=5]；
• 再添加一个「自定义HTML」元素，插入轮播初始化JS（前提是网站已加载slick的CSS和JS，也可以换成WPBakery自带的轮播脚本）：

<script>
jQuery(function($){
    $('.wpp-carousel').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        arrows: true,
        dots: true
    });
});
</script>

3. 换支持短代码的轮播插件 #

找个WPBakery兼容、能插入短代码的轮播插件，比如Smart Slider 3：

• 安装后新建滑块，把每个幻灯片的内容设为WPP短代码；
• 复制滑块的短代码到第二个标签页，就能正常显示带热门帖子的轮播。

4. 调整WPP输出结构适配WPBakery轮播 #

直接修改WPP的输出标记，让它匹配WPBakery轮播的要求：

• 进入WPP设置→「HTML标记」；
• 把「开始」字段改成<div class="vc_carousel-inner">，「结束」字段改成</div>；
• 把「帖子HTML标记」里的<li>改成<div class="vc_carousel-slide">，</li>改成</div>；
• 保存后把WPP短代码放进WPBakery轮播元素即可（注意：插件更新后可能重置设置，记得备份）。

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