Tag cloud: quella cosa nella sidebar che molti installano e dimenticano. Meccanicamente, «tanto per averla». È un errore: una cloud ben progettata raccoglie clic di navigazione interna con la stessa efficacia di un menu di navigazione. Soprattutto nei siti con centinaia di articoli, dove la navigazione per categorie non regge più il passo.

Il problema è che il widget standard «Tag Cloud» è poco configurabile. Dimensione del font, al massimo. Colori, nessuno. Forma, un elenco piatto di link imbarazzante da mostrare. Se il tema non ha scritto stili dedicati, il risultato è deprimente.

Per fortuna, WordPress offre due strade: chiamare manualmente wp_tag_cloud() direttamente nei file del tema e il blocco nativo «Tag Cloud» in Gutenberg. La prima dà il controllo completo sul markup, la seconda funziona quando serve qualcosa di rapido e senza codice. Qui sotto le trattiamo entrambe con snippet pronti, screenshot e video.

💡 Panoramica rapida:

• Inserisci wp_tag_cloud() in sidebar.php o footer.php per ottenere una tag cloud ovunque
• Personalizza l'output con i CSS: pulsanti con sfondo, angoli arrotondati ed effetti hover
• Usa il blocco «Tag Cloud» nell'editor Gutenberg (tre clic, zero codice)
• Guarda il video tutorial sulla configurazione direttamente dalla bacheca di WordPress

Output manuale con wp_tag_cloud()

WordPress include la funzione wp_tag_cloud() dalla versione 2.3. Raccoglie tutti i tag del sito, conta la frequenza d'uso e genera una cloud in cui la dimensione del font di ciascun tag è proporzionale al numero di articoli che lo contengono. La chiamata si inserisce direttamente in un file del tema, nel punto in cui la cloud deve apparire.

Snippet base per sidebar.php, footer.php o un template personalizzato:

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

Cosa significano i parametri (elenco completo nella documentazione di WordPress):

smallest e largest: dimensione minima e massima del font. Il default è 8 e 22 punti. Se l'escursione visiva è troppo forte, restringila (per esempio, 10 e 18).

unit: unità di misura. Il default è pt, ma accetta qualsiasi unità CSS: px, em e rem. Per gli schermi, i pixel sono più comuni.

number: quanti tag mostrare. Zero significa «tutti». In pratica, 45-50 sono più che sufficienti; altrimenti la cloud diventa un caos di centinaia di link di dimensioni diverse.

orderby: metodo di ordinamento. name dà l'ordine alfabetico, count mostra prima i più frequenti. Combinare orderby => 'count' con order => 'DESC' mette i tag popolari in cima.

taxonomy: la tassonomia. Il default è post_tag, ma puoi sostituire category o una tassonomia personalizzata di un negozio online per ottenere una cloud di categorie o tag prodotto.

format: formato di output. flat (link separati da spazi), list (elenco puntato) o array (un array per ulteriori elaborazioni PHP).

La funzione può essere posizionata in sicurezza ovunque nel tema. Se ti serve un template di pagina separato con la cloud, crea page-tagcloud.php, aggiungi la chiamata a wp_tag_cloud() tra get_header() e get_footer(), poi assegna questo template a una pagina nella bacheca.

Stilizzare i tag con i CSS

La funzione produce HTML grezzo: tag dentro elementi <a>, racchiusi in <div class="tagcloud">. Senza CSS, è un ammasso di link di dimensioni diverse. Gli stili qui sotto li trasformano in pulsanti ordinati:

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
}

Il CSS è minimale e mirato: inline-block mantiene i pulsanti in linea, margin-bottom compensa le interruzioni di riga e border-radius arrotonda gli angoli. Lo sfondo grigio e il testo sobrio non stridono con nessuna palette aziendale. Al passaggio del mouse, il pulsante si scurisce delicatamente.

Aggiungi questo codice al style.css del tema child o nel campo «CSS aggiuntivo» del personalizzatore («Aspetto» → «Personalizza» → «CSS aggiuntivo»). La seconda opzione è più sicura: gli stili non spariranno al prossimo aggiornamento del tema.

Suggerimento: se la cloud nella sidebar e in un template personalizzato devono avere un aspetto diverso, avvolgi la chiamata in un <div class="custom-tagcloud"> aggiuntivo e imposta gli stili con doppia specificità: .custom-tagcloud .tagcloud a { ... }.

Blocco nativo «Tag Cloud» in Gutenberg

Quando non hai voglia di modificare i file del tema, WordPress offre una soluzione integrata. A partire dalla versione 5.8, l'editor a blocchi include un blocco «Tag Cloud» che può essere inserito in qualsiasi articolo o pagina senza scrivere una sola riga di codice.

Aggiungerlo è la procedura standard: nell'editor, clicca «+», cerca «Tag Cloud» e trascinalo nella posizione desiderata. Il blocco rileva automaticamente tutti i tag del sito, li ordina alfabeticamente e scala la dimensione del font in proporzione alla frequenza d'uso. Il pannello laterale offre queste impostazioni:

• numero di tag (default 45, massimo 100)
• attivazione di un contatore di articoli accanto a ciascun tag
• passaggio tra tag e categorie tramite il menu a tendina della tassonomia

Il blocco funziona in qualsiasi tema moderno, supporta gruppi e colonne e si stilizza con le stesse regole CSS della prima sezione. Questo è il modo più semplice per ottenere una tag cloud su una pagina: apri l'editor, aggiungi il blocco, pubblica. Nessun plugin, nessun functions.php.

📺 Video: configurare una tag cloud in WordPress

Un breve tutorial su come aggiungere e configurare una tag cloud direttamente dalla bacheca di WordPress:

⁉️🤔 Domande frequenti

Posso mostrare una tag cloud senza modificare i file PHP?

Sì, in diversi modi. Il più semplice è il blocco nativo «Tag Cloud» nell'editor Gutenberg: lo aggiungi in tre clic tramite «+», senza bisogno di plugin o functions.php. Un'altra opzione è il widget standard «Tag Cloud» in «Aspetto» → «Widget», che funziona in qualsiasi tema con una sidebar o un'area footer. Entrambi i metodi usano la stessa funzione wp_tag_cloud() sotto il cofano.

Dove devo inserire la chiamata a wp_tag_cloud(): in functions.php o in un file di template?

Direttamente in un file di template: sidebar.php, footer.php, page-tagcloud.php o qualsiasi altro file responsabile del markup. La funzione wp_tag_cloud() non si chiama in functions.php, che è il file dove si definisce la logica; l'output avviene nei template. Se devi personalizzare il comportamento della funzione, usa il filtro wp_tag_cloud in functions.php.

Che differenza c'è tra tag e categorie in una cloud?

Le categorie sono una tassonomia gerarchica, i tag sono piatti. Visivamente la differenza scompare, ma tecnicamente la chiamata cambia: per i tag usa taxonomy => 'post_tag', per le categorie usa taxonomy => 'category'. La funzione resta la stessa: wp_tag_cloud(), le passi solo la chiave appropriata.

Come limito il numero di tag mostrati?

Con il parametro number nell'array di wp_tag_cloud(). Un valore di 0 mostra tutti i tag; per la maggior parte dei siti, 30-50 è un numero ragionevole (la cloud resta leggibile e non diventa un flusso infinito di link).

Posso aggiungere un contatore di articoli accanto a ciascun tag?

Sì, il parametro show_count => 1 (disponibile da WordPress 4.8) mostra il conteggio degli articoli tra parentesi dopo il nome del tag. Per esempio: «wordpress (42)». Nel blocco Gutenberg, questa opzione si attiva con un interruttore nel pannello laterale.

E se il widget standard è troppo noioso?

Hai due opzioni per aumentare il controllo. Primo, chiamare manualmente wp_tag_cloud() con parametri personalizzati e il tuo stile CSS, come nella sezione 1. Secondo, usare il blocco Gutenberg con le stesse regole CSS se non vuoi toccare i file del tema. Entrambi gli approcci danno libertà completa: colori, spaziature, angoli arrotondati, effetti hover (tutto è nelle tue mani).

Metodo manuale o blocco: quale scegliere per il tuo progetto?

Se il tuo sito sta prendendo slancio e il numero di tag ha superato le tre dozzine, una cloud personalizzata ripaga da sola. Tiene i visitatori coinvolti: qualcuno clicca un tag, atterra su una raccolta curata di articoli su quell'argomento e legge uno o due articoli in più. La profondità di pagina cresce senza costi aggiuntivi.

L'approccio è semplice. Se ti serve una cloud subito senza smanettare con il codice, apri l'editor, inserisci il blocco «Tag Cloud» e pubblica. Tre clic, e il risultato non dipende dal tema. Quando vuoi curare ogni dettaglio e ottenere il pieno controllo sul markup, copia lo snippet PHP della prima sezione, stilizzalo con i CSS e la cloud diventa parte del design anziché un segnaposto standard. Entrambi gli approcci funzionano in qualsiasi tema moderno e non entrano in conflitto tra loro.

Se questo articolo ti ha aiutato a chiarirti le idee, salvalo nei preferiti. E nei commenti, raccontaci come mostri la tag cloud sul tuo sito: widget, blocco o chiamata manuale?