WP_Query页面模板失效：仅需显示ACF选中分类的文章

当前你的页面模板通过ACF的select_cat字段选择要展示的分类，但代码仍显示所有分类的文章，问题出在没有正确收集选中分类的ID并传递给WP_Query，以下是修复步骤：

原模板代码 #

<?php /* Template Name: Category Page 2*/ ?>
<?php get_header(); ?>


<div class="container">
  <div class="row">
    <div class="col-md-12">
      <?php
      $terms = get_field('select_cat');
      if ($terms) : $page_cat = array(); ?>
        <div class="mt-3">
            <span class="filter_title">Filter :</span>
            <select class="filter_dropdown">
                <option value="">All</option>
                <?php foreach ($terms as $term) : ?>
                    <option value="<?php echo esc_url(get_term_link($term)); ?>" data-thumbnail="<?php echo get_field('flag_image' , esc_html($term->taxonomy . '_' . $term->term_id)); ?>"><?php echo esc_html($term->name); ?></option>
                <?php endforeach; ?>
            </select>
        </div>
      <?php endif; ?>
    </div>
  </div>
</div>

<?php //print_r($page_cat); 
?>
<?php
$posts = new WP_Query([
  'post_type' => 'post',
  'post_status' => 'publish',
  'posts_per_page' => 9,
  'cat' => $page_cat,
  'orderby' => 'date',
  'order' => 'DESC',
  'paged' => 1,
]);
?>

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <?php if ($posts->have_posts()) : ?>
              <div class="row post-list">
                <?php
                $i = 1;
                while ($posts->have_posts()) : $posts->the_post(); ?>
                    <?php 
                        $author_id = get_the_author_meta('ID');
                        $profilepicture = get_user_meta( $author_id, 'profilepicture', 'true' );
                        $display_name = get_the_author_meta( 'display_name', $author_id );
                    ?>
                    <div class="catpage_post_col col-md-<?php if ($i == 1) {echo "12";}else{echo "6";} ?>">
                        <div>
                            <a href="<?php echo get_permalink(); ?>"><img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>" class="img-fluid catpage_post_feature_img<?php if ($i == 1) {echo '-01';}?>"></a>
                        </div>
                        <div>
                            <span class="post_author_info">
                                <img src="<?php echo $profilepicture; ?>" class="post_author_img">
                                <span class="single_post_author_name">
                                    <a href="<?php echo esc_url( get_author_posts_url( $author_id ) ); ?>"><?php the_author(); ?></a>
                                </span>
                            </span>
                            <span class="post_date_info">
                                <?php echo get_the_date(); ?>
                            </span>
                            <?php if ($i == 1) { ?>
                                <span class="post_read_info">
                                    <?php echo do_shortcode('[rt_reading_time postfix="MINS READ" postfix_singular="minute"]') ?>
                                </span>
                            <?php } ?>
                        </div>
                        <h4 class="catpage_post_title"><a href="<?php echo get_permalink(); ?>" class="catpage_post_title_link"><?php echo get_the_title(); ?></a></h4>
                        <p class="catpage_post_excerpt">
                          <?php
                                $excerpt = get_the_excerpt(); 
                                $excerpt = substr( $excerpt, 0, 150 );
                                $result = substr( $excerpt, 0, strrpos( $excerpt, ' ' ) );
                                echo $result; 
                            ?>
                         </p>
                        <a href="<?php echo get_permalink(); ?>" class="catpage_post_link">CONTINUE READING</a>
                    </div>
                <?php $i++; endwhile;
                ?>
              </div>
            <?php endif; ?>
            <?php wp_reset_postdata(); ?>

            <div class="vc_btn3-container  with-icon without_col_change vc_btn3-center text-center mb-5 load-more-div">
                <a class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-round vc_btn3-style-classic vc_btn3-color-success d-inline-block load-more" href="#">Load more</a>
            </div>

        </div>
        <div class="col-md-4 post-sidebar">
            <?php dynamic_sidebar( 'sidebar01' ); ?>
        </div>
    </div>
</div>


<?php get_footer(); ?>

<script type="text/javascript">
  let currentPage = 1;
  $('.load-more').on('click', function(event) {
    event.preventDefault();
    currentPage++; // Do currentPage + 1, because we want to load the next page
    $.ajax({
      type: 'POST',
      url: '/wp-admin/admin-ajax.php',
      dataType: 'json',
      data: {
        action: 'weichie_load_more',
        paged: currentPage,
        page_cat: <?php echo json_encode($page_cat); ?>,
      },
      success: function(res) {
        $('.post-list').append(res.html);
        if (currentPage >= res.max) {
          $('.load-more-div').hide();
        }

      }
    });
  });
</script>

<script>
$(document).ready(function() {
    $(".filter_dropdown").change(function(){
        window.location = $('.filter_dropdown').val();
    });
})
</script>

修复步骤 #

1. 正确收集选中分类的ID #

原代码中$page_cat仅初始化了空数组，但没有将选中分类的ID添加进去。修改分类字段处理部分：

<?php
$terms = get_field('select_cat');
$page_cat = array();
if ($terms) :
    // 遍历选中的分类，收集ID到数组
    foreach ($terms as $term) {
        $page_cat[] = $term->term_id;
    }
?>

2. 调整WP_Query参数 #

确保只有当$page_cat不为空时，才添加分类筛选条件，避免空数组导致显示所有文章：

<?php
// 初始化基础查询参数
$args = [
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => 9,
    'orderby' => 'date',
    'order' => 'DESC',
    'paged' => 1,
];

// 如果有选中的分类，添加筛选条件
if (!empty($page_cat)) {
    $args['cat'] = $page_cat;
    
    // 如果是自定义分类，建议使用tax_query更通用：
    // $args['tax_query'] = [
    //     [
    //         'taxonomy' => 'category', // 替换为你的自定义分类slug
    //         'field' => 'term_id',
    //         'terms' => $page_cat,
    //     ]
    // ];
}

$posts = new WP_Query($args);
?>

3. 确保AJAX加载更多功能同步生效 #

需要在后台functions.php中对应的AJAX处理函数weichie_load_more里，同样使用page_cat参数进行筛选：

add_action('wp_ajax_weichie_load_more', 'weichie_load_more');
add_action('wp_ajax_nopriv_weichie_load_more', 'weichie_load_more');

function weichie_load_more() {
    $paged = intval($_POST['paged']);
    $page_cat = $_POST['page_cat'];
    
    $args = [
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => 9,
        'orderby' => 'date',
        'order' => 'DESC',
        'paged' => $paged,
    ];
    
    if (!empty($page_cat)) {
        $args['cat'] = $page_cat;
    }
    
    $posts = new WP_Query($args);
    
    ob_start();
    if ($posts->have_posts()) {
        // 保持文章计数正确，避免第一页之后的布局错乱
        $i = ($paged - 1) * 9 + 1;
        while ($posts->have_posts()) : $posts->the_post();
            $author_id = get_the_author_meta('ID');
            $profilepicture = get_user_meta( $author_id, 'profilepicture', 'true' );
            ?>
            <div class="catpage_post_col col-md-<?php if ($i == 1) {echo "12";}else{echo "6";} ?>">
                <div>
                    <a href="<?php echo get_permalink(); ?>"><img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>" class="img-fluid catpage_post_feature_img<?php if ($i == 1) {echo '-01';}?>"></a>
                </div>
                <div>
                    <span class="post_author_info">
                        <img src="<?php echo $profilepicture; ?>" class="post_author_img">
                        <span class="single_post_author_name">
                            <a href="<?php echo esc_url( get_author_posts_url( $author_id ) ); ?>"><?php the_author(); ?></a>
                        </span>
                    </span>
                    <span class="post_date_info">
                        <?php echo get_the_date(); ?>
                    </span>
                    <?php if ($i == 1) { ?>
                        <span class="post_read_info">
                            <?php echo do_shortcode('[rt_reading_time postfix="MINS READ" postfix_singular="minute"]') ?>
                        </span>
                    <?php } ?>
                </div>
                <h4 class="catpage_post_title"><a href="<?php echo get_permalink(); ?>" class="catpage_post_title_link"><?php echo get_the_title(); ?></a></h4>
                <p class="catpage_post_excerpt">
                    <?php
                        $excerpt = get_the_excerpt(); 
                        $excerpt = substr( $excerpt, 0, 150 );
                        $result = substr( $excerpt, 0, strrpos( $excerpt, ' ' ) );
                        echo $result; 
                    ?>
                </p>
                <a href="<?php echo get_permalink(); ?>" class="catpage_post_link">CONTINUE READING</a>
            </div>
            <?php
            $i++;
        endwhile;
    }
    $html = ob_get_clean();
    
    wp_send_json([
        'html' => $html,
        'max' => $posts->max_num_pages,
    ]);
    wp_die();
}

完成以上修改后，页面就会只展示ACF字段中选中分类下的文章，且加载更多功能也会同步筛选结果。

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