WordPress — вывод постов

Как вывести посты в два столбца?

Wordpress - вывод постовСегодня хочу рассказать и показать вам вывод постов Worpress в два столбца. Такая необходимость возникает у людей, которые ведут информационные блоги и добавляют новости в свой блог десятками. А иногда некоторым блоггерам просто нравится такой вывод постов, а в шаблоне это не предусмотрено.

Представленный код, разбивает страницу вертикально на два столбца, а посты выводятся следующим образом. Если у вас выводится 7 постов вообще, то 4 первых поста выводятся в первом столбце, а 3 следующих во втором.

Суть этого php-кода, добавленного к стандартному коду поста, заключается в том, чтобы в определенных местах вставить html-теги, с помощью которых через CSS оформить посты в столбцы.

Конечно существуют и другие способы чтоб сделать вывод постов wordpress в два столбца, все зависит от того какую цель вы преследуете. Можно вывод постов делать вертикально, как в этом случае, а можно горизонтально. Например в строке по два поста.

А также, обязательно!

Дописываем в 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;
}

Вот и все.

Моя рекомендация. Если вы плохо разбираетесь с кодами wordpress, то лучше самому этим не заниматься. Обратитесь к специалистам и они вам сделают это профессионально и без каких-либо проблем для вашего блога.

Удачи вам и процветания!

Автор - Александр

Меня зовут Александр.
Я Вебмастер и SEO — специалист по созданию и продвижению сайтов на WordPress.
В профессиональном интернет-маркетинге c 2007 года. Основные направления: создание и продвижение web-проектов в российском сегменте интернет. Специализация: создание сайтов и их комплексное продвижение, внутренняя оптимизация, внешняя оптимизация, трафиковое продвижение, контентное продвижение...

Связаться со мной >>
Посмотреть все публикации

Ваше имя (обязательно)

Ваш e-mail (обязательно)

Сообщение (обязательно)

"Поставьте галочку, если вы не робот"

и решите пример ответ буквами

комментария 3

  • Дмитрий

    Спасибо, а то только на сателиты однотипные попадал

  • Очень нужная и дельная информация. Но, к сожалению, у меня пока так и не получилось совместить мой вывод постов
    (

    <a href="» rel=»bookmark»>

    ) с Вашим решением.:( А мне как раз и нужно 2 выводимых поста разместить не вертикально друг за другом, а горизонтально. Не подскажите, как можно редактировать приведённый мною код, сильно его не меняя? Буду очень благодарна за помощь.

  • Ой, а у меня всё получилось! И всего-то надо было класс перенести.
    Но всё-равно спасибо за полезный материал — никогда не знаешь, что и где пригодится.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *