two-categories.jpgБывают случаи, когда необходимо вывести список категорий в две колонки. Это можно сделать с помощью приема который позволяет заменить традиционный 1-колоночный вывод рубрик в блоге на отображение рубрик в 2 колонки.

Для этого нам нужно найти в файле Вашей темы (чаще всего в sidebar.php) стандартный код вывода рубрик, обычно это:

<?php wp_list_categories() ?>

И заменить его на:

<?php
$cats = explode("<br />",wp_list_categories('title_li=&echo=0&depth=1&style=none'));
$cat_n = count($cats) - 1;
for ($i=0;$i< $cat_n;$i++):
if ($i<$cat_n/2):
$cat_left = $cat_left.'<li>'.$cats[$i].'</li>';
elseif ($i>=$cat_n/2):
$cat_right = $cat_right.'<li>'.$cats[$i].'</li>';
endif;
endfor;
?>

<ul class="left"><?php echo $cat_left;?></ul>
<ul class="right"><?php echo $cat_right;?></ul>

Вот и все! Теперь список Ваших категорий выведется в два столбца.

Также приведу пример с выводом рубрик в четыре колонки:

<?php
$cats = explode("<br />",wp_list_categories('title_li=&echo=0&depth=1&style=none'));
$cat_n = count($cats) - 1;
for ($i=0;$i<$cat_n;$i++):
if ($i<$cat_n/4):
$cat_one = $cat_one.'<li>'.$cats[$i].'</li>';
elseif ($i>=$cat_n/4 && $i<($cat_n/4)*2):
$cat_two = $cat_two.'<li>'.$cats[$i].'</li>';
elseif ($i>=($cat_n/4)*2 && $i<($cat_n/4)*3):
$cat_three = $cat_three.'<li>'.$cats[$i].'</li>';
elseif ($i>=($cat_n/4)*3):
$cat_four = $cat_four.'<li>'.$cats[$i].'</li>';
endif;
endfor;
?>

<ul class="clientsCol"><?php echo $cat_one;?></ul>
<ul class="clientsCol"><?php echo $cat_two;?></ul>
<ul class="clientsCol"><?php echo $cat_three;?></ul>
<ul class="clientsCol"><?php echo $cat_four;?></ul>

Дальше уже наверное будет понятно и Вы сможете сами переделать код под три и больше колонок.

h++p://www.wp-info.ru/otobrazhenie-rubrik-v-wordpress-v-neskolko-kolonok/

Категория: PHP, HTML, CSS..., WordPress | Теги: ,

Комментарии к записи “Отображение рубрик в WordPress в несколько колонок”

  1. Purgen | 7.08.2010

    Вордпресс 3.0.1 не работает данный способ.

    И кто придумал все рубрики и подрубрики выводить одной колонкой?
    Так можно километровый список получить!

  2. Аня | 9.09.2010

    Здравствуйте.Скажите а у меня шаблон вообще идёт с двумя колонками в поле контента, а можно ли чтоб эти две колонки выводили новые посты из двух определённых рубрик, а не со всех.У меня выводятся записи из вех рубрик, а надо только чтоб из- двух.Если есть такая возможность могли бы написать как это сделать?Буду премного вам благодарна.У меня вордпресс 3.

  3. Макс | 9.09.2010

    Почитайте статьи про функцию query_posts, вот например есть

  4. tevong | 27.03.2011

    шаблон мой как шаблон данного сайта. левый сайдбар я кикнул а вот в 2 колонки не выходит сделать рубрики а их у меня более 50.
    строки не нашел ни в одном файле шаблона
    рад буду любым ответам

  5. Макс | 27.03.2011

    tevong, На сколько я знаю, функция wp_list_categories должна быть полюбому (не уверен, т.к. не ковырялся в WP выше версии 2.9).

    Сообщите версию WP, и лучше даже покажите тему (шаблон), тогда можно будет о чем-то говорить.

  6. Валерий | 12.10.2012

    Да, у меня в WP 3.4.2 тоже не работает. Причем я пробовал по разному, и плагины тоже (плагины все попадались для версий WP до 3-х). Толку — ноль! А потом подумал подумал, и нашел простое решение. Как говорил Шерлок Холмс: «Все элементарно, Ватсон!»

    Итак: открываем виджеты и копируем в сайдбар обыкновенный текстовый виджет. Обзываем его на Ваше усмотрение (у меня — «Категории товаров»).
    Вспоминаем, что текстовый виджет WP — это обычный контейнер, в котором может быть все, что угодно, а точнее — все что можно описать тегами html: ссылки, картинки, и т.д. Если это Вам очевидно, то дальше все просто.

    Прописываем прямо в поле текста текстового виджета:


    < div class="menu2-colomn">
    < a href="http://vash_sait/element_menu_1">Элемент меню 1< /a>
    < /div>
    < div class="menu2-colomn">
    < a href="http://vash_sait/element_menu_2">Элемент меню 2< /a>
    < /div>
    < div class="menu2-colomn">
    < a href="http://vash_sait/element_menu_3">Элемент меню 3< /a>
    < /div>
    < div class="menu2-colomn">
    < a href="http://vash_sait/element_menu_N">Элемент меню N< /a>
    < /div>

    или можно так ( чуть короче, но менее наглядно):


    < a href="http://vash_sait/element_menu_1" class="menu2-colomn">Элемент меню 1< /a>
    < a href="http://vash_sait/element_menu_2" class="menu2-colomn">Элемент меню 2< /a>
    < a href="http://vash_sait/element_menu_3" class="menu2-colomn">Элемент меню 3< /a>
    < a href="http://vash_sait/element_menu_N" class="menu2-colomn">Элемент меню N< /a>

    … столько сколько нужно (лишние пробелы из кода нужно убрать)

    А затем в CSS файле шаблона темы:

    .menu2-colomn {
    float:left;
    width:135px;
    }

    Пояснения: в CSS стиль можно добавить еще стилей, чтобы улучшить визуальное восприятие элементов (отступы, картинку в виде маркера, и т.д.). В поле width задается не 135px, а половина вашего сайдбара. Если в поле width задать 1/3 сайдбара, то менюшка автоматически станет в 3 колонки.

    Минус данного метода: при добавлении/удалении элементов меню вносить изменения придется в ручную.

    Плюс: работает во всех версиях WP, не нужны плагины, и практически не требует изменений исходного кода (добавление одного стиля в CSS за изменения не считается!:)).

    Таким же способом через поле текстового виджета, я сделал меню на своем блоге в виде миниатюр самых популярных статей в сайдбаре. Просто, и красиво!

  7. Валерий | 12.10.2012

    Только что заметил еще один жирный плюс данной реализации меню — ускорение блога. У меня пустой WP на моей теме с тестовой записью «привет мир!», одним комментом, и рубриками и страница в сайдбаре выдавал: Запросов к БД 17, Потребляемая память — 21.33. После установки 10-ти плагинов: Запросов к БД 19, Потребляемая память — 22.73. А сейчас: Запросо к БД 14, Потребляемая память — 20.31!

  8. Макс | 12.10.2012

    Благодарю, Валерий, за развернутый комментарий и подсказку читателям.

  9. Валерий | 13.10.2012

    Всегда пожалуйста! WP, наверное потому и так популярен, что всегда можно найти нужную информацию. И я решил внести свою маленькую лепту. :) Только я не понял, Максим, зачем Вы убрали из кода дивы. Новички могут скопировать, и у них ничего не заработает. CSS сласс .menu2-column должен чему-то назначаться. Поэтому каждую ссылку следует обернуть конструкцией ссылка. Конечно возможно назначить класс и самой ссылке, но учитывая наследования могут проявиться баги…

Оставьте свой комментарий