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

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

Как вы, наверняка, знаете, для вывода списка рубрик в WordPress используется функция wp_list_categories(). Манипулируя этой функцией с помощью PHP, мы можем реализовать вывод этого списка в две колонки.

Прошу обратить внимание, что этот способ годится в случае, если нужно вывести только родительские рубрики (без подрубрик).

В соответствующее место шаблона вашей WordPress-темы вставьте следующий PHP-код:

<?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) {
		$catLeft = $catLeft.'<li>'.$cats[$i].'</li>';
	} elseif ($i >= $cat_n / 2) {
		$catRight = $catRight.'<li>'.$cats[$i].'</li>';
	}
}
?>

А после него вот такой HTML-код:

<div class="cats">
	<ul class="catLeft">
		<?php echo $catLeft;?>
	</ul>
	<ul class="catRight">
		<?php echo $catRight;?>
	</ul>
</div>

Теперь остается расположить списки правильно с помощью CSS (добавьте эти стили в файл style.css вашей темы):

.cats {
	width: 100%;
	overflow: hidden;
}
.catLeft,
.catRight {
	float: left;
	width: 50%;
	padding: 0;
}

Комментарии (6)

Роман
13 августа 2014 г. в 11:52
В соответствующее место шаблона вашей WordPress-темы вставьте следующий PHP-код:
Крайне не понятна фраза “В соответствующее место” – какое место соответствует?
1. Dimox
  13 августа 2014 г. в 12:45 / ответ на коммент Роман
  То место, где хотите увидеть результат.

Sasha

3 декабря 2014 г. в 14:45

А если в три колонки надо вывести?

Игорь

27 февраля 2018 г. в 23:59 / ответ на коммент Sasha

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

Вадим
20 декабря 2020 г. в 17:15
Добрый вечер, Дмитрий

Воспользовался вашим кодом, но у меня категории выводятся по-прежнему в 1 колонку…
как прописать количество категорий в колонке 1 и 2
К примеру: у меня 8 кат. И мне нужно распределить по 4 в каждой.
Есть ли такое решение?
Спасибо, надеюсь на скорый ответ.
1. Dimox
  20 декабря 2020 г. в 18:09 / ответ на коммент Вадим
  В коде не хватало отключения отступов у списков:
  
  .catLeft, .catRight { padding: 0; }

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

Смотрите также

Как в списке рубрик WordPress-сайта выделить рубрику текущей записи

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

Разметка WordPress-меню по БЭМ с помощью волкера

Удаляем ссылку у текущего пункта меню WordPress

Комментарии (6)

Ваш комментарий