Как сделать такой вывод постов в Вордпрес?

Question

[Alpha12]

Добрый день, интересует как вывести так посты, по 3 но с такой верстой, как правильно расставить условия в цыкле?

Comments

[Вова Дружаев]

а если записей будет всего 4-ре? :)

[Alpha12]

Владимир Дружаев, То она будет уже на 2 странице, Отображаться как первая колонка в макете.

[Вова Дружаев]

В цикле счетчик 1-2-3 в зависимости от счёта - даёшь нужный класс врапперу отдельной записи. Ну а дальше - дело техники и вёрстки.

Подобный вопрос не первый на тостере и в инете

[Alpha12]

Владимир Дружаев Ну вот моя верскта, что то я не совсем пойму..

<?php
/*
Template Name: Блог
*/
?>

<?php get_header(); ?>
<?php
/*
 * Template name: Блог
 */
$current_page = (get_query_var('paged')) ? get_query_var('paged') : 1; // определяем текущую страницу блога
$args = array(
  'posts_per_page' => get_option('posts_per_page'), // значение по умолчанию берётся из настроек, но вы можете использовать и собственное
  'paged'          => $current_page,
  'order'          =>'DESC'   // текущая страница
);
query_posts( $args );
 
$wp_query->is_archive = true;
$wp_query->is_home = false; ?>
 





  <div class="container-blog">
      <div class="container">
          <div class="row">
            <?php $i = 0; ?>
        <?php  while( have_posts()): the_post();  ?>
          <?php 
           $i++; if( $i == 1 ){?>
              <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                  <div class="first-section-blog">
                      <div class="name ">
                           <h1 class="title">
                            NEWS/BLOG
                          </h1>
                         <p>
                             Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat tempore odit veritatis voluptates illum, beatae porro. Placeat dolore non sed unde architecto inventore sunt, voluptatem porro iusto iure deserunt amet?
                         </p>
                      </div>

                      <div class="bottom">
                       
                            <div class="date">
                                    <?php the_date( 'd/m' ); ?>
                                </div>
                        <?php the_post_thumbnail(); ?>
                          <div class="box-description">
                              <h4 class="name-post"><?php the_title(); ?></h4>
                              <p><?php the_content();?>

                              </p>
                              <a href="<?php the_permalink(); ?>" class="read-more">Read more</a>
                          </div>
                      </div>

                  </div>

              </div>
          <?php }  else {?>
              <div class="col-lg-8 col-md-8 col-sm-12 col-12">
              
                <div class="two-section-blog">
                     
                    <div class="bottom">
                            <div class="date">
                                 <?php the_date( 'd/m' ); ?>
                                </div>
                        <?php the_post_thumbnail(); ?>
                        <div class="box-description">
                                <h4 class="name-post"><?php the_title(); ?></h4>
                            <p>
                              <?php the_content(); ?>
                            </p>
                            <a href="<?php the_permalink(); ?>" class="read-more">Read more</a>
                        </div>
                    </div><!---item-blog-->
                   
                </div>
   
          </div>
     <?php } ?>
            <?php endwhile; ?>
       <div class="pagination">
           <ul>
               <li><a href="#">1</a></li>
               <li><a href="#">2</a></li>
               <li class="active-pag"><a href="#" >3</a></li>
               <li><a href="#">2</a></li>
           </ul>
       </div>
          </div>
      </div>
    </div>
  <!-- /.container-blog -->


<?php get_footer(); ?>

[Модератор]

Alpha12 дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац). В противном случае, ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

Answer 1

[Орхан Гасанлы]

Поступить можно по-разному....
1) Можно не париться со счетчиком и лишь на уровне css используя nth-child() применять те или иные стили. Смотрите, CSS Grid, nth-child, flexbox и т.д.
2) Более предпочтительный на мой взгляд... завести счетчик и инкрементируя значение счетчика в самом цикле в зависимости от порядкового номера применять те или иные классы. А уже к классам применять нужные стили.
Job done!))