Il calendario predefinito di WordPress, il dettaglio che tradisce un tema fatto a metà nei primi tre secondi. Una tabella densa senza spaziatura, sfondo grigio di default, testo compresso nelle celle. Lo sviluppatore del tema ha passato una settimana su font e colori ma si è dimenticato di #wp-calendar.

Venti righe di CSS cambiano tutto. Qui sotto trovi il codice da copiare in qualsiasi progetto, insieme a un'analisi riga per riga così non ti limiti a incollarlo ma capisci cosa fa ogni selettore.

💡 Panoramica rapida:

• CSS pronto all'uso per #wp-calendar, un blocco unico, da copiare per intero
• Dove inserire il codice: Personalizza, plugin per snippet o tema child
• Cosa fare se il CSS non funziona, specificità e come sovrascriverla
• Perché l'ombra nello screenshot riguarda solo l'articolo, non è nel codice reale

Come funziona il widget calendario

Prima di copiare il codice, ecco una rapida occhiata alla struttura. WordPress genera questo markup per il widget:

• .widget_calendar, contenitore del widget nella sidebar
• #wp-calendar, la tabella vera e propria (ogni widget ha il suo id)
• #wp-calendar caption, nome del mese (intestazione della tabella)
• #wp-calendar thead th, nomi abbreviati dei giorni
• #wp-calendar tbody td, celle dei giorni; le date con articoli diventano link
• #wp-calendar tbody .pad, celle vuote prima del primo e dopo l'ultimo giorno
• #wp-calendar tfoot #prev / #next, link al mese precedente e successivo

Queste classi non cambiano da anni e funzionano in tutte le versioni di WordPress dalla 5.0 fino alle release più recenti. Nessuna magia, solo markup standard del core.

Un breve video su come aggiungere e configurare il widget calendario nell'amministrazione:

CSS pronto all'uso: copia e incolla

Aggiungi questo codice agli stili del tuo tema. Il risultato è una tabella chiara con celle grigie, effetto hover bianco e sfondo disabilitato per i giorni vuoti.

1
/* calendar widget — minimalistic styling */
2
.widget_calendar {float: left;}
3
#wp-calendar {width: 100%;}
4
#wp-calendar caption {
5
    text-align: right;
6
    color: #333;
7
    font-size: 12px;
8
    margin-top: 10px;
9
    margin-bottom: 15px;
10
}
11
#wp-calendar thead {font-size: 10px;}
12
#wp-calendar thead th {padding-bottom: 10px;}
13
#wp-calendar tbody {color: #aaa;}
14
#wp-calendar tbody td {
15
    background: #f5f5f5;
16
    border: 1px solid #fff;
17
    text-align: center;
18
    padding: 8px;
19
}
20
#wp-calendar tbody td:hover {background: #fff;}
21
#wp-calendar tbody .pad {background: none;}
22
#wp-calendar tfoot #next {
23
    font-size: 10px;
24
    text-transform: uppercase;
25
    text-align: right;
26
}
27
#wp-calendar tfoot #prev {
28
    font-size: 10px;
29
    text-transform: uppercase;
30
    padding-top: 10px;
31
}

Analisi per gruppi:

Contenitore e larghezza. .widget_calendar {float: left;} previene collisioni di float nelle sidebar strette. #wp-calendar {width: 100%;} forza la tabella a occupare tutta la larghezza del contenitore padre; senza questa regola, il calendario si comporta come un elemento inline e si restringe alla larghezza del contenuto. Approfondisci il CSS in WordPress.

Intestazione del mese. caption è allineato a destra, colore grigio scuro con margini superiore e inferiore. Il mese si legge come didascalia della tabella, non come testo orfano.

Intestazione con i nomi dei giorni. thead e th, font piccolo da 10px e padding inferiore. I nomi abbreviati dei giorni (Lun, Mar, Mer) non attirano l'attenzione su di sé.

Celle dei giorni. Colore del testo principale #aaa, grigio tenue. Ogni cella riceve uno sfondo #f5f5f5 e un bordo bianco che separa visivamente i giorni. padding: 8px dà respiro attorno ai numeri. Al passaggio del mouse, la cella diventa bianca, un hover semplice e pulito senza animazioni.

Celle vuote. .pad rimuove il riempimento di sfondo così che i "buchi" all'inizio e alla fine del mese non sembrino giorni attivi.

Navigazione tra i mesi. tfoot #prev e #next, link ai mesi adiacenti. Entrambi in font minuscolo maiuscolo; #prev a sinistra, #next a destra.

Nota: l'ombra attorno al calendario nello screenshot qui sotto serve solo come illustrazione per l'articolo. Non è presente nel codice reale.

Tre modi per aggiungere CSS al tuo sito

Dal più semplice al più corretto.

Metodo 1: Personalizza. Vai su Aspetto → Personalizza → CSS aggiuntivo e incolla il codice. Pro: anteprima immediata, non devi toccare file. Contro: gli stili sono legati al tema, si perdono se cambi tema.

Metodo 2: Plugin per snippet. Installa il plugin gratuito Code Snippets o WPCode e aggiungi il codice come snippet CSS attivato su tutto il sito. Pro: gli stili vivono indipendentemente dal tema. Contro: un plugin in più nell'amministrazione.

Metodo 3: Tema child. Crea style.css in un tema child e incolla lì il codice. Questa è la strada giusta per progetti in produzione: gli stili sopravvivono agli aggiornamenti del tema padre e possono stare sotto controllo di versione. Se non hai ancora un tema child, la guida di WordPress.org ti accompagna passo passo in dieci minuti.

Risultato

Dopo aver aggiunto il CSS, il widget appare così:

I giorni sono centrati, le celle sono separate da bordi bianchi, al passaggio del mouse lo sfondo diventa bianco. Le celle vuote non distraggono, non hanno lo sfondo grigio. Il nome del mese si legge come una didascalia ordinata.

Cosa fare se il CSS non funziona

Se il widget non è cambiato dopo aver incollato il codice, il tuo tema contiene già stili per #wp-calendar con priorità più alta. Apri l'ispettore del browser (F12), trova l'elemento #wp-calendar tbody td e verifica quali regole stanno sovrascrivendo background e padding.

Per sovrascrivere gli stili incorporati del tema, aggiungi l'ID della sidebar ai selettori o avvolgi il codice in un contesto più specifico, ad esempio #sidebar .widget_calendar #wp-calendar tbody td. Questo alza la specificità senza usare !important.

Widget o blocco: cosa usare

Con il rilascio di Gutenberg, il core ha introdotto il blocco "Calendario", un sostituto moderno del widget classico. Genera la stessa tabella #wp-calendar e viene stilizzato con lo stesso CSS. La differenza sta nel posizionamento:

• Widget classico, tramite Aspetto → Widget, funziona solo nelle sidebar e nelle aree widget del tema.
• Blocco "Calendario", inseribile in qualsiasi pagina o articolo tramite l'editor a blocchi, oltre che nelle aree widget tramite Aspetto → Widget (da WordPress 5.8, anche lì sono disponibili i blocchi).

Il CSS di questo articolo funziona con entrambe le opzioni senza modifiche. Scegli il blocco se ti serve il calendario nel corpo della pagina; il widget classico se sta solo nella sidebar e non vuoi cambiare il tuo flusso di lavoro abituale.

⁉️🤔 Domande frequenti

Perché il mio calendario non risponde al CSS dell'articolo?

Molto probabilmente, il tuo tema contiene già stili per #wp-calendar con priorità più alta. Apri l'ispettore (F12 nel browser), clicca su una cella del calendario e guarda quale regola sta sovrascrivendo il tuo background. Soluzione: anteponi l'ID del contenitore della sidebar al selettore, ad esempio #secondary .widget_calendar #wp-calendar tbody td. Questo alza la specificità senza usare !important.

È necessario creare un tema child per 20 righe di CSS?

Per un widget solo, no. Inizia con i CSS aggiuntivi nel Personalizza (Aspetto → Personalizza). Quando avrai accumulato abbastanza regole personalizzate per una personalizzazione completa, allora crea un tema child. La soglia del "è ora" è indicativamente 50 righe di CSS o la prima modifica a functions.php.

Questo CSS funziona con il blocco "Calendario" in Gutenberg?

Sì, perfettamente. Il blocco "Calendario" genera la stessa tabella #wp-calendar con le stesse classi. Il codice funziona senza modifiche.

Posso cambiare la combinazione di colori?

Facilmente. Sostituisci #f5f5f5 (sfondo celle) e #fff (hover e bordo) con i colori del tuo tema. Per uno schema scuro, prova background: #2c2c2c; color: #ccc; per tbody td e background: #1a1a1a; per l'hover. La cosa principale è mantenere il contrasto tra sfondo della cella e testo.

Il widget calendario serve ancora nel 2026?

Per siti di notizie e blog attivi, sì. Il calendario offre ai lettori una navigazione tra i vecchi contenuti senza dover cercare per categorie. Per siti vetrina e landing page è inutile. Ma se il tuo tema è in vendita su un marketplace, un widget stilizzato è obbligatorio: l'acquirente non deve vedere una tabella nuda, anche se non usa il calendario stesso.

Calendario di WordPress: sistemalo in cinque minuti o lascia perdere

Il calendario è una piccola cosa che tradisce completamente un tema non rifinito. Si sistema copiando e incollando venti righe di CSS.

• Se fai un tema per te, copia il codice nei CSS aggiuntivi del Personalizza e dimenticatene.
• Se scrivi un tema per la vendita, includi gli stili nel style.css del tema child, è igiene di base.
• Se non ti serve affatto il calendario, stilizzalo comunque. Un acquirente del tema potrebbe attivare il widget, e non deve apparire rotto.

Controlla subito come si presenta il tuo calendario: aggiungi il widget alla sidebar tramite Aspetto → Widget e apri il sito. Tabella nuda? Il codice è qui sopra, prendilo e sistemalo in cinque minuti.