WordPress: вывод постов в 2 колонки

Пятница, 28 Авг 2009 21:14

Рубрика: WordPress

Недавно понадобилось организовать на одном сателле вывод постов в 2 колонки. Для этого потребуется заменить код стандартного цикла от <?php if (have_posts()) : while (have_posts()) : the_post(); ?> и до <?php endif; ?> на слегка модифицированный:

<?php $col = 1; ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if ($col == 1) echo "<div class=\"row\">"; ?>
  <div class="post col<?php echo $col;?>" id="post-<?php the_ID(); ?>">
  <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Постоянная ссылка <?php the_title(); ?>"><?php the_title(); ?></a></h2>
 
  <p class="postmetadata"><small><span style="float: left;"><?php the_time('j F, Y') ?><?php // the_author() ?></span> <span style="float: right;">Рубрика: <?php the_category(', ') ?> &nbsp; <?php wp_link_pages(array('before' => '', 'after' => '', 'next_or_number' => 'number')); ?>  <?php edit_post_link('Редактировать', '', ''); ?></span></small> <?php // comments_popup_link('Нет комментариев »', 'Один комментарий »', 'Комментариев: %'); ?></p>
  <br clear="all" />
 
  <div class="entry">
  <?php the_content('Читать дальше  »'); ?>
  </div>
  </div>
<?php if ($col == 1) echo "</div>"; (($col==1) ? $col=2 : $col=1); ?>
<?php endwhile; else : ?>
   <h2 class="center">Не найдено</h2>
   <p class="center">Здесь ничего нет, попробуйте поискать:</p>
   <?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>

И, соответственно, не забыть дописать в css следующие строки:

1
2
3

.row{clear: both;}
.col1{width: 200px; float: left; padding: 0 10px;}
.col2{width: 200px; float: right;  padding: 0 10px;}

Вот и все, теперь имеем 2 колонки с классами .col1 и col2. Посты идут по 2 в ряд, каждый ряд имеет одинаковую высоту за счет класса .row. css в данном примере крайне важен, потому вы все еще можете не заметить, что посты уже выстроены по 2 в ряд, пока не зададите в css правильно ширину колонок.

Пример позаимствован у многоуважаемой Soniki.

Постовой. Денис Чекалов проводит акцию небывалой щедрости, предлагая блоггерам поставить на них ссылку с ресурсов ТИЦ40 ПР4, ТИЦ50 ПР3 за ссылку с анкором Обмен постовыми с вашего блога. Детальнее читайте, перейдя по ссылке.

Теги: WordPress

http://blogto4ka.ru

RSS комментариев

24 комментария Упоминаний: 2 Комментировать

Макс пишет:

05 Сен 2009 в 13:33
1
Дорый день. Скажите, а как тогда можно вывести в один ряд все ссылки на категории? К примеру ничего не дает((
Макс пишет:

05 Сен 2009 в 13:35
2
Простите, парсер код съел :: wp_list_categories ('style=none')
nikolas_sharp пишет:

05 Сен 2009 в 13:51
3
http://codex.wordpress.org/User:MissLeili/wp_list_categories — соответствующая страница на кодекс. А вообще я всегда делаю это с помощью css.
<ul class="categories-list"> <?php wp_list_categories(); ?> </ul>
А в css:
.categories-list li {float: left; margin: 0 5px; padding: 0 3px;}
Приблизительно так.
Макс пишет:

05 Сен 2009 в 15:09
4
Да, вот так работает) А почему wordpress не дает возможность в теге отказываться от li — не понятно.
андрей пишет:

19 Ноя 2009 в 14:05
5
А как организовать вывод новостей в 4 колонки. Уже весь инет обрыл, но ничего так и не нашел. Помогите, готов даже заплатить — пишите на dekan23@gmail.com
андрей пишет:

19 Ноя 2009 в 14:06
6
за основу брал статью _http://www.sonika.ru/blog/wordpress/post-columns.htm но там есть ввывод только в 3 колонки, а переделать под 4 у меня не получается.
nikolas_sharp пишет:

20 Ноя 2009 в 11:53
7
Думаю, это не намного сложнее, чем вывод в 2 колонки.
Вам достаточно для .row написать css таким образом, чтобы в одном ряду было как бы по 2 ряда. Т.е. 2 поста в одном ряду слева, и тут же 2 поста вроде как в этом же ряду справа. Модифицировать php абсолютно не надо. Только css-код.
Примерно так:
.rows-wrapper {float: left; width: 400px;} — ширина общей обертки для двух рядов по 2 статьи.
.row {float: left; width: 200px;} — ширина 1 ряда, содержащего две статьи. В .rows-wrapper вмещаются ровно 2 ряда, соотвественно 4 статьи — они же 4 колонки.
К постам те же правила, что и у Соники. И все.
botanik пишет:

20 Ноя 2009 в 13:49
8
Добрый день, подскажите пожалуйста как вывести на странице категории — дополнительно внизу все заголовки постов этой категории в алфавитном порядке в две или три колонки?
nikolas_sharp пишет:

20 Ноя 2009 в 21:55
9
Через комбинацию условий:
if (is_cat) -> получение cat_id
Далее выводим все посты из этой категории (только заголовки и алфавитный порядок передаем в параметрах функции query_posts (codex.wordpress.org)
query_posts ('cat=cat_id');
и комбинируем с методом, указанным в статье + хорошее знание css, чтобы это все вывести в 2 или 3 колонки.
Точнее не скажу, самому делать не приходилось, потому нужно внимательно разбираться по Кодексу и экспериментировать. Главную функцию я вам подсказал, в Кодексе все по ней есть.
aspidistra пишет:

15 Июл 2010 в 4:28
10
Подскажите пожалуйста, как разбить вывод категорий не просто по 2 столбцам, но и по теме. Например в одном столбце выводятся категории по семействам комнатных растений, а в другом мои заметки по комнатным цветам. Прошу Вас помогите, как это организовать на моем сайте? Если просто разбить категории по 2 столбцам, то прес их сортирует не так как мне нужно.
nikolas_sharp пишет:

15 Июл 2010 в 12:13
11
Ну, тогда у вас все иначе. Вам просто достаточно создать в разметке 2 колонки div.left-column {float: left; width: 50%;} и div.right-column {float: right: width: 50%;}, и в каждую из колонок выводить посты определенной категории, используя query_posts (), кажется. Как он используется, посмотрите в Кодексе WordPress, это достаточно просто, в его параметрах просто задается id категории, посты из которой нужно вывести, и с помощью него можно выводить посты как вам заблагорассудится.
GIRYA пишет:

23 Июл 2010 в 20:55
12
А вот и очень красивое решение чтобы сделать резину.
Вместо твоего кода в CSS вставить этот:
.row{clear:both;} .col1{width:48%; float:left; padding:0 10px;} .col2{width:48%; float:right; padding:0 10px;}
% можно выставить и 49% но лично мне в диз подходит больше воздуха
GIRYA пишет:

23 Июл 2010 в 21:01
13
Сории это я сморозил вот апдейтик
.row{clear: both;}
.col1{width:47%;float: left;padding:0 0 0 2%;}.col2{width:47%;float: right;padding:0 2% 0 0;}
Аня пишет:

08 Сен 2010 в 8:20
14
Скажите а можно вообще для новичков и тупых всё на пальцах объяснить.Нужно на главной две колонки чтоб отображались из двух рубрик и всё.Можно подробно что где вписать и как. А то ничего не понимаю куда вставлять коды и всё такое.
Jurgen пишет:

07 Фев 2011 в 23:16
15
Спасибо, не плохое решение, но как по мне очень громоздкое, зачем для примера постоянно закрывать и открывать теги php?
nikolas_sharp пишет:

07 Фев 2011 в 23:30
16
Ну, это же не правило. Делайте как нравится в пределах того, что позволяет синтаксис языка... И разве может быть решение громоздким из-за мелких нюансов синтаксиса...
Никита пишет:

20 Фев 2011 в 17:58
17
Добрый день. Столкнулся с проблемой в стандартной галереи.
Ставлю показывать изображения в 3 колонки, он стабильно переносит одну. Даже если ставить и больше,переносит.Как с этим бороться?
_kommentiruy.ru/?page_id=201
И еше, проблема в отображении сайта в IE.
Когда заходишь в одиночную запись, шаблон прилепает к левому краю и искажается отображение значков соц сетей и комментов.
_kommentiruy.ru/?p=52
nikolas_sharp пишет:

20 Фев 2011 в 21:49
18
Чтобы делать сайты, надо знать хотя бы основы веб-технологий... Знай вы, что такое CSS, и как его править, у вас бы ни первого, ни второго вопроса вообще не возникло. По колонкам: в CSS нужно просто чуть уменьшить ширину контейнерам картинок. У них там 33% ширины и еще и отступы заданы. Естественно суммарная ширина больше 100% выходит, вот третья колонка и не помещается. Ну, а по IE проблема с ломающейся центровкой — это скорее всего неверный doctype, а иконки — либо не поддерживающийся png-канал, либо еще что. По IE говорю навскидку, сам в осле ваш сайт не смотрел. Учите html/css, и будет вам счастье.
Grigogo пишет:

13 Ноя 2011 в 20:46
19
Здравствуйте.
Подскажите, пожалуйста, как можно вывести на отдельную страницу в две или три колонки названия подкатегорий?
nikolas_sharp пишет:

13 Ноя 2011 в 21:22
20
@Grigogo,
плагин exec_php или же работа в шаблоне с условием на эту отдельную страницу
+
codex.wordpress.org/Templ..._list_categories
+ немного css...
Максим пишет:

19 Ноя 2011 в 14:38
21
подскажите куда именно ставить
.row{clear: both;}
.col1{width: 200px; float: left; padding: 0 10px;}
.col2{width: 200px; float: right; padding: 0 10px;}
Артурвеб пишет:

29 Дек 2013 в 17:36
22
Здравствуйте! сделал все по вашей инструкции...ничего не изменилось..., возможно что надо еще править и индекс пхп, пейдж пхп, сингл пхп... но там код другой!
роман пишет:

13 Фев 2015 в 18:10
23
Что-то class="col2" не выводится
Сергей пишет:

13 Ноя 2016 в 13:52
24
вообще хрень, страница увеличилась в 300 раз и нифига не две колонки! Вы могли бы подробно описать в каких шаблонах редактировать!
в индекс.пхп только поменял, плагины есть которые выводят красиво, но у меня сразу теряется функционал с мета тегами рубриками. Я к тому что, подскажите как без глюков сайта сделать ПРОСТО (на первый взгляд) 2 колонки отображения последних записей!