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-проектов в российском сегменте интернет. Специализация: создание сайтов и их комплексное продвижение, внутренняя оптимизация, внешняя оптимизация, трафиковое продвижение, контентное продвижение...

Связаться со мной >>

• Установка WordPress на хостинг - 11.05.2017
• Хостинг для WordPress - 26.04.2017
• 7 советов как ускорить WordPress - 18.01.2017
• WordPress плагины вывода популярных постов - 25.07.2016
• Готовим ваш сайт для мобильных устройств? - 29.06.2016

Посмотреть все публикации

Как преодолеть технические сложности

Javascript + jQuery для начинающих

Профессиональный сайт за один день.

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

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

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

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

и решите пример 8-5= ответ буквами

Δ