Облако тегов, та штука в сайдбаре, которую многие ставят и забывают. Механически, «чтобы было». А зря: грамотно оформленное облако собирает внутренние переходы не хуже навигационного меню. Особенно на сайтах с сотней постов, где рубрикатор уже не вывозит.

Проблема в том, что стандартный виджет «Облако тегов» почти не настраивается. Размер шрифта, максимум. Цвета, никаких. Форма, плоский список ссылок, который стыдно показывать. Если тема не написала под него стили, результат удручает.

К счастью, WordPress даёт два пути: ручной вызов wp_tag_cloud() прямо в файлах темы и нативный блок «Облако тегов» в Gutenberg. Первый, для полного контроля над разметкой, второй, когда нужно быстро и без кода. Оба разбираем ниже с живыми сниппетами, скриншотами и видео.

💡 Быстрый обзор:

• Вставить wp_tag_cloud() в sidebar.php или footer.php, и получить облако тегов в любом месте
• Стилизовать вывод через CSS: кнопки с фоном, скруглением и hover-эффектом
• Воспользоваться блоком «Облако тегов» в редакторе Gutenberg, три клика, ноль кода
• Посмотреть видеоурок по настройке прямо из админки WordPress

Ручной вывод через wp_tag_cloud()

WordPress ещё с версии 2.3 содержит функцию wp_tag_cloud(). Она собирает все теги сайта, считает частоту использования и формирует облако, размер шрифта каждого тега пропорционален числу постов с ним. Вызов вставляется напрямую в файл темы, туда, где должно появиться облако.

Базовый сниппет для sidebar.php, footer.php или кастомного шаблона:

1
<?php
2
wp_tag_cloud( array(
3
    'smallest' => 8,
4
    'largest'  => 22,
5
    'unit'     => 'pt',
6
    'number'   => 45,
7
    'orderby'  => 'name',
8
    'order'    => 'ASC',
9
    'taxonomy' => 'post_tag',
10
    'format'   => 'flat',
11
) );

Что означают параметры (полный список, в документации WordPress):

smallest и largest, минимальный и максимальный размер шрифта. По умолчанию 8 и 22 пункта. Если разброс режет глаз, сузьте вилку: например, 10 и 18.

unit, единица измерения. По умолчанию pt, принимает любые CSS-единицы: px, em и rem. Для экрана чаще берут пиксели.

number, сколько тегов показывать. Ноль означает «все». На практике 45-50 хватает с запасом, иначе облако превращается в кашу из сотни ссылок разного размера.

orderby, сортировка: name даёт алфавитный порядок, count выводит самые частотные первыми. Связка orderby => 'count' с order => 'DESC' ставит ходовые теги на первые позиции.

taxonomy, таксономия. По умолчанию post_tag, но можно подставить category или кастомную таксономию интернет-магазина и получить облако категорий либо меток товаров.

format, формат вывода: flat (ссылки через пробел), list (маркированный список) или array (массив для дальнейшей обработки в PHP).

Функцию безопасно размещать где угодно в теме. Если нужен отдельный шаблон страницы с облаком, создайте page-tagcloud.php, добавьте вызов wp_tag_cloud() между get_header() и get_footer(), а в админке назначьте странице этот шаблон.

Стилизация тегов через CSS

Вызов функции отдаёт сырой HTML: теги внутри <a>, обёрнутые в <div class="tagcloud">. Без CSS, свалка разнокалиберных ссылок. Стили ниже превращают их в аккуратные кнопки:

1
.tagcloud a {
2
    display: inline-block;
3
    padding: 4px 10px;
4
    margin-right: 7px;
5
    margin-bottom: 7px;
6
    background: #f0f0f0;
7
    color: #555;
8
    font-size: 11px;
9
    font-weight: bold;
10
    text-transform: lowercase;
11
    border-radius: 5px;
12
    border: 1px solid #ccc;
13
    text-decoration: none;
14
}
15
.tagcloud a:hover {
16
    background: #e0e0e0;
17
    color: #000;
18
    text-decoration: none;
19
}

CSS минимальный и целенаправленный: inline-block держит кнопки в строке, margin-bottom компенсирует переносы, border-radius скругляет углы. Серый фон и приглушённый текст не конфликтуют ни с одной брендовой палитрой. При наведении кнопка мягко темнеет.

Код вставляется в style.css дочерней темы или в поле «Дополнительные стили» кастомайзера («Внешний вид» → «Настроить» → «Дополнительный CSS»). Второй вариант надёжнее: стили не слетят при следующем обновлении темы.

Совет: если облако в сайдбаре и в кастомном шаблоне должно выглядеть по-разному, оберните вызов в дополнительный <div class="custom-tagcloud"> и задайте стили с двойной специфичностью: .custom-tagcloud .tagcloud a { ... }.

Встроенный блок «Облако тегов» в Gutenberg

Когда править файлы темы нет желания, WordPress предлагает встроенное решение. Начиная с версии 5.8 редактор блоков включает блок «Облако тегов», он вставляется в любую запись или страницу без единой строчки кода.

Добавляется стандартно: в редакторе нажмите «+», найдите «Облако тегов» и перетащите в нужное место. Блок автоматически подхватывает все теги сайта, сортирует по алфавиту и масштабирует размер шрифта пропорционально частоте использования. В боковой панели доступны настройки:

• количество тегов (по умолчанию 45, максимум 100)
• включение счётчика постов рядом с каждым тегом
• переключение между тегами и категориями через выпадающий список таксономии

Блок работает в любой современной теме, поддерживает группы и колонки, а стилизуется через те же CSS-правила из первого раздела. Это самый простой способ получить облако тегов на странице: открываете редактор, добавляете блок, публикуете. Ни плагинов, ни functions.php.

📺 Видео: настройка облака тегов в WordPress

Короткий урок по добавлению и настройке облака тегов прямо из админки WordPress:

⁉️🤔 Частые вопросы

Можно ли вывести облако тегов без правки PHP-файлов?

Да, несколькими способами. Самый простой, встроенный блок «Облако тегов» в редакторе Gutenberg: добавляется за три клика через «+», не требует ни плагинов, ни functions.php. Второй вариант, стандартный виджет «Облако тегов» в разделе «Внешний вид» → «Виджеты», он работает в любой теме с сайдбаром или футер-областью. Оба метода используют ту же функцию wp_tag_cloud() под капотом.

Где размещать вызов wp_tag_cloud(): в functions.php или в файле шаблона?

Непосредственно в файле шаблона: sidebar.php, footer.php и page-tagcloud.php, или любом другом файле, отвечающем за разметку. В functions.php функцию wp_tag_cloud() не вызывают, там определяют логику, а вывод делают в шаблонах. Если нужно кастомизировать поведение функции, используйте фильтр wp_tag_cloud именно в functions.php.

Чем отличаются теги от категорий в облаке?

Категории, иерархическая таксономия, теги, плоская. Визуально разница стирается, но технически вызов разный: для тегов taxonomy => 'post_tag', для категорий taxonomy => 'category'. Функция не меняется: wp_tag_cloud(), достаточно передать нужный ключ.

Как ограничить количество выводимых тегов?

Параметром number в массиве wp_tag_cloud(). Значение 0 показывает все теги, для большинства сайтов разумно 30-50, облако остаётся читаемым и не превращается в бесконечную ленту ссылок.

Можно ли добавить счётчик постов рядом с каждым тегом?

Да, параметр show_count => 1 (доступен с WordPress 4.8) выводит число постов в скобках после названия тега. Например: «wordpress (42)». В блоке Gutenberg эта опция включается переключателем в боковой панели.

Что делать, если стандартный виджет слишком скучный?

У вас два варианта наращивания контроля. Первый, ручной вызов wp_tag_cloud() с кастомными параметрами и собственной CSS-стилизацией, как в разделе 1. Второй, блок Gutenberg с теми же CSS-правилами, если код файлов темы трогать не хочется. Оба подхода дают полную свободу: цвета, отступы, скругления, hover-эффекты, всё в ваших руках.

Ручной метод или блок: что выбрать под вашу задачу?

Если сайт набирает обороты и число тегов перевалило за три десятка, кастомное облако окупает себя. Оно держит посетителя: человек кликает по тегу, попадает на подборку постов по теме и читает ещё одну-две статьи. Глубина просмотра растёт без дополнительных затрат.

Схема простая. Нужно облако прямо сейчас и без возни с кодом, открывайте редактор, вставляйте блок «Облако тегов», публикуйте. Три клика, результат не зависит от темы. Когда захочется отполировать каждую деталь и получить полный контроль над разметкой, копируйте PHP-сниппет из первого раздела, стилизуйте через CSS, и облако становится частью дизайна, а не стандартной заготовкой. Оба подхода работают в любой современной теме и не конфликтуют друг с другом.

Если пост помог разобраться, сохраните в закладки. А в комментариях расскажите, каким способом выводите облако тегов у себя на сайте: виджет, блок или ручной вызов?