WordPress主题开发：用Bootstrap 4实现自定义文章类型多列布局

我懂你卡在计数器控制row标签开闭的逻辑上了——旧教程要么讲得太模糊，要么代码过时不适用。结合你的需求（大屏每行4篇、移动端每行2篇），我直接给你可运行的代码，顺便拆解下核心逻辑：

核心思路回顾 #

我们需要用一个计数器跟踪当前已经输出的文章数量：

• 每第1、5、9...篇文章开头，打开一个新的row容器
• 每篇文章都用col-lg-3 col-6的类，自动适配不同屏幕
• 每第4、8、12...篇文章结尾，闭合当前row容器
• 循环结束后，检查是否有未闭合的row（比如总文章数不是4的倍数时），确保HTML结构完整

完整代码实现 #

<?php
// 初始化自定义文章类型查询
$allPostsOfMyType = new WP_Query(array(
    'posts_per_page' => -1,
    'post_type'      => 'my_post_type',
    'orderby'        => 'title',
    'order'          => 'ASC'
));

// 初始化计数器，从0开始
$counter = 0;

if ($allPostsOfMyType->have_posts()) :
    while ($allPostsOfMyType->have_posts()) : $allPostsOfMyType->the_post();
        // 每4篇文章开头，新建一个row（计数器模4等于0时）
        if ($counter % 4 === 0) {
            echo '<div class="row mt-5">';
        }
?>
        <!-- 文章列：lg屏幕占3份（4列），移动端占6份（2列） -->
        <div class="col-lg-3 col-6 mb-4">
            <?php the_post_thumbnail('full', array('class' => 'img-fluid')); ?>
            <h3><?php the_title(); ?></h3>
            <p><?php the_field('fieldName'); ?></p>
            <p><?php the_field('fieldNamer'); ?></p>
            <p><a href="mailto:<?php the_field('fieldName'); ?>"><?php the_field('fieldName'); ?></a></p>
        </div>
<?php
        $counter++;

        // 每4篇文章结尾，闭合当前row（计数器模4等于0时）
        if ($counter % 4 === 0) {
            echo '</div>';
        }
    endwhile;

    // 循环结束后，检查是否有未闭合的row（比如总文章数不是4的倍数）
    if ($counter % 4 !== 0) {
        echo '</div>';
    }

    // 重置查询，避免影响后续WP数据
    wp_reset_postdata();
endif;
?>

关键细节说明 #

1. 类名修正：用col-lg-3 col-6替代单独的col-lg-3，确保移动端自动变成2列布局
2. 图片标签修复：你原来的img标签写法有语法错误，改用the_post_thumbnail()的参数直接添加img-fluid类
3. 字段名修正：the_field()的参数必须加引号（比如the_field('fieldName')），否则会被PHP当作变量解析，导致报错
4. 重置查询：最后一定要加wp_reset_postdata()，恢复WordPress的全局文章对象，避免后续模板出问题
5. 间距优化：给列添加mb-4类，让移动端的文章之间有垂直间距，布局更美观

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