WordPress AJAX回调中循环渲染不同DIV包裹帖子的问题排查

我做了一个AJAX回调函数用来展示带特定标签的projects类型文章，基础功能正常，但想给5篇文章分别套上不同类名的DIV却实现不了，现在只能显示第一篇文章。

现有代码 #

function filter_projects() {
  $tagSlug = $_POST['tags'];

  if(!empty($tagSlug)) {
    
    $ajaxposts = new WP_Query(array(
      'post_type' => 'projects',
      'posts_per_page' => 5,
      'order_by' => 'date',
      'order' => 'desc',
      'tax_query' => array(
          array(
              'taxonomy' => 'tag',
              'terms' => $tagSlug,
              'field' => 'slug',
          )
      ),
    ));
    
  } else {
    
    $ajaxposts = new WP_Query(array(
      'post_type' => 'projects',
      'posts_per_page' => 5,
      'order_by' => 'date',
      'order' => 'desc',
    ));
    
  }

    $response = '';



  if ( $ajaxposts->have_posts() ) :     
      while ( $ajaxposts->have_posts() && $ajaxposts->current_post = 0 ) : $ajaxposts->the_post(); 
        $template = include('templates/index-case.php');         
        $response .= '<div class="1">' . $template . '</div>';
      endwhile; 
  endif;

  if ( $ajaxposts->have_posts() ) :     
      while ( $ajaxposts->have_posts() && $ajaxposts->current_post = 1 ) : $ajaxposts->the_post(); 
        $template = include('templates/index-case.php');         
        $response .= '<div class="2">' . $template . '</div>';
      endwhile; 
  endif;

  if ( $ajaxposts->have_posts() ) :     
      while ( $ajaxposts->have_posts() && $ajaxposts->current_post = 2 ) : $ajaxposts->the_post(); 
        $template = include('templates/index-case.php');         
        $response .= '<div class="3">' . $template . '</div>';
      endwhile; 
  endif;

  if ( $ajaxposts->have_posts() ) :     
      while ( $ajaxposts->have_posts() && $ajaxposts->current_post = 3 ) : $ajaxposts->the_post(); 
        $template = include('templates/index-case.php');         
        $response .= '<div class="4">' . $template . '</div>';
      endwhile; 
  endif;

  if ( $ajaxposts->have_posts() ) :     
      while ( $ajaxposts->have_posts() && $ajaxposts->current_post = 4 ) : $ajaxposts->the_post(); 
        $template = include('templates/index-case.php');         
        $response .= '<div class="4">' . $template . '</div>';
      endwhile; 
  endif;
  

  echo $response;
  exit;
}
add_action('wp_ajax_filter_projects', 'filter_projects');
add_action('wp_ajax_nopriv_filter_projects', 'filter_projects');

期望输出 #

<div class="one">Post One</div>
<div class="two">Post Two</div>
<div class="three">Post Three</div>
<div class="four">Post Four</div>
<div class="five">Post Five</div>

你的代码问题核心在于：

1. 多段if+while结构逻辑错误，$ajaxposts->current_post = 0是赋值而非比较，且每次循环仅处理单篇文章后终止，无法遍历剩余内容；
2. 数字开头的类名不符合CSS规范；
3. include直接执行模板输出，无法将内容赋值给变量，需要用输出缓冲捕获内容。

修改后的代码如下：

function filter_projects() {
  $tagSlug = $_POST['tags'];

  // 统一整理查询参数
  $args = array(
    'post_type' => 'projects',
    'posts_per_page' => 5,
    'order_by' => 'date',
    'order' => 'desc',
  );

  if(!empty($tagSlug)) {
    $args['tax_query'] = array(
      array(
        'taxonomy' => 'tag',
        'terms' => $tagSlug,
        'field' => 'slug',
      )
    );
  }

  $ajaxposts = new WP_Query($args);
  $response = '';
  // 定义对应类名数组
  $classNames = ['one', 'two', 'three', 'four', 'five'];

  if ($ajaxposts->have_posts()) :     
    while ($ajaxposts->have_posts()) : $ajaxposts->the_post(); 
      // 获取当前文章的索引
      $index = $ajaxposts->current_post;
      // 确保索引不超出类名数组范围
      $className = isset($classNames[$index]) ? $classNames[$index] : '';
      
      // 用输出缓冲捕获模板内容
      ob_start();
      include('templates/index-case.php');
      $template = ob_get_clean();
      
      $response .= '<div class="' . $className . '">' . $template . '</div>';
    endwhile; 
  endif;

  // 重置WP查询状态，避免影响后续操作
  wp_reset_postdata();

  echo $response;
  exit;
}
add_action('wp_ajax_filter_projects', 'filter_projects');
add_action('wp_ajax_nopriv_filter_projects', 'filter_projects');

修改说明 #

• 合并重复的查询参数，简化代码结构；
• 用单个while循环遍历所有文章，通过$ajaxposts->current_post获取索引匹配对应类名；
• 使用ob_start()和ob_get_clean()捕获模板输出，正确赋值给变量；
• 增加wp_reset_postdata()重置查询状态，保证全局环境不受影响。

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