我需要帮助，以不同的方式设计循环中的第一个项目，并将其余项目包装在一个容器中。我看到了很多似乎相关的问题和它们的各种答案，但我相信我的答案是不同的。

我目前拥有的：

<div class="dpe-flexible-posts row">

<?php if ( $flexible_posts->have_posts() ): $postCount = 0; while ( $flexible_posts->have_posts()): $postCount++; $flexible_posts->the_post(); global $post;
?>

<?php if($postCount == 1) { ?>

    <div <?php post_class(\'col-8\'); ?>>
        <div class="dpe-flexible-posts-inner magB30">
            <div class="post-thumbnail">
                <a href="<?php echo the_permalink(); ?>">
                    <?php
                        if ( $thumbnail == true ) {
                            // If the post has a feature image, show it
                            if ( has_post_thumbnail() ) {
                                the_post_thumbnail( $thumbsize );
                            // Else if the post has a mime type that starts with "image/" then show the image directly.
                            } else  { ?>
                                <div class="entry-image">
                                  <a href="<?php the_permalink(); ?>" rel="bookmark">
                                <img src="<?php echo get_stylesheet_directory_uri() . \'/inc/assets/img/default-image.png\'; ?>" alt="<?php the_title(); ?>" />
                                </a>
                                </div>
                            <?php } ?>
                        <?php } ?>
                </a>
            </div>
            <div class="dpe-posts-content">
                <h3 class="h2"><a href="<?php echo the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
            </div>
        </div>
    </div>

<?php } else { ?>

    <div <?php post_class(\'col-4\'); ?>>
        <div class="dpe-flexible-posts-inner">
                <div class="post-thumbnail">
                <a href="<?php echo the_permalink(); ?>">
                    <?php
                        if ( $thumbnail == true ) {
                            // If the post has a feature image, show it
                            if ( has_post_thumbnail() ) {
                                the_post_thumbnail( $thumbsize );
                            // Else if the post has a mime type that starts with "image/" then show the image directly.
                            } else  { ?>
                                <div class="entry-image">
                                  <a href="<?php the_permalink(); ?>" rel="bookmark">
                                <img src="<?php echo get_stylesheet_directory_uri() . \'/inc/assets/img/default-image.png\'; ?>" alt="<?php the_title(); ?>" />
                                </a>
                                </div>
                            <?php } ?>
                        <?php } ?>
                    </a>
                </div>
                <div class="dpe-posts-content">
                    <h3 class="h5"><a href="<?php echo the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
                </div>
        </div>
     </div>

<?php } ?>

<?php endwhile; ?>

<?php   
endif; // End have_posts()

使用上述代码，我可以实现以下目标：

< div class="row">

< div class="col-12 col-md-8 first-post">
</div>

< div class="col-12 col-md-4 other-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>

</div>

但这正是我需要帮助实现的目标：

< div class="first-container">

< div class="first-post">
</div>

</div>

< div class="row second-container">

< div class="col-12 col-md-4 other-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>

</div>

我希望第一个帖子被包装在自己的容器中，而其余的则被包装在不同的容器中，这样我就可以将垂直旋转木马与swiper js集成在一起。

提前谢谢。

<div class="dpe-flexible-posts row">

<?php 

$firstQuery = new WP_Query(\'showposts=1\');

if ( $firstQuery->have_posts() ) {
    while ( $firstQuery->have_posts() ) {
        $firstQuery->the_post();
        ?>
        <div <?php post_class(\'col-8\'); ?>>
            <div class="dpe-flexible-posts-inner magB30">
                <div class="post-thumbnail">
                    <a href="<?php echo the_permalink(); ?>">
                        <?php
                            if ( $thumbnail == true ) {
                                // If the post has a feature image, show it
                                if ( has_post_thumbnail() ) {
                                    the_post_thumbnail( $thumbsize );
                                // Else if the post has a mime type that starts with "image/" then show the image directly.
                                } else  { ?>
                                    <div class="entry-image">
                                      <a href="<?php the_permalink(); ?>" rel="bookmark">
                                    <img src="<?php echo get_stylesheet_directory_uri() . \'/inc/assets/img/default-image.png\'; ?>" alt="<?php the_title(); ?>" />
                                    </a>
                                    </div>
                                <?php } ?>
                            <?php } ?>
                    </a>
                </div>
                <div class="dpe-posts-content">
                    <h3 class="h2"><a href="<?php echo the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
                </div>
            </div>
        </div>
        <?php
    }
}

$secondQuery = new WP_Query(\'offset=1\');
if ( $secondQuery->have_posts() ) {
    while ( $secondQuery->have_posts() ) {
        $secondQuery->the_post();
        ?>
        <div <?php post_class(\'col-4\'); ?>>
            <div class="dpe-flexible-posts-inner">
                    <div class="post-thumbnail">
                    <a href="<?php echo the_permalink(); ?>">
                        <?php
                            if ( $thumbnail == true ) {
                                // If the post has a feature image, show it
                                if ( has_post_thumbnail() ) {
                                    the_post_thumbnail( $thumbsize );
                                // Else if the post has a mime type that starts with "image/" then show the image directly.
                                } else  { ?>
                                    <div class="entry-image">
                                      <a href="<?php the_permalink(); ?>" rel="bookmark">
                                    <img src="<?php echo get_stylesheet_directory_uri() . \'/inc/assets/img/default-image.png\'; ?>" alt="<?php the_title(); ?>" />
                                    </a>
                                    </div>
                                <?php } ?>
                            <?php } ?>
                        </a>
                    </div>
                    <div class="dpe-posts-content">
                        <h3 class="h5"><a href="<?php echo the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
                    </div>
            </div>
        </div>
        <?php
    }
}