WordPress开发求助：Bootstrap+PHP博客循环需顶部大尺寸特色文章

嘿，我来帮你搞定这个需求！要实现顶部大尺寸特色文章+下方三篇常规文章的4篇文章循环布局，咱们可以通过调整WordPress的查询逻辑和Bootstrap的网格系统来实现，具体方案如下：

方案1：指定查询结果的第4篇作为特色文章 #

如果你的需求是把查询到的4篇文章里的最后一篇（也就是你说的“第4篇”）作为特色文章置顶展示，用下面的代码：

第一步：编写WordPress查询逻辑 #

<?php
// 定义查询参数：获取4篇已发布的文章，可根据需求添加分类、排序等参数
$args = array(
    'posts_per_page' => 4,
    'post_status' => 'publish'
);
$blog_query = new WP_Query($args);

// 分离特色文章和常规文章
$featured_post = null;
$regular_posts = array();

if ($blog_query->have_posts()) {
    $all_posts = $blog_query->posts;
    // 取出第4篇（数组最后一个元素）作为特色文章
    $featured_post = end($all_posts);
    // 剩下的前三篇作为常规文章
    $regular_posts = array_slice($all_posts, 0, 3);
}
?>

第二步：用Bootstrap构建布局 #

<!-- 顶部大尺寸特色文章 -->
<?php if ($featured_post) : setup_postdata($featured_post); ?>
<div class="row mb-4">
    <div class="col-12">
        <div class="card h-100 shadow-sm">
            <?php if (has_post_thumbnail()) : ?>
                <!-- 用large尺寸缩略图，让特色文章视觉更突出 -->
                <img src="<?php the_post_thumbnail_url('large'); ?>" class="card-img-top" alt="<?php the_title_attribute(); ?>">
            <?php endif; ?>
            <div class="card-body">
                <h2 class="card-title fw-bold"><?php the_title(); ?></h2>
                <p class="card-text text-muted"><?php echo wp_trim_words(get_the_content(), 60); ?></p>
                <a href="<?php the_permalink(); ?>" class="btn btn-outline-primary">阅读全文</a>
            </div>
        </div>
    </div>
</div>
<?php wp_reset_postdata(); endif; ?>

<!-- 下方三篇常规文章 -->
<div class="row g-4">
    <?php foreach ($regular_posts as $post) : setup_postdata($post); ?>
    <div class="col-md-4">
        <div class="card h-100">
            <?php if (has_post_thumbnail()) : ?>
                <!-- 用medium尺寸缩略图，和特色文章区分开 -->
                <img src="<?php the_post_thumbnail_url('medium'); ?>" class="card-img-top" alt="<?php the_title_attribute(); ?>">
            <?php endif; ?>
            <div class="card-body">
                <h5 class="card-title"><?php the_title(); ?></h5>
                <p class="card-text text-muted"><?php echo wp_trim_words(get_the_content(), 35); ?></p>
                <a href="<?php the_permalink(); ?>" class="btn btn-sm btn-outline-primary">阅读更多</a>
            </div>
        </div>
    </div>
    <?php endforeach; wp_reset_postdata(); ?>
</div>

方案2：用WordPress置顶功能指定特色文章（更灵活） #

如果你希望能在后台手动指定哪篇文章作为特色，推荐用WordPress自带的**置顶文章（Sticky Post）**功能，这样不需要修改代码就能随时切换特色文章：

修改查询逻辑 #

<?php
$args = array(
    'posts_per_page' => 4,
    'post_status' => 'publish',
    'ignore_sticky_posts' => false // 不忽略置顶文章，让置顶文章排在查询结果最前面
);
$blog_query = new WP_Query($args);

$featured_post = null;
$regular_posts = array();

if ($blog_query->have_posts()) {
    foreach ($blog_query->posts as $post) {
        // 识别置顶文章作为特色
        if (is_sticky($post->ID)) {
            $featured_post = $post;
        } else {
            $regular_posts[] = $post;
        }
    }
    // 兜底：如果没有置顶文章，自动取第一篇作为特色
    if (!$featured_post && !empty($blog_query->posts)) {
        $featured_post = $blog_query->posts[0];
        $regular_posts = array_slice($blog_query->posts, 1, 3);
    }
}
?>

布局部分和方案1完全一致 #

直接用方案1的HTML布局代码即可，置顶的文章会自动成为顶部的大尺寸特色文章。

关键细节说明 #

• 用Bootstrap的col-12让特色文章占满整行，col-md-4让常规文章在中等屏幕及以上每行显示3篇，小屏幕自动堆叠，保证响应式效果。
• 通过缩略图尺寸（large vs medium）、标题字号（<h2> vs <h5>）来区分特色文章和常规文章，强化视觉层级。
• 每次调用setup_postdata()后必须调用wp_reset_postdata()，避免后续WordPress查询出现冲突。

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