WordPress+Bootstrap开发：数组长度不足时填充3个列div的需求

嘿，这个问题其实很好解决！我之前也碰到过类似的Bootstrap网格布局问题，核心思路就是不管分类下实际有多少篇文章，都要确保.row里固定输出3个.col容器——不足的就用空列占位，这样Bootstrap的网格系统就能保持正确的排版了。

给你两种可行的实现方案，选你习惯的写法就行：

方案一：固定循环3次（直观易懂） #

用for循环直接控制生成3个列，每次循环判断当前位置是否有对应的文章，有就填充内容，没有就输出空列：

<div class="row">
    <?php
    // 先截取分类下的前3篇文章
    $display_posts = array_slice($posts_array, 0, 3);
    
    // 强制循环3次，确保生成3个列容器
    for ($i = 0; $i < 3; $i++) {
        // 检查当前索引是否存在文章
        if (isset($display_posts[$i])) {
            $post = $display_posts[$i];
            setup_postdata($post); // 必须调用这个，让WordPress模板函数正常工作
    ?>
            <div class="col col-12 col-lg-4">
                <?php echo get_the_post_thumbnail(); ?>
                <?php echo esc_html($post->post_title); // 加上转义更安全，符合WordPress开发规范 ?>
            </div>
    <?php
        } else {
            // 没有文章时输出空的占位列
    ?>
            <div class="col col-12 col-lg-4"></div>
    <?php
        }
    }
    wp_reset_postdata(); // 重置全局post对象，避免影响后续代码
    ?>
</div>

方案二：补全文章数组再循环（简洁写法） #

先把文章数组补全到3个元素，不足的用null填充，再用foreach循环遍历：

<div class="row">
    <?php
    $display_posts = array_slice($posts_array, 0, 3);
    // 用array_pad把数组补到3个元素，缺的位置用null填充
    $display_posts = array_pad($display_posts, 3, null);
    
    foreach ($display_posts as $post) {
        if ($post) {
            setup_postdata($post);
    ?>
            <div class="col col-12 col-lg-4">
                <?php echo get_the_post_thumbnail(); ?>
                <?php echo esc_html($post->post_title); ?>
            </div>
    <?php
        } else {
    ?>
            <div class="col col-12 col-lg-4"></div>
    <?php
        }
    }
    wp_reset_postdata();
    ?>
</div>

关键注意点： #

1. setup_postdata()和wp_reset_postdata()不能忘：get_the_post_thumbnail()这类WordPress模板函数依赖全局$post对象，调用这两个函数能确保缩略图、标题等数据正确获取，同时避免影响后续代码。
2. 加上esc_html()转义标题：这是WordPress开发的最佳实践，能防止XSS安全漏洞。
3. 空的.col容器不会影响布局：Bootstrap的网格系统会自动分配每列的宽度，空列只是占位，不会破坏整体排版。

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