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

Проблема в тому, що стандартний віджет «Хмара тегів» майже не налаштовується. Розмір шрифту, максимум. Кольори, жодних. Форма, плаский список посилань, який соромно показувати. Якщо тема не прописала для нього стилі, результат гнітючий.

На щастя, 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, і хмара стає частиною дизайну, а не стандартною заготовкою. Обидва підходи працюють у будь-якій сучасній темі та не конфліктують один з одним.

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