Помощь Как вывести записи с разным количеством колонок

[arsen]

Собственно записи выводятся на страницу циклом. Задача вот какая: на странице рубрики
В первую строку вывести 2 записи соответственно в 2 колонки. Во вторую 3 записи в 3 колонки. В третью снова 2 и ТД с пагинацией. Как то не приходит в голову удачная идея реализации. Рассматриваю и плагины и идеи.

 

[sol_los]

css - grid

 

[arsen]

пошел по другому пути. сделал счетчик в цикле и через 2 иф задал col-4 или col-6 в зависимости от номера записи. записей 10 на страницу - возможно не элегантно, но работает

 

[sol_los]

это старый подход. в целом норм, но гриды подучить не мешает.

 

[arsen]

это старый подход. в целом норм, но гриды подучить не мешает.

если можно тут продолжите мысль. То что можно сделать сетку через grid это я понимаю и то что можно разное количество колонок отображать тоже - вариантов реализации по разметке и стилям много. Но как именно на сss без условия на php разметить какую запись в какую колонку класть. По какому принципу раздавать классы

 

[arsen]

Скрин для примера - вывожу по 10 записей на страницу то есть 2 первых в 2 колонки, 3 следующих в 3 и тд. Варианты first child или четные -не четные здесь не особо применимы.
Хотел бы восполнить пробел -натолкните подробнее где копать именно по логике раздачи классов. Как на гриде сверстать колонки ряд понятно

 

[sol_los]

Варианты first child или четные -не четные здесь не особо применимы.

почему эти варианты не приемлемы? ты все делаешь в css, в php вообще не лезешь по шаблонам.
но можно и по классам.

можно даже на флексах. кажись так. башка уже не варит к концу дня.

.grid-flex{
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 20px;
}

.grid-flex .item{
flex: 1;
}

.grid-flex .item_50{
    width: calc(50% - 10px);
    flex: 1;
}

.grid-flex .item_30{
    width: calc(33.333% - calc(20px / 3)); 
}

 

[derealty]

Нарисовал с помощью bootstrap, решение не идеальное и настоящие программисты, наверное посмеются на ним, но как результат "здесь и сейчас" - покатит.
.

    <div class="container">
        <div class="row">
             <?php $args = array(
                'post_type' => 'post',
                'posts_per_page' => 2,
                       );
                      $zapis = new WP_Query( $args );
                      if( $zapis->have_posts() ) : ?>
                          <?php while( $zapis->have_posts() ) :
                              $zapis->the_post();
                             ?>
                             <div class="col-lg-6">
                                <img loading="lazy" class="w-100" src="<?php $thumb_id = get_post_thumbnail_id(); $thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail-size', true); echo $thumb_url[0]; ?>">
                                <h2 class="title"><?php the_title(); ?></h2>
                                <a href="<?php the_permalink(); ?>" class="btn btn-warning">Подробнее...</a>
                            </div>
               <?php endwhile; ?>
            <?php endif;
            wp_reset_postdata(); ?>
        </div>
        <div class="row">
             <?php $args = array(
                'post_type' => 'post',
                'posts_per_page' => 3,
                'offset' => 2
                       );
                      $zapis = new WP_Query( $args );
                      if( $zapis->have_posts() ) : ?>
                          <?php while( $zapis->have_posts() ) :
                              $zapis->the_post();
                             ?>
                             <div class="col-lg-4">
                                <img loading="lazy" class="w-100" src="<?php $thumb_id = get_post_thumbnail_id(); $thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail-size', true); echo $thumb_url[0]; ?>">
                                <h2 class="title"><?php the_title(); ?></h2>
                                <a href="<?php the_permalink(); ?>" class="btn btn-warning">Подробнее...</a>
                            </div>
               <?php endwhile; ?>
            <?php endif;
            wp_reset_postdata(); ?>
        </div>
        <div class="row">
             <?php $args = array(
                'post_type' => 'post',
                'posts_per_page' => 2,
                'offset' => 5
                       );
                      $zapis = new WP_Query( $args );
                      if( $zapis->have_posts() ) : ?>
                          <?php while( $zapis->have_posts() ) :
                              $zapis->the_post();
                             ?>
                             <div class="col-lg-6">
                                <img loading="lazy" class="w-100" src="<?php $thumb_id = get_post_thumbnail_id(); $thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail-size', true); echo $thumb_url[0]; ?>">
                                <h2 class="title"><?php the_title(); ?></h2>
                                <a href="<?php the_permalink(); ?>" class="btn btn-warning">Подробнее...</a>
                            </div>
               <?php endwhile; ?>
            <?php endif;
            wp_reset_postdata(); ?>
        </div>
    </div>

 

[sol_los]

derealty, таким количеством query ты сайт не оптимизируешь.

 

[derealty]

derealty, таким количеством query ты сайт не оптимизируешь.

Вообще нет(не оптимизирую, а наоборот), писал сразу: "...решение не идеальное и настоящие программисты, наверное посмеются на ним...", но из опыта скажу, бывает, так что самодур заказчик хочет так и никак иначе. А у вебмастера нет под рукой решения - от слова совсем. Тогда приходится придумывать такие решения, заставлять кешироваться их, что бы как то оптимизировать скорость, но показать заказчику тот результат, который он хочет.

Решение через CSS конечно более изящно, но как реализовать его ума не приложу...