Le variabili CSS colori WordPress permettono di centralizzare la palette del sito e modificare più elementi cambiando pochi valori. Puoi definire colori globali per testo, sfondo, titoli, link e pulsanti, poi richiamarli nei selettori del tema con la funzione var(). Il metodo è adatto sia ai temi classici sia ai temi a blocchi, anche se i percorsi cambiano. Per evitare modifiche perse dopo un aggiornamento, il CSS va inserito nell’area “CSS aggiuntivo” o in un tema child, non nei file del tema principale.

Perché usare variabili CSS globali in WordPress

Una variabile CSS è un valore riutilizzabile associato a un nome personalizzato. Nel caso dei colori, puoi definire una sola volta il blu principale del sito e applicarlo a link, pulsanti, bordi e intestazioni. Quando la palette cambia, è sufficiente sostituire il valore nella dichiarazione globale.

Le variabili CSS colori WordPress migliorano la coerenza visiva perché impediscono di distribuire decine di codici esadecimali diversi nei fogli di stile. Una struttura essenziale può essere questa:

:root {
--colore-primario: #1769aa;
--colore-secondario: #f4b400;
--colore-testo: #202124;
--colore-sfondo: #ffffff;
--colore-superficie: #f5f7fa;
}

body {
color: var(--colore-testo);
background-color: var(--colore-sfondo);
}

a {
color: var(--colore-primario);
}

.wp-element-button,
button,
input[type="submit"] {
background-color: var(--colore-primario);
color: #ffffff;
}

Il selettore :root rende disponibili le variabili all’intero documento HTML. La funzione var(--colore-primario) richiama il valore definito in precedenza e può includere anche un valore di riserva, come var(--colore-primario, #1769aa), utile se la variabile non viene caricata.

Come inserire le variabili CSS nel personalizzatore di WordPress

Il percorso più rapido per provare una palette è la sezione “CSS aggiuntivo” di WordPress. Il nome del menu può cambiare in base al tema e alla versione installata.

Passo 1: aprire l’area CSS aggiuntivo

Nel pannello di amministrazione di WordPress apri Aspetto > Personalizza, quindi seleziona CSS aggiuntivo. Nei temi a blocchi recenti, il menu “Personalizza” può non essere disponibile: in questo caso apri Aspetto > Editor, entra in Stili e verifica se il tema mette a disposizione un campo per il CSS personalizzato.

Passo 2: definire la palette globale

Inserisci nel campo CSS un blocco :root con i colori usati dal progetto. È preferibile usare nomi descrittivi legati al ruolo del colore, come --colore-primario o --colore-sfondo, invece di nomi legati alla tonalità, come --blu.

:root {
--colore-primario: #155eef;
--colore-primario-hover: #0e4bb5;
--colore-testo: #1f2937;
--colore-testo-secondario: #667085;
--colore-sfondo: #ffffff;
--colore-superficie: #f2f4f7;
--colore-bordo: #d0d5dd;
}

Passo 3: collegare le variabili agli elementi del tema

Dopo la definizione, associa le variabili ai selettori realmente presenti nel sito. Le classi cambiano tra temi, quindi è necessario controllare il codice HTML con gli strumenti per sviluppatori del browser.

body {
color: var(--colore-testo);
background-color: var(--colore-sfondo);
}

.site-header,
.wp-site-blocks {
background-color: var(--colore-sfondo);
}

a {
color: var(--colore-primario);
}

a:hover,
a:focus {
color: var(--colore-primario-hover);
}

.wp-element-button,
.wp-block-button__link {
background-color: var(--colore-primario);
border-color: var(--colore-primario);
color: #ffffff;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
background-color: var(--colore-primario-hover);
}

.card,
.wp-block-group.is-style-card {
background-color: var(--colore-superficie);
border: 1px solid var(--colore-bordo);
}

Fai clic su “Pubblica” o “Salva” dopo aver verificato l’anteprima. Se il colore non cambia, una regola del tema potrebbe avere maggiore specificità oppure essere applicata dopo il CSS personalizzato; in questi casi correggi il selettore prima di usare !important.

Come usare un tema child per una soluzione stabile

Il tema child è la scelta più adatta quando le variabili CSS colori WordPress devono restare parte della configurazione tecnica del sito. Il foglio di stile del tema principale non va modificato direttamente, perché un aggiornamento può sovrascrivere le modifiche personalizzate.

Passo 1: creare o attivare il tema child

Crea un tema child nella cartella wp-content/themes/ e attivalo da Aspetto > Temi. Se il tema child esiste già, usa il suo file style.css oppure il foglio di stile caricato dal tema.

Passo 2: aggiungere le variabili nel file CSS

Inserisci le variabili all’inizio del foglio di stile del tema child. Il blocco :root deve contenere i colori condivisi da tutto il sito.

:root {
--colore-primario: #155eef;
--colore-primario-hover: #0e4bb5;
--colore-testo: #1f2937;
--colore-sfondo: #ffffff;
--colore-superficie: #f2f4f7;
}

Passo 3: applicare i valori ai componenti

Collega le variabili ai selettori del tema, dei blocchi Gutenberg e degli eventuali plugin. Non dare per scontato che .button sia la classe dei pulsanti: WordPress e i temi possono usare .wp-element-button, .wp-block-button__link o classi personalizzate.

body {
color: var(--colore-testo);
background: var(--colore-sfondo);
}

h1,
h2,
h3 {
color: var(--colore-testo);
}

.wp-block-button__link {
background: var(--colore-primario);
color: #ffffff;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
background: var(--colore-primario-hover);
}

Dopo il salvataggio, svuota l’eventuale cache di WordPress, del plugin di ottimizzazione o della rete di distribuzione dei contenuti. Controlla anche la versione mobile, perché alcune regole responsive possono sovrascrivere i colori o gli sfondi.

Come collegare le variabili alla palette di un tema a blocchi

I temi a blocchi gestiscono colori e stili globali attraverso l’Editor del sito e il file theme.json. Da Aspetto > Editor > Stili > Colori, puoi impostare la palette senza scrivere CSS; WordPress genera variabili con nomi come --wp--preset--color--primary, quando il tema espone quella configurazione.

Un tema che definisce una palette in theme.json può usare una struttura simile:

{
"version": 2,
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#155eef",
"name": "Primario"
},
{
"slug": "surface",
"color": "#f2f4f7",
"name": "Superficie"
}
]
}
}
}

Dopo la registrazione della palette, il CSS può richiamare le variabili generate da WordPress:

.wp-element-button {
background-color: var(--wp--preset--color--primary);
}

.wp-block-group.is-style-card {
background-color: var(--wp--preset--color--surface);
}

Il nome effettivo della variabile dipende dallo slug configurato in theme.json. Se lo slug è brand-blue, il riferimento sarà --wp--preset--color--brand-blue, non un nome scelto arbitrariamente nel CSS.

L’Editor del sito può applicare stili inline o regole con selettori più specifici rispetto al foglio child. Per ottenere un risultato prevedibile, imposta prima la palette e gli stili globali in Aspetto > Editor > Stili, poi usa CSS personalizzato solo per componenti che il tema non gestisce.

Come verificare contrasto e compatibilità dei colori

Un cambio globale della palette può influenzare leggibilità, pulsanti, moduli, menu e contenuti incorporati. Verifica il testo normale, i titoli, i collegamenti su sfondo chiaro e scuro, lo stato hover e lo stato focus della tastiera.

Mantieni un contrasto sufficiente tra testo e sfondo.
Non usare il colore come unico modo per comunicare un errore o uno stato.
Controlla i pulsanti disabilitati e i campi dei moduli.
Testa il sito con tema chiaro, modalità scura e viewport mobile se il tema le supporta.
Verifica che i colori definiti dal plugin non vengano sostituiti accidentalmente.

Per evitare errori, conserva i valori in un’unica sezione :root e assegna alle variabili un significato funzionale. In questo modo --colore-primario può cambiare da blu a verde senza modificare ogni singolo componente del sito.

Le variabili CSS colori WordPress rendono la palette più ordinata, modificabile e coerente tra pagine, blocchi e componenti del tema.

Potrebbe interessarti anche:

Quanto si risparmia all'anno con un'auto a GPL? In quanto tempo ammortizzo la spesa dell'impianto GPL?

FAQ

Sì. Puoi inserirle in Aspetto > Personalizza > CSS aggiuntivo, se il tema mostra questa voce. Il tema child resta preferibile per modifiche strutturali e configurazioni da mantenere nel tempo.

Il tema potrebbe usare un selettore più specifico, uno stile inline o una regola caricata dopo il tuo CSS. Controlla l’elemento con gli strumenti per sviluppatori e individua la regola che sovrascrive var().

Le variabili definite in :root sono personalizzate e indipendenti dal tema. Le variabili --wp--preset--color--... vengono normalmente generate da WordPress a partire dalla palette configurata nel tema o in theme.json.

Il CSS aggiuntivo può comportarsi diversamente tra front-end ed editor, in base al tema e alla versione di WordPress. Verifica sempre sia l’anteprima nell’Editor sia le pagine pubblicate.

No, non come prima scelta. È meglio aumentare la precisione del selettore o correggere l’ordine di caricamento; !important va riservato ai casi in cui una regola del tema o di un plugin non può essere sovrascritta diversamente.

Altri articoli di questa serie: