WordPress自定义模板实现Bootstrap每行4列动态文章展示

嘿，刚好我前段时间帮客户做过类似的产品展示板块，结合你已经用ACF做好的动态字段，给你一套落地的代码方案，直接套用就行！

第一步：确保Bootstrap已正确加载 #

首先得确认你的WordPress模板里已经引入了Bootstrap的CSS和JS，最规范的方式是在functions.php里注册并加载：

function enqueue_bootstrap_assets() {
    // 加载Bootstrap CSS（这里用的是Bootstrap 5的CDN，也可以换成本地文件）
    wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css', array(), '5.3.0');
    // 加载Bootstrap JS（依赖Popper，需先加载Popper）
    wp_enqueue_script('popper-js', 'https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js', array('jquery'), '2.11.8', true);
    wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js', array('jquery', 'popper-js'), '5.3.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_bootstrap_assets');

如果你的模板已经手动在header.php或footer.php里加了Bootstrap的CDN链接，这一步可以跳过。

第二步：编写分类文章查询+Bootstrap布局代码 #

在你的自定义模板文件（比如template-product.php）里，用WP_Query查询目标分类的文章，然后结合Bootstrap的网格系统实现每行4列的布局：

<?php
// 设置查询参数：替换成你的分类别名（category_name）或分类ID（cat）
$args = array(
    'post_type' => 'post', // 如果是自定义文章类型，替换成你的类型名
    'category_name' => 'products', // 这里改成你要展示的分类别名
    'posts_per_page' => -1, // 显示所有文章，也可以设置具体数字比如12
    'orderby' => 'date',
    'order' => 'DESC'
);

$product_query = new WP_Query($args);

// 开始循环
if ($product_query->have_posts()) : ?>
    <div class="container py-5"> <!-- 容器，加内边距美化 -->
        <div class="row g-4"> <!-- row是Bootstrap的行，g-4是列间距 -->
            <?php while ($product_query->have_posts()) : $product_query->the_post(); ?>
                <!-- 响应式列：桌面端4列，平板端2列，移动端1列 -->
                <div class="col-12 col-md-6 col-lg-3">
                    <div class="card h-100 shadow-sm"> <!-- 卡片样式，h-100让卡片高度一致 -->
                        <!-- ACF图片字段：替换成你的图片字段名 -->
                        <?php if ($product_image = get_field('product_image')) : ?>
                            <img src="<?php echo esc_url($product_image['url']); ?>" alt="<?php echo esc_attr($product_image['alt']); ?>" class="card-img-top">
                        <?php endif; ?>
                        <div class="card-body">
                            <!-- 文章标题 -->
                            <h5 class="card-title"><?php the_title(); ?></h5>
                            <!-- 可选：添加ACF产品描述字段 -->
                            <?php if ($product_desc = get_field('product_description')) : ?>
                                <p class="card-text"><?php echo wp_trim_words($product_desc, 15); ?></p>
                            <?php endif; ?>
                            <!-- 可选：查看详情按钮 -->
                            <a href="<?php the_permalink(); ?>" class="btn btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
            <?php endwhile; ?>
        </div>
    </div>
<?php else : ?>
    <!-- 没有文章时的提示 -->
    <div class="container py-5 text-center">
        <p class="text-muted">暂无产品展示</p>
    </div>
<?php endif;

// 重置查询，避免影响后续全局查询
wp_reset_postdata();
?>

关键细节说明 #

• 自适应布局：col-12 col-md-6 col-lg-3实现了移动端每行1列、平板每行2列、桌面每行4列的适配，兼顾不同设备体验
• 卡片对齐：card h-100让同一行的卡片高度自动对齐，不会出现参差不齐的情况
• 字段替换：记得把代码里的product_image、product_description换成你自己的ACF字段名，category_name换成目标分类的别名
• 样式优化：shadow-sm给卡片加了轻微阴影，py-5给容器加了上下内边距，你可以根据自己的设计调整这些类名

这样设置后，当你的文章数量超过4篇时，Bootstrap会自动把第5篇及以后的文章换行到下一行，完全符合你的需求！

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