WordPress循环中如何将帖子嵌套到不同父级div容器中？

预期目标HTML结构 #

<div class="left">
    <div class="post">Post 1</div>
</div>
<div class="right">
    <div class="upper">Post 2</div>
    <div class="lower">Post 3</div>
</div>

当前代码的问题 #

你当前的循环逻辑会在第2、3篇帖子时分别输出独立的.right容器，导致结构不符合预期。要实现嵌套结构，需要把第2、3篇帖子放在同一个.right容器内，并且分别添加upper和lower类。

修正后的代码 #

方法1：先将帖子存入数组再按需输出 #

这种方式逻辑更清晰，便于后续维护：

$cat_query = new WP_Query( array( 
    'cat' => $category_id,
    'posts_per_page' => '3', 
    'order' => 'DESC' 
) );

// 将帖子标题存入数组（也可存储完整post对象）
$posts = array();
while($cat_query->have_posts()) : 
    $cat_query->the_post();
    $posts[] = get_the_title();
endwhile;
wp_reset_postdata(); // 重置查询，避免影响全局post对象

// 输出目标结构
if (!empty($posts)) {
    // 输出左侧第一篇帖子
    echo '<div class="left">';
        echo '<div class="post">' . esc_html($posts[0]) . '</div>';
    echo '</div>';

    // 输出右侧的两篇帖子
    if (count($posts) >= 2) {
        echo '<div class="right">';
            echo '<div class="upper">' . esc_html($posts[1]) . '</div>';
            if (count($posts) >=3) {
                echo '<div class="lower">' . esc_html($posts[2]) . '</div>';
            }
        echo '</div>';
    }
}

方法2：在循环内控制容器的开闭 #

如果不想用数组，也可以在循环里通过计数控制容器的开始和结束：

$cat_query = new WP_Query( array( 
    'cat' => $category_id,
    'posts_per_page' => '3', 
    'order' => 'DESC' 
) );

$count = 0;
while($cat_query->have_posts()) : 
    $cat_query->the_post(); 
    $count++;

    if($count == 1) : ?>
        <div class="left">
            <div class="post"><?php the_title(); ?></div>
        </div>
    <?php elseif($count == 2) : ?>
        <div class="right">
            <div class="upper"><?php the_title(); ?></div>
    <?php elseif($count == 3) : ?>
            <div class="lower"><?php the_title(); ?></div>
        </div>
    <?php endif;

endwhile;
wp_reset_postdata();

补充说明 #

• 两种方法都能实现预期结构，方法1更灵活，可优雅处理帖子数量不足3的情况；方法2贴近你原本的写法，逻辑直接。
• 必须添加wp_reset_postdata()，避免自定义查询修改全局$post对象导致后续代码出错。
• 建议用esc_html()包裹输出内容（如方法1所示），防止XSS安全问题。

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