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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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 за ссылку с анкором Обмен постовыми с вашего блога. Детальнее читайте, перейдя по ссылке.

Теги: 

http://blogto4ka.ru

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

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

  1. Макс пишет:

    05 Сен 2009 в 13:33 Reply to this comment

    1

    Дорый день. Скажите, а как тогда можно вывести в один ряд все ссылки на категории? К примеру ничего не дает((

  2. Макс пишет:

    05 Сен 2009 в 13:35 Reply to this comment

    2

    Простите, парсер код съел :: wp_list_categories ('style=none')

  3. nikolas_sharp пишет:

    05 Сен 2009 в 13:51 Reply to this comment

    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;}

    Приблизительно так.

  4. Макс пишет:

    05 Сен 2009 в 15:09 Reply to this comment

    4

    Да, вот так работает) А почему wordpress не дает возможность в теге отказываться от li — не понятно.

  5. андрей пишет:

    19 Ноя 2009 в 14:05 Reply to this comment

    5

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

  6. андрей пишет:

    19 Ноя 2009 в 14:06 Reply to this comment

    6

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

  7. nikolas_sharp пишет:

    20 Ноя 2009 в 11:53 Reply to this comment

    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 колонки.

    К постам те же правила, что и у Соники. И все.

  8. botanik пишет:

    20 Ноя 2009 в 13:49 Reply to this comment

    8

    Добрый день, подскажите пожалуйста как вывести на странице категории — дополнительно внизу все заголовки постов этой категории в алфавитном порядке в две или три колонки?

  9. nikolas_sharp пишет:

    20 Ноя 2009 в 21:55 Reply to this comment

    9

    Через комбинацию условий:

    if (is_cat) -> получение cat_id

    Далее выводим все посты из этой категории (только заголовки и алфавитный порядок передаем в параметрах функции query_posts (codex.wordpress.org)

    query_posts ('cat=cat_id');

    и комбинируем с методом, указанным в статье + хорошее знание css, чтобы это все вывести в 2 или 3 колонки.

    Точнее не скажу, самому делать не приходилось, потому нужно внимательно разбираться по Кодексу и экспериментировать. Главную функцию я вам подсказал, в Кодексе все по ней есть.

  10. aspidistra пишет:

    15 Июл 2010 в 4:28 Reply to this comment

    10

    Подскажите пожалуйста, как разбить вывод категорий не просто по 2 столбцам, но и по теме. Например в одном столбце выводятся категории по семействам комнатных растений, а в другом мои заметки по комнатным цветам. Прошу Вас помогите, как это организовать на моем сайте? Если просто разбить категории по 2 столбцам, то прес их сортирует не так как мне нужно. 

  11. nikolas_sharp пишет:

    15 Июл 2010 в 12:13 Reply to this comment

    11

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

  12. GIRYA пишет:

    23 Июл 2010 в 20:55 Reply to this comment

    12

    А вот и очень красивое решение чтобы сделать резину. 

    Вместо твоего кода в CSS вставить этот:

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

    % можно выставить и 49% но лично мне в диз подходит больше воздуха

  13. GIRYA пишет:

    23 Июл 2010 в 21:01 Reply to this comment

    13

    Сории это я сморозил вот апдейтик

    .row{clear: both;}

    .col1{width:47%;float: left;padding:0 0 0 2%;}.col2{width:47%;float: right;padding:0 2% 0 0;}

  14. Аня пишет:

    08 Сен 2010 в 8:20 Reply to this comment

    14

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

  15. Jurgen пишет:

    07 Фев 2011 в 23:16 Reply to this comment

    15

    Спасибо, не плохое решение, но как по мне очень громоздкое, зачем для примера постоянно закрывать и открывать теги php?

  16. nikolas_sharp пишет:

    07 Фев 2011 в 23:30 Reply to this comment

    16

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

  17. Никита пишет:

    20 Фев 2011 в 17:58 Reply to this comment

    17

    Добрый день. Столкнулся с проблемой в стандартной галереи.

    Ставлю показывать изображения в 3 колонки, он стабильно переносит одну. Даже если ставить и больше,переносит.Как с этим бороться?

    _kommentiruy.ru/?page_id=201

    И еше, проблема в отображении сайта в IE.

    Когда заходишь в одиночную запись, шаблон прилепает к левому краю и искажается отображение значков соц сетей и комментов.

    _kommentiruy.ru/?p=52

  18. nikolas_sharp пишет:

    20 Фев 2011 в 21:49 Reply to this comment

    18

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

  19. Grigogo пишет:

    13 Ноя 2011 в 20:46 Reply to this comment

    19

    Здравствуйте.

    Подскажите, пожалуйста, как можно вывести на отдельную страницу в две или три колонки названия подкатегорий?

  20. nikolas_sharp пишет:

    13 Ноя 2011 в 21:22 Reply to this comment

    20

    @Grigogo,

    плагин exec_php или же работа в шаблоне с условием на эту отдельную страницу

    +

    codex.wordpress.org/Templ..._list_categories

    + немного css...

  21. Максим пишет:

    19 Ноя 2011 в 14:38 Reply to this comment

    21

    подскажите куда именно ставить

    .row{clear: both;}

    .col1{width: 200px; float: left; padding: 0 10px;}

    .col2{width: 200px; float: right; padding: 0 10px;}

  22. Артурвеб пишет:

    29 Дек 2013 в 17:36 Reply to this comment

    22

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

  23. роман пишет:

    13 Фев 2015 в 18:10 Reply to this comment

    23

    Что-то class="col2" не выводится

  24. Сергей пишет:

    13 Ноя 2016 в 13:52 Reply to this comment

    24

    вообще хрень, страница увеличилась в 300 раз и нифига не две колонки! Вы могли бы подробно описать в каких шаблонах редактировать!

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

Оставьте свой комментарий о материале
(Комментарии со ссылками попадают на модерацию. Остальные не попадают, но я могу удалять те, которые посчитаю бесполезными, не несущими смысловой нагрузки)