请求实现WordPress循环：每2篇文章一组，行交替列且末列自适应100%宽度

Hey there! I get it—trying to nail that custom WordPress loop layout when you're still getting comfortable with PHP can be frustrating, especially when Visual Composer's Bootstrap classes aren't doing what you need. Let's fix this together with a straightforward, custom solution that gives you full control over the layout.

Here's a step-by-step solution that handles:

• Grouping every 2 posts into their own container div
• Alternating column order (left-right, then right-left, repeat)
• Automatically setting the final group to 100% width if it only has 1 post

Step 1: The PHP Loop Code #

Drop this into your theme template file (like archive.php, category.php, or a custom page template). I've added comments to explain each part so you can follow along:

<?php
// Initialize our counters and layout tracker
$post_counter = 0;
$current_layout = 'left-right'; // Start with left-to-right column order

// Start the WordPress loop
if ( have_posts() ) :
    // Main container to wrap all post groups
    echo '<div class="post-collection">';

    while ( have_posts() ) : the_post();
        // Start a new group every 2 posts (or the very first post)
        if ( $post_counter % 2 === 0 ) {
            // Close the previous group if we're not on the first iteration
            if ( $post_counter !== 0 ) {
                echo '</div>';
            }
            // Flip the layout for the next group
            $current_layout = ( $current_layout === 'left-right' ) ? 'right-left' : 'left-right';
            // Open the new group div with our layout class
            echo '<div class="post-group ' . esc_attr( $current_layout ) . '">';
        }
?>

        <!-- Your individual post markup - customize this to match your design! -->
        <article class="single-post">
            <h3 class="post-title"><?php the_title(); ?></h3>
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="post-image">
                    <?php the_post_thumbnail( 'medium' ); ?>
                </div>
            <?php endif; ?>
            <div class="post-excerpt"><?php the_excerpt(); ?></div>
            <a href="<?php the_permalink(); ?>" class="read-more-btn">Read Full Post</a>
        </article>

<?php
        $post_counter++;
    endwhile;

    // Close the last post group
    echo '</div>';

    // Check if the final group only has 1 post - add full-width styling if needed
    if ( $post_counter % 2 !== 0 ) {
        // We'll add an inline style here, but you could also use a custom class
        echo '<style>.post-collection .post-group:last-child { width: 100%; }</style>';
    }

    // Close the main collection container
    echo '</div>';

else :
    // Fallback if no posts are found
    echo '<p class="no-posts">Sorry, no posts matched your criteria.</p>';
endif;
?>

Step 2: Add the CSS Styles #

Add this to your theme's style.css file or the Custom CSS section in your WordPress dashboard. This handles the flex layout, alternating columns, and full-width adjustment:

/* Main container for all post groups */
.post-collection {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Wrapper for each 2-post group */
.post-group {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
    width: 100%;
}

/* Alternate the column order for every other group */
.post-group.right-left {
    flex-direction: row-reverse;
}

/* Individual post styling - tweak this to match your theme */
.single-post {
    flex: 1;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Make the final single post take full width */
.post-group:last-child .single-post {
    flex: 0 0 100%;
    max-width: 100%;
}

How This Works #

• Counter Logic: The $post_counter variable tracks how many posts we've rendered. Every time it hits an even number (0, 2, 4...), we start a new post group.
• Alternating Layout: We toggle the $current_layout variable between left-right and right-left for each new group, then use CSS's flex-direction: row-reverse to flip the column order.
• Full-Width Final Post: After the loop ends, we check if the total number of posts is odd. If it is, our CSS automatically makes the last group take up 100% width.

Bonus Tips #

• If you prefer using Bootstrap classes, you can replace the .single-post class with col-md-6 and adjust the layout by swapping the order of posts in the loop instead of using flex reverse.
• Customize the .single-post CSS to match your theme's colors, fonts, and spacing.
• Always test changes on a staging site first to avoid breaking your live site!

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