WordPress自定义文章类型中Slick Slider显示多余图片求助

嘿，我来帮你搞定这个问题！你遇到的多余图片src问题，大概率是PHP查询逻辑的小错误导致的，咱们一步步来排查和修复：

先把你的代码贴出来方便分析：

你的page-aboutus.php代码 #

<div class = "aboutus-ourworks" id = "wrapper"> 
<?php $loop = new WP_Query( array( 'post_type' => 'latest_work_feature', 'order' => 'ASC')); 
while( $loop->have_posts() ) :$loop->the_post(); 
if ( have_posts() ): 
$imagess = get_field('latest_work_image'); 
$title = the_title(); ?> 
<?php foreach ($imagess as $image1) : ?> 
<img src = "<?php echo $image1; ?>" alt=""> 
<?php endforeach; ?> 
<?php endif; ?> 
<?php endwhile; ?> 

你的script.js代码 #

$(document).ready(function(){
  $('.aboutus-ourworks').slick({
    arrows: false,
    speed: 700,
    // autoplay:false,
  });
});

问题根源在哪？ #

仔细看你的PHP代码，有两个关键错误：

1. 错误的查询判断：在自定义的$loop循环里，你用了if ( have_posts() ):——这个函数是针对WordPress全局主查询的，不是你定义的$loop查询！这会导致逻辑混乱，重复输出图片，甚至输出不属于你自定义文章类型的内容。
2. 标题函数用错了：the_title()是直接把标题打印到页面的，你把它赋值给$title完全没用，反而会意外输出标题，应该用get_the_title()来获取标题存到变量里。

修复后的代码 #

我给你调整了PHP代码，修正了逻辑问题，还加了一些安全和健壮性处理：

<div class="aboutus-ourworks" id="wrapper"> 
<?php 
// 初始化自定义文章查询
$loop = new WP_Query( array( 
    'post_type' => 'latest_work_feature', 
    'order' => 'ASC'
)); 

// 先检查自定义查询有没有文章
if ( $loop->have_posts() ) :
    while( $loop->have_posts() ) : $loop->the_post(); 
        $imagess = get_field('latest_work_image'); 
        // 用get_the_title()获取标题到变量，避免直接输出
        $title = get_the_title();
        
        // 先确认图片字段存在且是数组，再循环输出
        if ( $imagess && is_array($imagess) ) :
            foreach ($imagess as $image1) : ?> 
                <img src="<?php echo esc_url($image1); ?>" alt="<?php echo esc_attr($title); ?>"> 
            <?php endforeach; ?> 
        <?php endif; ?> 
    <?php endwhile; 
    // 重置查询上下文，避免影响后续WordPress功能
    wp_reset_postdata();
endif; ?> 
</div>

额外注意事项 #

如果修复后还是有多余图片，你可以检查这两点：

• Slick的循环设置：Slick默认会开启无限循环（infinite: true），这时候它会克隆幻灯片来实现无缝滚动，看起来像多余的图片。如果不需要循环，就在初始化配置里加infinite: false。
• ACF字段内容：确认你在latest_work_image这个ACF字段里，有没有不小心上传或添加了多余的图片。

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