Как получить миниатюру и заголовок сообщения в двух контейнерах через WP_Query?

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

Я бы поспорил за Выходная буферизация , но я думаю, что пока более простым решением без значительного изменения структуры кода (и без многократного циклического повторения постов) будет создание нескольких переменных. вместо одной $posts переменной, а затем объедините их после while l oop. Как то так:

$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;
}

Answer 2

Вы можете вызывать have_posts более одного раза, при условии, что в l oop больше нет сообщений. Это перемотает в начало.

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;
        }
    }
}