WordPress: вывод ленты постов в 2 столбца
Хочу поделиться кодом, который позволяет список постов разбить на 2 столбца. Т.е. к примеру, если на странице выводится 7 постов, то первые 4 поста будут находится в первом столбце, а оставшиеся 3 – во втором.
Суть php-кода, добавленного мною к стандартному коду поста, заключается в том, чтобы в определенных местах вставить html-теги, с помощью которых через CSS оформить посты в столбцы.
<?php get_header(); ?>
<?php if (have_posts()) { ?>
<?php $i = 0; ?>
<?php $per_column = ceil($posts_per_page / 2); ?>
<?php if ($wp_query->post_count <= $posts_per_page) $per_column = ceil($wp_query->post_count / 2); ?>
<div class="column">
<?php while (have_posts()) { the_post(); $i++; ?>
<div class="post">
<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="date"><?php the_time('d.m.Y') ?></div>
<div class="entry">
<?php the_excerpt(); ?>
</div>
</div><!-- .post -->
<?php if ($i == $per_column) { ?>
</div><!-- .column -->
<div class="column right">
<?php } ?>
<?php } ?>
</div><!-- .column -->
<div class="clear"></div>
<div class="navigation">
<div class="alignleft"><?php previous_posts_link('Следующие записи') ?></div>
<div class="alignright"><?php next_posts_link('Предыдущие записи') ?></div>
</div>
<?php } ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
И CSS-код, который также нужно добавить на сайт:
.column {
float: left;
width: 48%;
}
.column.right {
float: right;
}
.clear {
clear: both;
height: 0;
overflow: hidden;
}
Мне однажды этот код уже пригодился.
Комментарии (4)
Простите, не поняла, куда именно надо вставлять коды? Немного подробнее расскажите, пожалуйста!
Отличная статья Дмитрий! Скажите пожалуйста, возможен ли вывод ленты постов в 3 столбца?
А каким образом возможно вывести в 3 колонки теги записи?
в Кодексе есть вариант вывода в одну колонку
echo get_the_term_list( $post->ID, ‘post_tag’, ”, ”, ” );
а как их разбить на 3?
Заранее спасибо
Спасибо за идею. Пытаюсь сейчас обвешать её дополнительным функционалом. :)