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(', ') ?> <?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 за ссылку с анкором Обмен постовыми с вашего блога. Детальнее читайте, перейдя по ссылке.
05 Сен 2009 в 13:33
1Дорый день. Скажите, а как тогда можно вывести в один ряд все ссылки на категории? К примеру ничего не дает((
05 Сен 2009 в 13:35
2Простите, парсер код съел :: wp_list_categories ('style=none')
05 Сен 2009 в 13:51
3http://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 у меня не получается.
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 колонки.
К постам те же правила, что и у Соники. И все.
20 Ноя 2009 в 13:49
8Добрый день, подскажите пожалуйста как вывести на странице категории — дополнительно внизу все заголовки постов этой категории в алфавитном порядке в две или три колонки?
20 Ноя 2009 в 21:55
9Через комбинацию условий:
if (is_cat) -> получение cat_id
Далее выводим все посты из этой категории (только заголовки и алфавитный порядок передаем в параметрах функции query_posts (codex.wordpress.org)
query_posts ('cat=cat_id');
и комбинируем с методом, указанным в статье + хорошее знание css, чтобы это все вывести в 2 или 3 колонки.
Точнее не скажу, самому делать не приходилось, потому нужно внимательно разбираться по Кодексу и экспериментировать. Главную функцию я вам подсказал, в Кодексе все по ней есть.
15 Июл 2010 в 4:28
10Подскажите пожалуйста, как разбить вывод категорий не просто по 2 столбцам, но и по теме. Например в одном столбце выводятся категории по семействам комнатных растений, а в другом мои заметки по комнатным цветам. Прошу Вас помогите, как это организовать на моем сайте? Если просто разбить категории по 2 столбцам, то прес их сортирует не так как мне нужно.
15 Июл 2010 в 12:13
11Ну, тогда у вас все иначе. Вам просто достаточно создать в разметке 2 колонки div.left-column {float: left; width: 50%;} и div.right-column {float: right: width: 50%;}, и в каждую из колонок выводить посты определенной категории, используя query_posts (), кажется. Как он используется, посмотрите в Кодексе WordPress, это достаточно просто, в его параметрах просто задается id категории, посты из которой нужно вывести, и с помощью него можно выводить посты как вам заблагорассудится.
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% но лично мне в диз подходит больше воздуха
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Скажите а можно вообще для новичков и тупых всё на пальцах объяснить.Нужно на главной две колонки чтоб отображались из двух рубрик и всё.Можно подробно что где вписать и как. А то ничего не понимаю куда вставлять коды и всё такое.
07 Фев 2011 в 23:16
15Спасибо, не плохое решение, но как по мне очень громоздкое, зачем для примера постоянно закрывать и открывать теги php?
07 Фев 2011 в 23:30
16Ну, это же не правило. Делайте как нравится в пределах того, что позволяет синтаксис языка... И разве может быть решение громоздким из-за мелких нюансов синтаксиса...
20 Фев 2011 в 17:58
17Добрый день. Столкнулся с проблемой в стандартной галереи.
Ставлю показывать изображения в 3 колонки, он стабильно переносит одну. Даже если ставить и больше,переносит.Как с этим бороться?
_kommentiruy.ru/?page_id=201
И еше, проблема в отображении сайта в IE.
Когда заходишь в одиночную запись, шаблон прилепает к левому краю и искажается отображение значков соц сетей и комментов.
_kommentiruy.ru/?p=52
20 Фев 2011 в 21:49
18Чтобы делать сайты, надо знать хотя бы основы веб-технологий... Знай вы, что такое CSS, и как его править, у вас бы ни первого, ни второго вопроса вообще не возникло. По колонкам: в CSS нужно просто чуть уменьшить ширину контейнерам картинок. У них там 33% ширины и еще и отступы заданы. Естественно суммарная ширина больше 100% выходит, вот третья колонка и не помещается. Ну, а по IE проблема с ломающейся центровкой — это скорее всего неверный doctype, а иконки — либо не поддерживающийся png-канал, либо еще что. По IE говорю навскидку, сам в осле ваш сайт не смотрел. Учите html/css, и будет вам счастье.
13 Ноя 2011 в 20:46
19Здравствуйте.
Подскажите, пожалуйста, как можно вывести на отдельную страницу в две или три колонки названия подкатегорий?
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 колонки отображения последних записей!