Вывод постов разными стилями в wordpress

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

Воспользуемся стандартным выводом постов через wp=posts, wp_select или wp_query. Все эти метки цикличны, т.е. посты выводятся в цикле. Поэтому данную задачу очень легко решить, если контролировать вывод самого поста в цикле.

Любой цикл, в данном данном случае постов, выводит базовый элемент определенное количество раз.

Базовый элемент — это первый элемент в цикле, именно он и будет повторяться

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

Например, если у на с есть базовый класс .item-post то записи имеющие этот класс так и будут стилизованы. При добавлении к этому классу .item-post псевдокласса .item-post v2h2 (где v2h2 — это псевдокласс) можно вывести данную запись уже с другой стилистикой.

Более подробно смотрите видео. Пример файла 4posts.php

<div>

<div class="cover-blocks w-clearfix">
<?php $query = new WP_Query(select_query_by_name("Вывод постов")); if($query->have_posts()) : ?><?php $count =0; while($query->have_posts()) : $count++; $query->the_post(); ?>

<div class="item-post<?php if ($count >
 1 &&  $count <= 3) echo ' v2h2'; else if ($count > 3)  echo ' v2'?>">
        <a href="<?php the_permalink(); ?>" class="link-post-blocks<?php if ($count > 1) echo ' v2h2'?> w-inline-block">

<div class="image-post-blocks<?php if ($count > 1) echo ' v2h2'?>" style="background-image: url('<?php $img = wp_get_attachment_image_src(get_post_thumbnail_id(), "large"); echo $img[0]; ?>');">
          </div>

<h3 class="h4<?php if ($count > 1) echo ' v2h2'?>"><?php the_title(); ?></h3>

<div class="cover-postexcerpt<?php if ($count >
 1) echo ' v2h2'?>">

<div class="text-block"><?php the_excerpt(); ?></div>

<div class="gradient-excerpt">

<div class="text-more">. . .</div>

            </div>

          </div>

        </a>
    </div>

<?php endwhile; ?><?php else : ?><?php endif; wp_reset_postdata(); ?></div>

</div>

Во втором видео по такому же принципу мы будем контролировать вывод четных постов. Просто добавив псевдокласс add к базовому классу. И поменяем условия вывода на «остаток при делении на 2», тем самым определим четный пост или нет.

Пример файла вывода с контролем четности постов oddposts.php

<div>

<div class="cover-blocks-odd w-clearfix">
<?php $query = new WP_Query(select_query_by_name("Вывод постов")); if($query->have_posts()) : ?><?php $cnt = 0; while($query->have_posts()) : $cnt++; $query->the_post(); ?>

<div class="item-post">
        <a href="<?php the_permalink(); ?>" class="link-post-blocks<?php if ($cnt % 2 == 0 ) echo ' odd'; ?> w-inline-block">

<div class="image-post-blocks<?php if ($cnt % 2 == 0 ) echo ' odd'; ?>" style="background-image: url('<?php $img = wp_get_attachment_image_src(get_post_thumbnail_id(), "large"); echo $img[0]; ?>');">
          </div>

<h3 class="h4<?php if ($cnt % 2 == 0 ) echo ' odd'; ?>"><?php the_title(); ?></h3>

<div class="cover-postexcerpt<?php if ($cnt % 2 == 0 ) echo ' odd'; ?>
">

<div class="text-block v2h2">The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.</div>

<div class="gradient-excerpt">

<div class="text-more">. . .</div>

            </div>

          </div>

        </a>
    </div>

<?php endwhile; ?><?php else : ?><?php endif; wp_reset_postdata(); ?></div>

</div>