Come aggiungere variabili CSS per personalizzare i temi child di WordPress

Le variabili CSS, chiamate anche proprietà personalizzate CSS, consentono un facile riutilizzo nei fogli di stile CSS.

Se hai lavorato con i temi child di WordPress, probabilmente ti ritroverai a fare un sacco di stili e sovrascrivere cose come colore, padding, ecc. CSS. Le variabili CSS sono facoltative e man mano che diventi più avanzato, inizierai a vedere come le variabili ti avvantaggeranno.

Questi non intendono sostituire i preprocessori CSS, il più popolare è SASS. Molti costruttori usano specificamente SASS per progetti più grandi e, insieme alle variabili CSS come elemento centrale, offre molte opzioni avanzate.

Se hai già lavorato con i preprocessori, tuttavia, sai che devono essere compilati per produrre il CSS. Per questo motivo, questo tutorial si concentrerà sulle variabili CSS e non approfondirà i dettagli sui preprocessori.

Le variabili CSS sono un mezzo felice e, fortunatamente, c'è un forte supporto del browser. Prima di impegnarti a utilizzare le variabili CSS in produzione, assicurati di controllare Can I Use per assicurarti che abbiano il supporto di cui hai bisogno.

Le variabili CSS sono più efficienti rispetto a lavorare con semplici CSS ma non richiedono una configurazione avanzata come SASS. Il browser esegue la "compilazione" e non sei dipendente dall'impostazione e dall'ambiente che emette il CSS compilato.

Questo approccio è un buon progetto adatto per cose come lo styling di semplici temi child di WordPress. Per progetti come questo, tende ad essere necessario apportare aggiornamenti stilistici per creare un tema di marca. Le variabili CSS possono aiutare, in quanto forniscono un elenco gestibile di sostituzioni di stile e non richiedono un ambiente speciale per la compilazione di SASS in CSS.

Ottieni temi Genesis Framework e StudioPress gratuitamente!

I clienti di WP Engine ottengono l'accesso a una suite di temi WordPress premium forniti di serie con ogni piano! Puoi iniziare a costruire il tuo prossimo sito per soli $ 20 al mese! Ulteriori informazioni qui.

Come usare le variabili CSS

Quando si utilizzano colori specifici per rimanere fedeli al marchio, un requisito comune è disporre di una tavolozza di colori del marchio che possa essere utilizzata più e più volte. Diventa ridondante digitare ogni volta lo stesso valore di colore. Inoltre, cosa succede se si desidera apportare una modifica a uno dei valori di colore nel set?

Ad esempio, forse un blu deve essere leggermente più scuro. Questo succede sempre. Sì, certo, c'è il fidato trova e sostituisci. La regolazione del valore in un punto, tuttavia, è più efficiente quando si apporta questa modifica globale e poiché le variabili vengono riutilizzate.

Ecco come appare una variabile CSS :

 [css] :root { --text-black: #232525; } header { color: var(--text-black); } [/css]

Mentre sto semplificando il flusso di lavoro per lo styling di un tema figlio di WordPress, ho aggiunto le variabili al mio file styles.css . Questa è solo la "breve lista" e man mano che ne vengono aggiunte altre, diventa importante nominare in modo efficiente ciascuna variabile.

 [css] :root { --white: #ffffff; --black: #232525; --mid-gray: #eeeeee; --brand-red: #e50000; } [/css]

La funzione var()

Come vengono effettivamente utilizzate le variabili? È piuttosto semplice. Innanzitutto, la variabile viene dichiarata e quindi utilizzata nel set di regole CSS necessario.

L'ambito è una cosa importante di cui essere consapevoli. Le variabili devono essere dichiarate all'interno di un selettore CSS che rientri nell'ambito previsto. In molti casi, avrai bisogno che le variabili siano disponibili nell'ambito globale, in questo modo sono accessibili a tutto. È possibile utilizzare il :root o il selettore body per l'ambito globale. Tuttavia, potrebbero esserci casi in cui è necessario limitare l'ambito e si desidera lavorare con una variabile con ambito locale.

È facile individuare le variabili; hanno due trattini prima di loro. I due trattini (–) devono essere inclusi.

La sintassi di var() è piuttosto semplice:

 var(variable-name, value) [css] :root { --light-gray: #eeeeee --text-black: #434344 } .sidebar { --background-color: var(--light-gray); --color: var(--text-black); } [/css]

Invece di regolare il colore in più punti, il valore della variabile viene regolato in un unico punto.

L'ispettore Web (Chrome in questo caso) ti consente di ispezionare e vedere quali variabili vengono utilizzate.

L'esempio seguente definisce innanzitutto le proprietà personalizzate globali denominate --light-gray e --text-black . Viene chiamata la funzione var() , che inserisce il valore delle proprietà personalizzate successivamente nel foglio di stile:

 [css] :root { --light-gray: #eeeeee; --text-black: #434344; } .sidebar { background-color: var(--light-gray); color: var(--text-black); } [/css]

Vale la pena ricordare che le variabili possono essere molto utili quando si lavora con i breakpoint CSS. Utilizzando variabili con ambito globale in diversi punti di interruzione, cose come il padding e altri stili utili possono essere personalizzati per varie dimensioni.

 [css] :root { --gutter: 5px; } section { padding: var(--gutter); } @media (min-width: 600px) { :root { --gutter: 15px; } } [/css]

Di seguito è riportato un esempio di variabili che possono essere trovate nell'ambito locale. Finora abbiamo toccato solo l'ambito globale, quindi noterai che le cose non sono nella radice. Questi sono stili per un messaggio di avviso. C'è un colore del testo di avviso dichiarato qui che è utile solo per questa classe. Inoltre, vale la pena notare che è possibile utilizzare anche calc .

 [css] .warning { --warning-text: #ff0000; --gap: 20; color: var(--warning-text); margin-top: calc(var(--gap) * 1px); } [/css]

Gli esempi sopra coprono le basi delle variabili CSS. Questi concetti possono essere applicati a temi WordPress personalizzati o a qualsiasi altro CSS personalizzato che scrivi. Le variabili hanno vantaggi rispetto al semplice CSS e ti aiuteranno a lavorare in modo più efficiente quando apporti modifiche a livello di sito. Consentono fogli di stile meglio organizzati senza la necessità di un preprocessore.

Alimenta la libertà di creare con WP Engine

WP Engine alimenta la libertà di creare su WordPress. I prodotti dell'azienda, i più veloci tra tutti i fornitori di WordPress, alimentano 1,5 milioni di esperienze digitali. Più dei 200.000 migliori siti al mondo utilizzano WP Engine per potenziare le loro esperienze digitali rispetto a chiunque altro su WordPress. Scopri di più su wpengine.com o parla con un rappresentante oggi stesso!