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

我正在尝试通过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; }

【如何通过WP_Query将缩略图和标题发布到两个容器中（）】它正在工作, 我在html中输入如下内容：

< div class="post-wrapper"> < div class="img-container"> < div> < img src="http://www.srcmini.com/..." > < /div> < /div> < div class="content-container"> < span> some title< /span> < /div> < /div> < div class="post-wrapper"> < div class="img-container"> < div> < img src="http://www.srcmini.com/..." > < /div> < /div> < div class="content-container"> < span> some title< /span> < /div> < /div> < div class="post-wrapper"> < div class="img-container"> < div> < img src="http://www.srcmini.com/..." > < /div> < /div> < div class="content-container"> < span> some title< /span> < /div> < /div>

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

< div class="post-wrapper"> < div class="img-container"> < div> < img src="http://www.srcmini.com/..." > < /div> < div> < img src="http://www.srcmini.com/..." > < /div> < div> < img src="http://www.srcmini.com/..." > < /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 variablesif( $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; } } }