技术求助：如何在首页循环输出4行（最多10篇）帖子

Got it, let's break down how to tackle this: you need 4 distinct rows of posts on your homepage, maxing out at 10 total. Since you've already tried looping through posts without finding a perfect fit, here's a targeted, flexible solution tailored to your layout needs.

First, let's align on the core constraints:

• Exactly 4 rows on the homepage
• Total posts capped at 10
• Rows can have variable post counts (since 10 doesn't split evenly by 4, we'll use a clean 3/3/2/2 split to hit the 10-post limit, or adjust dynamically if you have fewer posts)

Step 1: Fetch & Limit Your Posts #

First, grab your posts and cap the results at 10. Replace this example with your actual data query (whether it's from a CMS, database, or API):

// Example: Grab first 10 posts (swap with your data source)
$all_posts = get_posts(array('posts_per_page' => 10));
$total_posts = count($all_posts);

Step 2: Split Posts Into 4 Rows #

We'll split the 10 posts into 4 logical groups. For a balanced layout, we'll use:

• Row 1: 3 posts
• Row 2: 3 posts
• Row 3: 2 posts
• Row 4: 2 posts

Here's how to do that with array slicing:

// Split posts into 4 predefined rows
$rows = [
    array_slice($all_posts, 0, 3), // Row 1: First 3 posts
    array_slice($all_posts, 3, 3), // Row 2: Next 3 posts
    array_slice($all_posts, 6, 2), // Row 3: Next 2 posts
    array_slice($all_posts, 8, 2)  // Row 4: Final 2 posts
];

Step 3: Render Rows & Posts #

Now loop through each row container, then iterate over the posts inside each row. This guarantees exactly 4 rows (even if some have fewer posts or are empty, which you can hide with CSS if needed):

<?php foreach ($rows as $row_num => $row_posts): ?>
    <div class="post-row row-<?php echo $row_num + 1; ?>">
        <?php foreach ($row_posts as $post): ?>
            <div class="post-card">
                <h3><?php echo get_the_title($post); ?></h3>
                <p><?php echo wp_trim_words(get_the_content($post), 20); ?></p>
                <!-- Add your post thumbnails, links, or metadata here -->
            </div>
        <?php endforeach; ?>
    </div>
<?php endforeach; ?>

Step 4: Dynamic Adjustment for Fewer Than 10 Posts #

If you might have less than 10 posts (e.g., 7 total), use this dynamic split to distribute posts evenly across rows:

$posts_per_row = floor($total_posts / 4);
$extra_posts = $total_posts % 4;
$rows = [];
$current_position = 0;

for ($i = 0; $i < 4; $i++) {
    // Add an extra post to the first N rows (where N = extra_posts)
    $post_count = $posts_per_row + ($i < $extra_posts ? 1 : 0);
    $rows[] = array_slice($all_posts, $current_position, $post_count);
    $current_position += $post_count;
}

For 7 posts, this splits into 2/2/2/1 rows—no empty gaps unless you intentionally want them.

CSS Layout Tips #

Use flexbox to make rows responsive and evenly spaced:

.post-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.post-card {
    flex: 1;
    min-width: 280px; /* Adjust based on your design */
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    padding: 1.2rem;
}

This ensures posts resize nicely on mobile while maintaining your 4-row structure on desktop.

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