Доброго времени суток!
Сегодня рассмотрим способ, с помощью которого можно вывести посты на главной в две колонки. Данный способ можно применить как к новым, так и к готовым шаблонам, правда придется полностью изменить стили вывода постов. 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;
}
Сохраняем все и смотрим результат. Можете добавить еще стилей для миниатюры текста и тд., для того чтобы все отображалось, как вам захочется.
На этом все. Спасибо за внимание 🙂