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

Question

[Расул Гитинов]

Подскажите, как можно реализовать данный вывод записей: скриншот. На скриншоте показан блок типа Hero, на котором выводится самая новая статья, затем, когда появляется статья новее этой, то она встает на ее место, а более старая уже смещается в нижнюю часть, где уже выводятся статьи, начиная со второй.

Answer 1

[Расул Гитинов]

Я решил проблему таким образом:

Это вывод самой первой записи, которая будет в блоке Hero:

<?php   
    if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        if ( $wp_query->current_post == 0 ) :
            get_template_part( 'hero' );
        endif;
    endwhile;
    endif;
?>

А это вывод остальных записей, начиная со второй, уже в блоке .articles:

<?php   
    if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        if ( $wp_query->current_post > 0 ) :
            get_template_part( 'article' );
        endif;
    endwhile;
    endif;
?>

Comments

[Игорь Воротнёв]

тоже вариант)

Answer 2

[Игорь Воротнёв]

1. Вы можете просто присвоить первому посту в цикле отдельный CSS-класс и стилями получить заданный layout.
2. Если стилями недостаточно (надо модифицировать html тоже), опять же проверяете на первый пост в WP_Query и через if/else выводите нужные фрагменты. Смотрите тут Оформление первой записи в цикле wordpress?

Answer 3

[Карен Мнацаканян]

Примерно вот так

<div class="container">
  <?php
  $wp_query = new WP_Query(); 
  $wp_query->query('showposts=2&post_type=event'.'&paged='.$paged); ?>

  <?php if($wp_query->have_posts()) : ?>
    <div class="row">
    <?php $i = 0; ?>
    <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

      <?php if($i == 2) : ?>
        </div>
        <div class="row">
        <?php $i = 0; ?>
      <?php endif; ?>
    
      <div class="col-md-6"><?php the_title(); ?></div>

      <?php $i++; ?>
    <?php endwhile; ?>
    </div>
  <?php endif; wp_reset_query(); ?>
</div>

Comments

[Карен Мнацаканян]

Редактируете цикл под себя

[Расул Гитинов]

Карен Мнацаканян: Был бы очень признателен, если бы немного его описали его, чтобы я его понял

Answer 4

[Кузьмина Мария]

foreach($articles as $key => $article) {
     $cssClass = $key == 0? 'first-article-class' : 'default-article-class';
     echo '<div class="' . $cssClass . '">';
     // Здесь контент блока
     echo '</div>';
}

Comments

[Расул Гитинов]

Можете его расшифровать, если не сложно?)

[Кузьмина Мария]

Расул Гитинов: делаете цикл по всем статьям, в цикле определяете css-класс текущего блока со статьей (если $key == 0, т.е. это первая статья, то css-класс будет один, для всех других статей - другой). А потом собственно выводите блоки с этим классом. Это в общем случае, применительно к вордпрессу вам, наверное, лучше посмотреть ответ выше.