如何在自定义文章类型归档页显示ACF字段图片

你只需结合ACF字段调用逻辑与WP_Query循环上下文，替换归档页面里的固定图片即可，具体修改如下：

修改后的完整归档页面代码 #

//archive page
<?php
$args = array(  
    'post_type' => 'speakers',
);
$loop = new WP_Query( $args ); 
while ( $loop->have_posts() ) {
    $loop->the_post(); 
    // 提前获取ACF图片字段，避免空标签
    $speaker_img = get_field('speaker_img');
?>
<li>
    <a href="<?php echo get_permalink(); ?>">
        <div class="speaker-img">
            <?php if($speaker_img): ?>
                <img src="<?php echo esc_url($speaker_img); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
            <?php endif; ?>
        </div>
        <div class="speaker-name">
            <p><?php the_title(); ?></p>
        </div>
        <div class="speaker-city">
            <p>Fribourg</p> <!-- 如果城市也是ACF字段，可替换为 <?php the_field('speaker_city'); ?> -->
        </div>
    </a>
</li> 
<?php 
}
// 重置查询上下文，避免后续逻辑出错
wp_reset_postdata();
?>

关键修改说明 #

• 替换固定图片为ACF字段：在WP_Query循环中，the_post()已经设置了当前帖子的上下文，因此可以直接用get_field('speaker_img')调用自定义图片字段，逻辑和单页面完全一致。
• 增加字段有效性判断：通过if($speaker_img)判断字段是否存在，避免未设置图片的帖子出现无效空<img>标签。
• 优化用户体验与可访问性：把空链接#替换为get_permalink()，让条目可跳转至对应单页面；给图片添加alt属性并填充文章标题，提升页面可访问性。
• 重置查询上下文：循环结束后调用wp_reset_postdata()，避免后续WordPress查询出现上下文混乱问题。

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