WordPress中Bootstrap布局奇数篇文章不显示问题求助

嘿，我来帮你搞定这个布局问题！根据你的需求，第一篇文章全屏（col-sm-12），剩下的文章里偶数篇在左列、第3篇及以后的奇数篇在右列，现在右列加载不出内容，大概率是循环计数的逻辑出了问题——要么是没跳过第一篇，要么是奇数判断的条件没写对。

我给你两种可行的解决方案，你可以根据自己的代码习惯选择：

方案1：用计数器+双重循环（适合不想改太多原有代码的情况） #

这种方式先单独输出第一篇，然后重置循环分别渲染左右列，重点是右列要明确筛选第3篇及以后的奇数文章：

<div class="container">
  <div class="row">
    <?php $post_count = 0; ?>
    <?php if (have_posts()) : ?>
      <!-- 单独输出第一篇文章 -->
      <?php the_post(); $post_count++; ?>
      <div class="col-sm-12 mb-4">
        <h2><?php the_title(); ?></h2>
        <?php the_excerpt(); ?>
        <!-- 这里放你的文章内容模板 -->
      </div>

      <!-- 剩余文章分左右两列 -->
      <div class="row">
        <!-- 左列：第2、4、6...篇（偶数序号） -->
        <div class="col-sm-6">
          <?php rewind_posts(); // 重置循环指针 ?>
          <?php $post_count = 0; ?>
          <?php while (have_posts()) : the_post(); $post_count++; ?>
            <?php if ($post_count > 1 && $post_count % 2 == 0) : ?>
              <div class="mb-4">
                <h2><?php the_title(); ?></h2>
                <?php the_excerpt(); ?>
                <!-- 文章内容 -->
              </div>
            <?php endif; ?>
          <?php endwhile; ?>
        </div>

        <!-- 右列：第3、5、7...篇（从第3篇开始的奇数序号） -->
        <div class="col-sm-6">
          <?php rewind_posts(); // 再次重置循环指针 ?>
          <?php $post_count = 0; ?>
          <?php while (have_posts()) : the_post(); $post_count++; ?>
            <?php if ($post_count >= 3 && $post_count % 2 != 0) : ?>
              <div class="mb-4">
                <h2><?php the_title(); ?></h2>
                <?php the_excerpt(); ?>
                <!-- 文章内容 -->
              </div>
            <?php endif; ?>
          <?php endwhile; ?>
        </div>
      </div>
    <?php endif; ?>
  </div>
</div>

方案2：用数组存储文章后拆分（逻辑更清晰，避免循环重置） #

这种方式先把所有文章存到数组里，单独取出第一篇，再把剩下的文章按索引拆分左右列，不容易出错：

<?php
// 先获取所有文章到数组中
$all_posts = [];
if (have_posts()) :
  while (have_posts()) : the_post();
    $all_posts[] = $post;
  endwhile;
endif;

// 取出第一篇文章
$first_post = array_shift($all_posts);
?>

<div class="container">
  <div class="row">
    <!-- 输出第一篇全屏文章 -->
    <?php if ($first_post) : setup_postdata($first_post); ?>
      <div class="col-sm-12 mb-4">
        <h2><?php the_title(); ?></h2>
        <?php the_excerpt(); ?>
        <!-- 文章内容模板 -->
      </div>
    <?php wp_reset_postdata(); endif; ?>

    <!-- 剩余文章分左右列 -->
    <div class="row">
      <!-- 左列：原第2、4、6...篇（对应数组索引0、2、4...） -->
      <div class="col-sm-6">
        <?php foreach ($all_posts as $index => $post) : setup_postdata($post); ?>
          <?php if ($index % 2 == 0) : ?>
            <div class="mb-4">
              <h2><?php the_title(); ?></h2>
              <?php the_excerpt(); ?>
              <!-- 文章内容 -->
            </div>
          <?php endif; ?>
        <?php endforeach; wp_reset_postdata(); ?>
      </div>

      <!-- 右列：原第3、5、7...篇（对应数组索引1、3、5...） -->
      <div class="col-sm-6">
        <?php foreach ($all_posts as $index => $post) : setup_postdata($post); ?>
          <?php if ($index % 2 != 0) : ?>
            <div class="mb-4">
              <h2><?php the_title(); ?></h2>
              <?php the_excerpt(); ?>
              <!-- 文章内容 -->
            </div>
          <?php endif; ?>
        <?php endforeach; wp_reset_postdata(); ?>
      </div>
    </div>
  </div>
</div>

为什么之前右列加载失败？ #

大概率是你之前的右列条件没排除第一篇文章，比如直接写了$post_count % 2 != 0，这样会把第一篇（序号1，奇数）也筛选进去，但第一篇已经单独显示了，导致后续的奇数文章没被正确匹配。而上面的方案里，右列明确加了$post_count >=3（方案1）或者用数组索引拆分（方案2），就能精准定位到第3篇及以后的奇数文章了。

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