Главная WordPress

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)

  1. Простите, не поняла, куда именно надо вставлять коды? Немного подробнее расскажите, пожалуйста!

  2. Отличная статья Дмитрий! Скажите пожалуйста, возможен ли вывод ленты постов в 3 столбца?

  3. А каким образом возможно вывести в 3 колонки теги записи?
    в Кодексе есть вариант вывода в одну колонку

    echo get_the_term_list ($post→ID, 'post_tag', '', '', '');

    а как их разбить на 3?

    Заранее спасибо

  4. Спасибо за идею. Пытаюсь сейчас обвешать её дополнительным функционалом. :)

Ваш комментарий