Вы здесь:   Главная » Вебмастеру    »    Выводим список рубрик в 2 колонки на WordPress

Выводим список рубрик в 2 колонки на WordPress

Один из гостей сайта «World-X» проявил интерес, как вывести список рубрик в две колонки, также как у нас в боковой панели справа. В ответ делаем соответствующую публикацию, где расскажем насколько просто изменить стандартное отображение рубрик в виджете WordPress.

Как вывести список рубрик в 2 колонки на WordPress

По умолчанию рубрики выводятся в одну колонку в виде маркированного списка или в формате выпадающего меню, последний более предпочтителен, если у Вас более десятка активных категорий записей. Но, если ширина «sidebar» позволяет показывать две колонки наименований, почему бы не воспользоваться этим?

Создаём виджет рубрик в две колонки

Сразу оговоримся, что для работы потребуется поддержка PHP кода виджете. Если Вами напрямую используется файл «sidebar.php», то проблем не возникнет, а для пользователей пункта «Виджеты» в разделе «Внешний вид», рекомендуем предварительно установить плагин «PHP Code Widget».

Итак, ниже приводим код самого виджета, где знающий пользователь может заметить деление рубрик на левую и правую колонки. Копируем код без изменений, и вставляем в место отображения (в нашем случае, виджет в «sidebar»).

<?php
$args = array(
'title_li'=>'',
'echo'=>0,
'style'=>'none'
);
$all_cats = explode("<br />",wp_list_categories($args));
$cat = count($all_cats) - 1;
for ($n=0;$n<$cat;$n++):
if ($n<$cat/2):
$left = $left.'<li>'.$all_cats[$n].'</li>';
elseif ($n>=$cat/2):
$right = $right.'<li>'.$all_cats[$n].'</li>';
endif;
endfor;
?>
<ul class="left">
<?php echo $left; ?>
</ul>
<ul class="right">
<?php echo $right; ?>
</ul>

Не забываем сохранить внесённые изменения. Видим, что виджет выводит рубрики по прежнему в одну колонку. Потому что требуется внести стили CSS для указанных «class».

.left {
float: left;
width: 50%;
}

.right {
float: left;
width: 50%;
}

Копируем и вставляем в файл «style.css» вашей активной темы. После обновления, проверяем виджет на страницах сайта. У Вас должно появиться две симметричных колонки.

Воспользовавшись дополнительными параметрами CSS для упомянутых «классов», можно настроить шрифт наименований, расположение пунктов и другое. Стили помогут подогнать вывод рубрик под дизайн темы оформления WordPress.

P.S.

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

Расскажи друзьям:

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

Авторизоваться через: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: