Вывод ленты постов в 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;
}
Мне однажды этот код уже пригодился.
В принципе не плохой способ, но на мой взгляд слишком уж замудрённый))) я сам уже не раз реализовывал подобный способ, но он по проще будет
<div class=" 1) {echo 'fl';} else {echo 'fr';} ?>" >Тут контенти в css пишем два класса.fl {float:left;} .fr {float:right;}Вот весь код.Твой способ у меня использован на главной http://dimox.name/
Но в статье суть в том, что порядок постов другой, т.е. половина постов в первом столбце, а остальная половина во втором. А то, о чем ты говоришь, там вывод горизонтальный, а не вертикальный, т.е. в первой строке 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'; ?>">Мм, спасибо, Дим, но тут нарисовалась еще проблемка.
Когда я выводил через первый пример, всё было гуд и заключенные в статьи обхватывались нормально присвоеной в 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;
}
В чем беда? :)
Вставь лучше код через сервис, который я выше использовал (pastie.org). WordPress все попортил.
http://pastie.org/2763686
Ну ты тут, конечно, собрал все в кучу =) Надо было брать только код из комментария.
http://pastie.org/2766146
А я че, я ниче :)
Спасибо, Дим. Фурычит :)
Пожалуйста =))
А если query_posts используется несколько раз?
Не могу решить проблему, столько страниц перерыл…
вот код http://pastie.org/3251280
В этом случае лучше использовать вот такой формат цикла – http://pastie.org/3251478
спасибо!!!
Здравствуйте!
Есть исходный код!
—————————————-
<a href="" title="">
Опубликовал в рубрике . Комментарии:
—————————————
Хочу сделать первая новость полная потом две половинки, третья полная (1-й на всю, 2, 3 пополам, 4-й на всю) Делаю по Вашим примерам так…
<div class="blok">
<a href="" title="">
Опубликовал в рубрике . Комментарии:
Но получается хрень!
Подскажите пожалуйста где туплю?
Спасибо!
Подскажите а как выводить посты в ряд. В ряду их должно быть от 2-х до 4-х. Каждая запись может быть 2-х видов либо 50рх либо 100рх в ширину. И если после 3-х записей в 50рх идет запись в 100рх, то она должна переместиться на следующую строку, а её место должна занять запись в 50рх. Т.е что бы не оставалось пустого пространсва в строке при выводе записей. Ширина записей идет в произвольном порядке.
А после 2-ого ряда вывести рекламу.
Труднорешаемая задача.
Как сделать используя ваш пример в 2 колонки, но чтобы первые 5 статей не показывались, т.к. они выводятся в анонсах. Попробывал много вариантов, но сам так и не смог добиться нужного
Спасибо заранее!
Перед строкой:
<?php if (have_posts()) { ?>добавьте такую:
<?php query_posts($query_string . '&offset=5'); ?>Спасибо!
Есть правда проблема. На сайте http://seonowik.ru/ Ставлю код: http://pastie.org/3497822 И при нажатии на навигации внизу в адресной строке пишется, что открыта новая страница, но на самом деле так же первая и остается
Но вот возникла еще такая проблема. На другом сайте ставлю код: http://pastie.org/3497712
Первые пять постов идут нормально, а затем получается вот, что: http://savepic.net/2499533.htm
В настройках вордпресса стоит показывать 10 постов
Так как решить мне вышеописанный вариант без ошибок и чтобы все работало
Извините, ничем не могу помочь.
Отличный хак, спасибо. Возьму на вооружение.
а как сделать в таком варианте, чтобы в первом посте, который на всю ширину – был другой размер превьюшки (тоже например на всю ширину), а в последующих постах обычные миниатюры записей
Добрый день. Информативно. ТО что я искал. Но перепробовал все и ничего не вышло. У меня тема куплена, и хотелось сделать что б посты выводились в две колонки, порядок с права на лево.
Подскажите что можно с этим сделать?
index.php из темы
http://pastie.org/private/1rbhca37jgizeihmirdxw
За ранее спасибо!
Добрый день, подскажите как сделать то же самое, только в 3 колонки?
Доброго времени.
Тоже интересует вывод постов в три столбца. Очень было бы неплохо, если бы вы рассказали, как это сделать :)
Дим, а как сделать чтоб выводилось заданное количество постов. я вставляю
query_posts('posts_per_page=10');а он выводит их все только в левой колонке. Ежели вставлять доwhile (have_posts()то получается 2 в левой и 8 в правой колонке. Не пойму где пописать код…Во-первых, вставить нужно перед
if (have_posts()).Во-вторых, в двух местах заменить переменную
$posts_per_pageна цифру 10 (количество постов).Спасибо, все получилось.
Я извиняюсь есть вопросик у меня к вам.
Мне нужно сделать вывод постов в две колонки, код ваш видел но не понял как его вставлять так чтобы все правильно работало? Вывод постов в две колонки мне нужен только на главной, как я понимаю это надо редактировать header.php, могли бы вы помочь немного разобраться в вашем коде? все мои попытки приводят к неправильному отображению сайта.
Спасибо
Alex.
Не header.php нужно редактировать, а создать файл home.php (если его нет) и вставить php-код из статьи.