WordPress单页两个轮播滑块如何分别加载对应分组图片

问题原因 #

两组图片混合加载的核心原因和类名没有直接关系，是当前代码的查询逻辑没有做筛选：get_posts()只传了numberposts => -1参数，会拉取站点所有公开文章，不管复制几份这段滑块代码，两个滑块拿到的都是完全相同的全量数据，自然会出现图片混排。

注意：原代码中<?php bloginfo('template_url'); ?>没有做任何打印或赋值，属于无效代码，可以直接删除。

两种实现路径 #

方案1：硬编码分组（适合轮播图固定不常修改的场景） #

不需要后台额外配置，直接修改两个滑块的查询参数，给两组内容做物理隔离即可，类名只需要加在滑块最外层容器上，给JS初始化做区分。

1. 先给两组轮播准备对应的内容分类，比如第一组图对应的文章归到分类ID 2，第二组归到分类ID 3
2. 第一个滑块代码修改为：

<section class="up-slider up-slider--group1">
    <div class="up-slider__inner">
    <?php
    global $post;
    $group1_posts = get_posts([ 
        'numberposts' => -1,
        'cat' => 2, // 替换为第一组内容对应的分类ID
    ]);
    if( $group1_posts ){
        foreach( $group1_posts as $post ){
            setup_postdata( $post );
            the_post_thumbnail();
        }
    } 
    wp_reset_postdata();
    ?>
    </div>
</section>

3. 第二个滑块代码修改为：

<section class="up-slider up-slider--group2">
    <div class="up-slider__inner">
    <?php
    global $post;
    $group2_posts = get_posts([ 
        'numberposts' => -1,
        'cat' => 3, // 替换为第二组内容对应的分类ID
    ]);
    if( $group2_posts ){
        foreach( $group2_posts as $post ){
            setup_postdata( $post );
            the_post_thumbnail();
        }
    } 
    wp_reset_postdata();
    ?>
    </div>
</section>

4. 滑块JS初始化时，不要用通用类.up-slider批量选择节点，要分别绑定两个独立容器：

// 初始化第一个滑块
new YourSliderLib('.up-slider--group1', {
  // 对应滑块配置
})
// 初始化第二个滑块
new YourSliderLib('.up-slider--group2', {
  // 对应滑块配置
})

方案2：后台可配置分组（适合需要经常更新轮播图的场景） #

如果需要在WordPress后台随时修改两组轮播的图片，推荐两种实现方式：

• 注册两个独立的自定义文章类型，比如slider_banner、slider_goods，后台分别在两个文章类型下上传对应轮播的图片，前端查询时指定post_type参数拉取对应类型的内容即可
• 用自定义字段功能（比如ACF插件的重复器字段），在当前单页的编辑页添加两个独立的图片上传字段组，分别对应第一组、第二组轮播图，前端直接调用对应字段的图片数组循环输出，不需要走全局get_posts()查询，完全不会出现数据混同的问题。

类名添加说明 #

区分滑块的类名只需要加在最外层的<section>容器上即可，不需要给单个图片标签加特殊类名，图片混排问题和图片类名无关，核心是两个滑块的数据源要做拆分。

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