Wordpress l oop с разным форматированием

Question

Вместо того, чтобы показывать стандартный список сообщений, я хочу настроить макет и разделить сообщения на разные (bootstrap) столбцы. Итак, первый пост будет полной ширины, ниже второй будет половинной ширины, а в другой половине я покажу еще 3 сообщения. Ниже показано, что там будет 3 сообщения подряд.

Я разделил их так:

<?php
// the query
$the_query = new WP_Query(array(
    'category_name' => 'cat_name',
    'post_status' => 'publish',
    'posts_per_page' => 8
));
?>

<?php if ($the_query->have_posts()) : ?>
    <?php $count = 0; ?>
    <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
        <?php $count++; ?>

        <?php if ($count == 1) : ?>
            <div class="first"><?php the_title(); ?></div>

        <?php elseif ($count == 2) : ?>      
            <div class="second"><?php the_title(); ?></div>

        <?php elseif ($count >= 3 && $count <= 5) : ?>  
            <div class="third"><?php the_title(); ?></div>  

        <?php else : ?>
            <div class="fourth"><?php the_title(); ?></div>  

        <?php endif; ?>


    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>

<?php else : ?>
    <p><?php __('No News'); ?></p>
<?php endif; ?>

но я не знаю, как расположить их так, чтобы они выглядели так:

<div class="container">

    <div class="row">
        <div class="col-12">
            <!-- first -->
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <!-- second -->
        </div>
        <div class="col-md-6">
            <!-- third - 3 posts one under another -->
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <!-- fourth -->
        </div>
        <div class="col-md-4">
            <!-- fourth -->
        </div>
        <div class="col-md-4">
            <!-- fourth -->
        </div>
    </div>

</div>

Любая помощь будет значить очень много! Я думал об использовании нескольких запросов со смещением, но я не знаю, будет ли это слишком много запросов к БД (потому что это только l oop для 1 категории, у меня было бы еще 3 ниже)

Answer 1

Есть несколько способов сделать это. Моя первая идея состояла бы в том, чтобы один раз просмотреть сообщения, сохраняя их заголовки (избранные изображения, постоянные ссылки, все, что вам нужно) в массив и помещать их в разметку по их индексам (начиная с 0).

Вы можно попробовать с массивами, сохраняющими все заголовки и постоянные ссылки:

<?php
    $post_titles = [];
    $post_permalinks = [];
    $counter = 0;
?>

<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
    $post_titles[$counter] = get_the_title($post->ID);
    $post_permalinks[$counter] = get_the_permalink($post->ID);
    $counter++;
<?php endwhile; ?>

А затем вы вызываете индекс массива в своей разметке:

<div class="container">

<div class="row">
    <div class="col-12">
        <?php echo $post_titles[0] . "<br>" . $post_permalinks[0]; ?>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <?php echo $post_titles[1] . "<br>" . $post_permalinks[1]; ?>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-4">
                <?php echo $post_titles[2] . "<br>" . $post_permalinks[2]; ?>
            </div>
            <div class="col-md-4">
                <?php echo $post_titles[3] . "<br>" . $post_permalinks[3]; ?>
            </div>
            <div class="col-md-4">
                <?php echo $post_titles[4] . "<br>" . $post_permalinks[4]; ?>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <?php echo $post_titles[5] . "<br>" . $post_permalinks[5]; ?>
    </div>
    <div class="col-md-4">
        <?php echo $post_titles[6] . "<br>" . $post_permalinks[6]; ?>
    </div>
    <div class="col-md-4">
        <?php echo $post_titles[7] . "<br>" . $post_permalinks[7]; ?>
    </div>
</div>