如何通过WP_Query将post缩略图和标题分别放入两个容器中？

Question

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

如何正确执行此操作？

你能帮帮我吗？提前致谢。

Answer 1

您可以多次调用 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;
        }
    }
}

Answer 2

我会赞成 Output Buffering，但我认为目前更简单的解决方案是无需过多更改您的代码结构（并且无需多次循环遍历帖子），而是构建多个变量只有一个 $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;
}

如何通过WP_Query将post缩略图和标题分别放入两个容器中？

How to get post thumbnail and title into two containers through WP_Query?

wordpress

wordpress-theming