Вывод ленты постов в 2 столбца

17 октября 2011 г.

Хочу поделиться кодом, который позволяет список постов разбить на 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;
}

Мне однажды этот код уже пригодился.

  12 Мне понравилось!

Koммeнтapии (31):

  1. В принципе не плохой способ, но на мой взгляд слишком уж замудрённый))) я сам уже не раз реализовывал подобный способ, но он по проще будет <div class=" 1) {echo 'fl';} else {echo 'fr';} ?>" >Тут контент и в css пишем два класса .fl {float:left;} .fr {float:right;} Вот весь код.

    • Твой способ у меня использован на главной http://dimox.name/

      Но в статье суть в том, что порядок постов другой, т.е. половина постов в первом столбце, а остальная половина во втором. А то, о чем ты говоришь, там вывод горизонтальный, а не вертикальный, т.е. в первой строке 2 поста, потом во второй 2 и так далее.

      Тут уж надо исходить из того, какой визуально порядок постов требуется.

  2. Дим, как сделать вывод первого поста на всю ширину, а остальные на две колонки (аля как у тебя на dimox.name)? А еще интересней, чтобы, скажем, не только первый, а каждый 3-тий выводился на всю ширину, т.е, допустим 1-ый на всю, два (или четыре) в два столбца, потом опять один на всю и тп.

    • Вот такой код получается – http://pastie.org/2760545

      Стили прямо там написал, вынесешь их в свой CSS-файл.

      Ключевые строки вот эти:

      <?php $i = 0; while (have_posts()) { the_post(); $i++; ?>

      <div class="post<?php if ($i == 1 || $i == 4 || $i == 7) echo ' full'; else echo ' half'; if ($i%3 == false) echo ' right'; ?>">

      Это на случай, если 1-й на всю, 2, 3 пополам, 4-й на всю. Если нужно, чтобы пополам были 2,3,4,5 (т.е. по 4 штуки вместо 2-х), тогда вторая из вышеуказанных строк будет такой:

      <div class="post<?php if ($i == 1 || $i == 6 || $i == 11) echo ' full'; else echo ' half'; if ($i%3 == false || $i%5 == false) echo ' right'; ?>">

  3. Мм, спасибо, Дим, но тут нарисовалась еще проблемка.

    Когда я выводил через первый пример, всё было гуд и заключенные в статьи обхватывались нормально присвоеной в css рамкой:
    http://clip2net.com/clip/m10803/1319647605-clip-243kb.png

    Сейчас же, при выводе тем методом, что ты дал выше, получается вот так:
    http://clip2net.com/clip/m10803/1319646292-clip-184kb.png

    Т.е нормальной обхватывается только первый пост, а остальные не фига :)

    Код:

    <div class="post">

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

    post_content, '')) { ?><a href="" class="more-link">Читать далее
    # опубликовано [] в рубриках: []

    css:
    article
    {
    box-shadow: 0 0 5px #CCCCCC, 1px 1px 0 #FFFFFF inset, -1px -1px 0 #FFFFFF inset, 0 0 15px #DDDDDD inset;
    padding: 10px;
    margin: 13px;
    }

    #content .post {
    background: none repeat scroll 0 0 #FFFFFF;
    overflow: hidden;
    position: relative;
    }

    .half {
    clear: both;
    float: left;
    width: 48%;
    }
    .half.right {
    clear: none;
    float: right;
    }
    .full {
    clear: both;
    }
    .clear {
    clear: both;
    height: 0;
    overflow: hidden;
    }

    В чем беда? :)

  4. А если query_posts используется несколько раз?

    Не могу решить проблему, столько страниц перерыл…

    вот код http://pastie.org/3251280

  5. Здравствуйте!
    Есть исходный код!
    —————————————-

    <a href="" title="">
    Опубликовал в рубрике . Комментарии:


    —————————————

    Хочу сделать первая новость полная потом две половинки, третья полная (1-й на всю, 2, 3 пополам, 4-й на всю) Делаю по Вашим примерам так…

    <div class="blok">
    <a href="" title="">
    Опубликовал в рубрике . Комментарии:

    Но получается хрень!
    Подскажите пожалуйста где туплю?

    Спасибо!

  6. Подскажите а как выводить посты в ряд. В ряду их должно быть от 2-х до 4-х. Каждая запись может быть 2-х видов либо 50рх либо 100рх в ширину. И если после 3-х записей в 50рх идет запись в 100рх, то она должна переместиться на следующую строку, а её место должна занять запись в 50рх. Т.е что бы не оставалось пустого пространсва в строке при выводе записей. Ширина записей идет в произвольном порядке.
    А после 2-ого ряда вывести рекламу.

  7. Как сделать используя ваш пример в 2 колонки, но чтобы первые 5 статей не показывались, т.к. они выводятся в анонсах. Попробывал много вариантов, но сам так и не смог добиться нужного
    Спасибо заранее!

  8. Отличный хак, спасибо. Возьму на вооружение.

  9. Виталька

    а как сделать в таком варианте, чтобы в первом посте, который на всю ширину – был другой размер превьюшки (тоже например на всю ширину), а в последующих постах обычные миниатюры записей

  10. Александр

    Добрый день. Информативно. ТО что я искал. Но перепробовал все и ничего не вышло. У меня тема куплена, и хотелось сделать что б посты выводились в две колонки, порядок с права на лево.

    Подскажите что можно с этим сделать?

    index.php из темы

    http://pastie.org/private/1rbhca37jgizeihmirdxw

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

  11. Добрый день, подскажите как сделать то же самое, только в 3 колонки?

  12. Доброго времени.
    Тоже интересует вывод постов в три столбца. Очень было бы неплохо, если бы вы рассказали, как это сделать :)

  13. Дим, а как сделать чтоб выводилось заданное количество постов. я вставляю query_posts('posts_per_page=10'); а он выводит их все только в левой колонке. Ежели вставлять доwhile (have_posts() то получается 2 в левой и 8 в правой колонке. Не пойму где пописать код…

  14. Я извиняюсь есть вопросик у меня к вам.
    Мне нужно сделать вывод постов в две колонки, код ваш видел но не понял как его вставлять так чтобы все правильно работало? Вывод постов в две колонки мне нужен только на главной, как я понимаю это надо редактировать header.php, могли бы вы помочь немного разобраться в вашем коде? все мои попытки приводят к неправильному отображению сайта.

    Спасибо
    Alex.

Oтпpaвить кoммeнтapий

Облако тегов