Дизайн та розробка сайту

Как вывести посты в две колонки на WordPress

Доброго времени суток!

Сегодня рассмотрим способ, с помощью которого можно вывести посты на главной в две колонки. Данный способ можно применить как к новым, так и к готовым шаблонам, правда придется полностью изменить стили вывода постов. Cуть способа в том, что он изменяет стандартный цикл на свой. То есть, код расположеный ниже можно вставлять в любые файлы темы, нде имеется цикл. Это, например, главная - index.php, страницаа вывода категорий category.php, архивы archive.php.

Структура вывода постов будет логическая, то есть слева последний пост, а справа следующий (предпоследний) и так далее. Выглядеть это будет примерно так:

1 2
3 4
5 6

и так далее..

Осуществить такой вывод нам поможет добавление счётчика для постов и присвоением им класса .one в стилях, таким образом к каждому нечётному посту будет присваиваться этот класс. И с помощью float:left; посты распределятся ровно в блоке контента.
Готовый код будет выглядеть следующим образом:

<?php if (have_posts()) : ?>
 <?php $one = true; ?>
 <?php while (have_posts()) : the_post(); ?>
 
<!-- Начало .postBox -->
 
<article class="postBox <?php if($one == true) echo "one" ?>" id="postBox-<?php the_ID(); ?>">
 
<div class="postThumb"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></div>
 
<h2 class="visota"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
 
<div class="info"><span><?php the_time('M') ?>.<?php the_time('j') ?>.<?php the_time('Y') ?>. / <?php comments_popup_link('Нет комментариев', '1 комментарий ', 'Комментариев: %'); ?></span></div>
 
<div class="textPreview">
 
<?php the_excerpt(); ?>
 
</div>
 
</article>
 
<!-- Конец .postBox -->
 
<?php $one = !$one; if ($one) echo '<br clear=all>'; ?>
 
<?php endwhile; endif; ?>

Как писал выше, его нужно вставлять вместо основного цикла, который тоже начинается:

if (have_posts()) :
...

И заканчивается

...
endwhile; endif;

Теперь добавим стили, которые и сформируют конечную структуру. Дополним файл style.css следующим кодом:

.postBox {
 float:left;
 width:300px;
 height:500px;
 margin-bottom:20px;
 }
 
.one {
 margin-right:20px;
 }

Сохраняем все и смотрим результат. Можете добавить еще стилей для миниатюры текста и тд., для того чтобы все отображалось, как вам захочется.

На этом все. Спасибо за внимание 🙂

Дизайн та розробка сайту

Back to top