Chmura tagów, ten element w sidebarze, który wielu dodaje i zapomina. Mechanicznie, „żeby był". A szkoda: dobrze zaprojektowana chmura zbiera wewnętrzne przejścia nie gorzej niż menu nawigacyjne. Szczególnie na stronach z setkami wpisów, gdzie sam podział na kategorie już nie wystarcza.

Problem w tym, że standardowy widżet „Chmura tagów" prawie nie daje się skonfigurować. Rozmiar czcionki, maksymalnie. Kolory, żadnych. Forma, płaska lista linków, którą wstyd pokazywać. Jeśli motyw nie przewidział dla niego stylów, rezultat jest przygnębiający.

Na szczęście WordPress daje dwie ścieżki: ręczne wywołanie wp_tag_cloud() bezpośrednio w plikach motywu oraz natywny blok „Chmura tagów" w Gutenbergu. Pierwsza, dla pełnej kontroli nad znacznikami, druga, gdy potrzebuje Pan/Pani szybkiego rozwiązania bez kodu. Obie omawiamy poniżej, z gotowymi fragmentami kodu, zrzutami ekranu i wideo.

💡 Szybki przegląd:

• Wstawić wp_tag_cloud() w sidebar.php lub footer.php, aby uzyskać chmurę tagów w dowolnym miejscu
• Ostylizować wynik przez CSS: przyciski z tłem, zaokrągleniem i efektem hover
• Skorzystać z bloku „Chmura tagów" w edytorze Gutenberg, trzy kliknięcia, zero kodu
• Obejrzeć samouczek wideo z konfiguracją prosto z panelu administracyjnego WordPress

Ręczne wyświetlanie przez wp_tag_cloud()

WordPress od wersji 2.3 zawiera funkcję wp_tag_cloud(). Zbiera ona wszystkie tagi witryny, oblicza częstotliwość użycia i tworzy chmurę, gdzie rozmiar czcionki każdego taga jest proporcjonalny do liczby wpisów z nim związanych. Wywołanie wstawia się bezpośrednio w pliku motywu, tam, gdzie chmura ma się pojawić.

Podstawowy fragment kodu dla sidebar.php, footer.php lub szablonu niestandardowego:

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
) );

Co oznaczają parametry (pełna lista w dokumentacji WordPress):

smallest i largest, minimalny i maksymalny rozmiar czcionki. Domyślnie 8 i 22 punkty. Jeśli rozrzut razi w oczy, proszę zawęzić widełki: na przykład 10 i 18.

unit, jednostka miary. Domyślnie pt, akceptuje dowolne jednostki CSS: px, em i rem. Dla ekranu częściej stosuje się piksele.

number, ile tagów pokazać. Zero oznacza „wszystkie". W praktyce 45-50 wystarcza z zapasem, w przeciwnym razie chmura zamienia się w chaos setek linków o różnych rozmiarach.

orderby, sortowanie: name daje kolejność alfabetyczną, count wyświetla najczęściej używane jako pierwsze. Połączenie orderby => 'count' z order => 'DESC' umieszcza popularne tagi na pierwszych pozycjach.

taxonomy, taksonomia. Domyślnie post_tag, ale można podstawić category lub niestandardową taksonomię sklepu internetowego i uzyskać chmurę kategorii lub etykiet produktów.

format, format wyjściowy: flat (linki oddzielone spacją), list (lista punktowana) lub array (tablica do dalszego przetwarzania w PHP).

Funkcję można bezpiecznie umieszczać w dowolnym miejscu motywu. Jeśli potrzebny jest osobny szablon strony z chmurą, proszę utworzyć page-tagcloud.php, dodać wywołanie wp_tag_cloud() między get_header() a get_footer(), a w panelu administracyjnym przypisać stronie ten szablon.

Stylizacja tagów przez CSS

Wywołanie funkcji zwraca surowy HTML: tagi wewnątrz <a>, opakowane w <div class="tagcloud">. Bez CSS, zbieranina linków o różnych rozmiarach. Poniższe style przekształcają je w schludne przyciski:

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 jest minimalny i celowy: inline-block utrzymuje przyciski w linii, margin-bottom kompensuje zawijanie, border-radius zaokrągla rogi. Szare tło i stonowany tekst nie kolidują z żadną paletą marki. Po najechaniu przycisk delikatnie ciemnieje.

Kod wstawia się do style.css motywu potomnego lub w polu „Dodatkowy CSS" w kreatorze („Wygląd" → „Dostosuj" → „Dodatkowy CSS"). Druga opcja jest bezpieczniejsza: style nie znikną przy następnej aktualizacji motywu.

Wskazówka: jeśli chmura w sidebarze i w szablonie niestandardowym ma wyglądać inaczej, proszę opakować wywołanie w dodatkowy <div class="custom-tagcloud"> i zdefiniować style z podwójną specyficznością: .custom-tagcloud .tagcloud a { ... }.

Wbudowany blok „Chmura tagów" w Gutenbergu

Gdy nie ma Pan/Pani ochoty edytować plików motywu, WordPress oferuje wbudowane rozwiązanie. Od wersji 5.8 edytor bloków zawiera blok „Chmura tagów", który wstawia się do dowolnego wpisu lub strony bez ani jednej linii kodu.

Dodaje się go standardowo: w edytorze proszę kliknąć „+", znaleźć „Chmura tagów" i przeciągnąć w wybrane miejsce. Blok automatycznie pobiera wszystkie tagi witryny, sortuje alfabetycznie i skaluje rozmiar czcionki proporcjonalnie do częstotliwości użycia. W panelu bocznym dostępne są ustawienia:

• liczba tagów (domyślnie 45, maksymalnie 100)
• włączenie licznika wpisów obok każdego taga
• przełączanie między tagami a kategoriami za pomocą listy rozwijanej taksonomii

Blok działa w każdym nowoczesnym motywie, obsługuje grupy i kolumny, a stylizuje się go za pomocą tych samych reguł CSS z pierwszej sekcji. To najprostszy sposób na uzyskanie chmury tagów na stronie: otwiera Pan/Pani edytor, dodaje blok, publikuje. Żadnych wtyczek, żadnego functions.php.

📺 Wideo: konfiguracja chmury tagów w WordPress

Krótka lekcja z dodawania i konfigurowania chmury tagów prosto z panelu administracyjnego WordPress:

⁉️🤔 Często zadawane pytania

Czy można wyświetlić chmurę tagów bez edycji plików PHP?

Tak, na kilka sposobów. Najprostszy, wbudowany blok „Chmura tagów" w edytorze Gutenberg: dodaje się go w trzech kliknięciach przez „+", nie wymaga ani wtyczek, ani functions.php. Druga opcja, standardowy widżet „Chmura tagów" w sekcji „Wygląd" → „Widżety", działa w każdym motywie z sidebarem lub obszarem stopki. Obie metody wykorzystują tę samą funkcję wp_tag_cloud() pod spodem.

Gdzie umieszczać wywołanie wp_tag_cloud(): w functions.php czy w pliku szablonu?

Bezpośrednio w pliku szablonu: sidebar.php, footer.php i page-tagcloud.php lub dowolnym innym pliku odpowiedzialnym za znaczniki. W functions.php funkcji wp_tag_cloud() się nie wywołuje, tam definiuje się logikę, a wyświetlanie odbywa się w szablonach. Jeśli trzeba dostosować zachowanie funkcji, proszę użyć filtra wp_tag_cloud właśnie w functions.php.

Czym różnią się tagi od kategorii w chmurze?

Kategorie, to taksonomia hierarchiczna, tagi, płaska. Wizualnie różnica się zaciera, ale technicznie wywołanie jest inne: dla tagów taxonomy => 'post_tag', dla kategorii taxonomy => 'category'. Funkcja się nie zmienia: wp_tag_cloud(), wystarczy przekazać odpowiedni klucz.

Jak ograniczyć liczbę wyświetlanych tagów?

Parametrem number w tablicy wp_tag_cloud(). Wartość 0 pokazuje wszystkie tagi, dla większości witryn rozsądnie jest 30-50, chmura pozostaje czytelna i nie zamienia się w nieskończoną listę linków.

Czy można dodać licznik wpisów obok każdego taga?

Tak, parametr show_count => 1 (dostępny od WordPress 4.8) wyświetla liczbę wpisów w nawiasach po nazwie taga. Na przykład: „wordpress (42)". W bloku Gutenberg ta opcja włącza się przełącznikiem w panelu bocznym.

Co zrobić, jeśli standardowy widżet jest zbyt nudny?

Ma Pan/Pani dwie opcje zwiększenia kontroli. Pierwsza, ręczne wywołanie wp_tag_cloud() z niestandardowymi parametrami i własną stylizacją CSS, jak w sekcji 1. Druga, blok Gutenberg z tymi samymi regułami CSS, jeśli nie chce Pan/Pani dotykać kodu plików motywu. Oba podejścia dają pełną swobodę: kolory, odstępy, zaokrąglenia, efekty hover, wszystko w Pana/Pani rękach.

Metoda ręczna czy blok: co wybrać do swojego zadania?

Jeśli witryna nabiera rozpędu, a liczba tagów przekroczyła trzy tuziny, niestandardowa chmura się opłaca. Zatrzymuje odwiedzającego: osoba klika tag, trafia na zbiór wpisów tematycznych i czyta jeszcze jeden lub dwa artykuły. Głębokość przeglądania rośnie bez dodatkowych kosztów.

Schemat jest prosty. Potrzebuje Pan/Pani chmury od ręki i bez kodu, proszę otworzyć edytor, wstawić blok „Chmura tagów", opublikować. Trzy kliknięcia, wynik nie zależy od motywu. Gdy zechce Pan/Pani dopracować każdy szczegół i uzyskać pełną kontrolę nad znacznikami, proszę skopiować fragment PHP z pierwszej sekcji, ostylizować przez CSS, a chmura staje się częścią projektu, a nie standardowym szablonem. Oba podejścia działają w każdym nowoczesnym motywie i nie kolidują ze sobą.

Jeśli wpis pomógł zrozumieć temat, proszę zapisać go w zakładkach. A w komentarzach proszę opowiedzieć, w jaki sposób wyświetla Pan/Pani chmurę tagów na swojej stronie: widżet, blok czy ręczne wywołanie?