如何通过WP_Query将缩略图和标题发布到两个容器中？

我正在尝试通过WP_Query获取帖子内容, 我有：

function my_query( $attributes ) {
    $args = array(
        'post_type' => 'post', 'posts_per_page' => 3, 'post_status' => 'publish'
    );

    $query = new WP_Query($args);
    $posts = '';
    if($query->have_posts()) {
        $posts .= '<div class="post-wrapper">';
        while ($query->have_posts()) {
            $query->the_post();
            $posts .= '<div class="img-container">';
                $posts .= '<div>' . get_the_post_thumbnail() . '</div>';
            $posts .= '</div>';

            $posts .= '<div class="content-container">';
                $posts .= '<span>' . get_the_title() . '</span>';
            $posts .= '</div>';
        }
        $posts .= '</div>';
        wp_reset_postdata();
        return $posts;
    }

它正在工作, 我在html中输入如下内容：

<div class="post-wrapper">
    <div class="img-container">
        <div><img src="..." alt=""></div>
    </div>
    <div class="content-container">
        <span>some title</span>
    </div>
</div>
<div class="post-wrapper">
    <div class="img-container">
        <div><img src="..." alt=""></div>
    </div>
    <div class="content-container">
        <span>some title</span>
    </div>
</div>
<div class="post-wrapper">
    <div class="img-container">
        <div><img src="..." alt=""></div>
    </div>
    <div class="content-container">
        <span>some title</span>
    </div>
</div>

但是我需要像这样划分容器图像和标题：

<div class="post-wrapper">
    <div class="img-container">
        <div><img src="..." alt=""></div>
        <div><img src="..." alt=""></div>
        <div><img src="..." alt=""></div>
    </div>
    <div class="content-container">
        <span>some title</span>
        <span>some title</span>
        <span>some title</span>
    </div>
</div>

如何正确执行此操作？

你能帮我吗？提前致谢。

#1

我会主张使用Output Buffering, 但是我认为目前一种更简单的解决方案是构建多个变量, 而不是仅一个$ posts变量, 而无需太多更改代码结构(并且无需依赖多次遍历posts)。然后在while循环之后合并它们。像这样：

$args = array(
    'post_type'      => 'post', 'posts_per_page' => 3, 'post_status'    => 'publish'
);

$query = new WP_Query( $args );
$container = $images = $titles = ''; // Start with 3 variables

if( $query->have_posts() ){
    // Start the $container;
    $container .= '<div class="post-wrapper">';
        // Build the $images and $titles separately;
        while( $query->have_posts() ){
            $query->the_post();

            $images .= '<div class="img-container">';
                $images .= '<div>' . get_the_post_thumbnail() . '</div>';
            $images .= '</div>';

            $titles .= '<div class="content-container">';
                $titles .= '<span>' . get_the_title() . '</span>';
            $titles .= '</div>';
        }

        // Now that $images and $titles are build, add them to the $container;
        $container .= $images;
        $container .= $titles;

    // Now close the container
    $container .= '</div>';

    wp_reset_postdata();

    return $container;
}

#2

假设循环中没有更多帖子, 则可以多次调用have_posts。它将倒退到开始。

function my_query( $attributes ) {
        $args = array(
            'post_type' => 'post', 'posts_per_page' => 3, 'post_status' => 'publish'
        );

        $query = new \WP_Query($args);
        $posts = '';
        if($query->have_posts()) {
            $posts .= '<div class="post-wrapper"><div class="img-container">';
            while ($query->have_posts()) {
                $query->the_post();
                    $posts .= '<div>' . get_the_post_thumbnail() . '</div>';
            }
            $posts .= '</div><div class="content-container">';
            while ($query->have_posts()) {
                $query->the_post();
                $posts .= '<span>' . get_the_title() . '</span>';
            }
            $posts .= '</div></div>';
            wp_reset_postdata();
            return $posts;
        }
    }
}