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