CSS WordPress: come modificare l’aspetto di un sito
WordPress permette di costruire un sito senza scrivere necessariamente codice. Temi, blocchi e page builder mettono già a disposizione numerosi controlli per colori, caratteri, dimensioni e spaziature. Prima o poi, però, può capitare di voler modificare un dettaglio che non compare nelle impostazioni grafiche.
Può servire aumentare lo spazio sopra un titolo, cambiare il colore di un collegamento, arrotondare gli angoli di un riquadro, nascondere un elemento soltanto su una determinata pagina oppure modificare il comportamento di un pulsante quando passa sopra il puntatore del mouse.
In questi casi entra in gioco il CSS.
Conoscere almeno le basi di questo linguaggio permette di intervenire sull’aspetto di WordPress in modo molto più preciso. Non occorre imparare subito centinaia di proprietà. Per le personalizzazioni più comuni bastano pochi concetti: selettori, proprietà, valori, spaziature, cascata e strumenti di sviluppo del browser.
Che cos’è il CSS
CSS significa Cascading Style Sheets, cioè Fogli di Stile a Cascata. È il linguaggio utilizzato dal browser per stabilire come devono essere rappresentati graficamente gli elementi di una pagina web.
HTML e CSS svolgono quindi due compiti differenti. L’HTML descrive la struttura del documento: indica quali elementi sono titoli, paragrafi, immagini, collegamenti, liste, pulsanti e così via. Il CSS stabilisce invece come questi elementi devono apparire sullo schermo.
Una regola CSS può stabilire, per esempio, che tutti i titoli di secondo livello debbano avere una dimensione di 32 pixel:
h2 {
font-size: 32px;
}Il browser legge questa regola e applica la dimensione indicata agli elementi che corrispondono al selettore h2.
WordPress utilizza lo stesso meccanismo. Il tema, il sistema dei blocchi e alcuni plugin producono HTML e aggiungono gli stili necessari per mostrarlo. Il CSS personalizzato consente di intervenire su questo risultato senza dover ricostruire la pagina da zero.
Come è fatta una regola CSS
La struttura di base del CSS è piuttosto regolare. Una dichiarazione completa potrebbe essere questa:
.titolo-articolo {
color: #303030;
font-size: 38px;
}.titolo-articolo è il selettore. Serve per indicare a quali elementi devono essere applicate le istruzioni.
color e font-size sono le proprietà. Specificano quali caratteristiche grafiche devono essere modificate.
#303030 e 38px sono invece i valori assegnati alle proprietà.
Le dichiarazioni vengono racchiuse tra parentesi graffe. Il punto e virgola separa una proprietà dalla successiva. Anche se l’ultima dichiarazione può funzionare senza punto e virgola, mantenerlo rende il codice più ordinato e riduce il rischio di errori quando si aggiungono nuove proprietà.
I selettori CSS più utili in WordPress
Per modificare correttamente una pagina bisogna prima identificare l’elemento interessato. Il selettore svolge proprio questa funzione.
Il sistema più semplice consiste nel selezionare direttamente un elemento HTML:
p {
line-height: 1.7;
}Questa regola può interessare tutti i paragrafi della pagina.
Molto più spesso in WordPress si utilizzano le classi. Una classe CSS viene identificata con un punto:
.entry-title {
margin-bottom: 24px;
}Una stessa classe può comparire in più punti del sito. Per questo rappresenta uno dei sistemi più utilizzati dai temi e dai plugin per assegnare uno stile.
Gli ID vengono invece identificati con il simbolo #:
#site-header {
border-bottom: 1px solid #dddddd;
}Un ID dovrebbe essere utilizzato per identificare un elemento specifico del documento.
I selettori possono anche essere combinati. Per esempio:
.entry-content p {
color: #404040;
}La regola non interessa genericamente tutti i paragrafi, ma soltanto quelli che si trovano all’interno di un elemento con classe entry-content.
Quali proprietà CSS conviene imparare per prime
Il CSS dispone di moltissime proprietà, ma le personalizzazioni iniziali richiedono generalmente un insieme piuttosto ristretto.
color modifica il colore del testo:
.testo-evidenziato {
color: #b3261e;
}background-color modifica invece il colore dello sfondo:
.box-informativo {
background-color: #f3f5f7;
}Per intervenire sulla tipografia si incontrano spesso font-size, font-weight, line-height e text-align.
.introduzione {
font-size: 20px;
font-weight: 400;
line-height: 1.6;
}Per i bordi si possono utilizzare proprietà come border e border-radius:
.scheda {
border: 1px solid #d9d9d9;
border-radius: 10px;
}Con poche proprietà di questo tipo si riesce già a intervenire su buona parte delle modifiche grafiche quotidiane.
Il Box Model: capire gli spazi prima di modificarli
Uno degli argomenti più importanti per chi comincia a utilizzare il CSS è il Box Model. Il browser considera infatti praticamente ogni elemento della pagina come una scatola rettangolare.
Al centro si trova il contenuto. Intorno al contenuto può esserci il padding, seguito dal bordo e infine dal margin.
Il padding controlla quindi lo spazio interno. Se un testo appare troppo vicino al bordo di un riquadro, generalmente bisogna aumentare il padding.
.avviso {
padding: 20px;
}Il margin gestisce invece la distanza esterna rispetto agli altri elementi:
.avviso {
margin-bottom: 30px;
}Le due proprietà possono essere utilizzate insieme:
.avviso {
padding: 20px;
margin: 30px 0;
border: 1px solid #cccccc;
}In questo esempio il contenuto mantiene uno spazio interno di 20 pixel, mentre il blocco viene separato verticalmente dagli elementi vicini tramite un margine di 30 pixel.
Perché box-sizing può evitare calcoli inattesi
Quando si assegnano una larghezza, un padding e un bordo allo stesso elemento, le dimensioni finali possono sembrare inizialmente poco intuitive.
La proprietà box-sizing permette di stabilire come debbano essere calcolate.
.scheda {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 2px solid #cccccc;
}Con border-box, padding e bordo vengono conteggiati all’interno della larghezza dichiarata. È un comportamento molto utilizzato nei layout moderni perché rende più semplice controllare le dimensioni effettive degli elementi.
Pixel, rem e percentuali: scegliere l’unità di misura
Nel CSS una dimensione non deve essere necessariamente espressa in pixel. Si incontrano frequentemente anche unità relative come rem, em, percentuali e unità legate alla finestra del browser.
I pixel sono semplici da comprendere:
.titolo {
font-size: 32px;
}Le unità rem sono invece relative alla dimensione del carattere impostata sull’elemento radice del documento. Possono essere utili per costruire una tipografia più flessibile:
.titolo {
font-size: 2rem;
}Le percentuali risultano comode soprattutto quando una dimensione deve dipendere dallo spazio disponibile:
.immagine-articolo {
width: 100%;
}Non esiste un’unità corretta per ogni situazione. La scelta dipende dalla proprietà utilizzata e dal comportamento che si vuole ottenere.
Dove inserire il CSS personalizzato in WordPress
Il metodo disponibile dipende principalmente dal tema utilizzato. WordPress distingue infatti tra temi che sfruttano l’Editor del sito e temi classici.
Con un tema compatibile con l’Editor del sito si può accedere alla gestione degli stili dall’area Aspetto > Editor > Stili. All’interno delle opzioni di Stili è disponibile anche l’area dedicata al CSS aggiuntivo.
Con molti temi classici si trova invece il percorso Aspetto > Personalizza > CSS aggiuntivo.
Queste aree permettono di aggiungere regole personali senza modificare direttamente i file originali del tema. È generalmente preferibile partire da qui quando bisogna effettuare poche personalizzazioni.
Le voci disponibili possono comunque cambiare in base al tema, alla versione di WordPress, al tipo di installazione e agli strumenti eventualmente aggiunti dal tema stesso.
Prima di scrivere CSS conviene controllare gli Stili di WordPress
Nei temi a blocchi molte operazioni che in passato richiedevano CSS possono essere svolte direttamente dall’Editor del sito.
Colori, tipografia, spaziatura e aspetto di diversi blocchi possono essere controllati dall’interfaccia Stili. Prima di aggiungere una nuova regola conviene quindi verificare se WordPress mette già a disposizione l’impostazione richiesta.
Il CSS rimane utile quando il controllo grafico non è presente, quando bisogna definire un comportamento più preciso oppure quando si vuole utilizzare una proprietà non esposta dall’interfaccia.
CSS per un determinato tipo di blocco
Con i temi compatibili con l’Editor del sito è possibile personalizzare anche uno specifico tipo di blocco a livello globale.
Si può, per esempio, intervenire sull’aspetto di tutti i blocchi Citazione o di tutti i Pulsanti senza dover costruire manualmente un selettore per ciascuna istanza.
Questo sistema è diverso dall’assegnazione di una classe CSS a un singolo blocco. Nel primo caso si modifica il comportamento generale di un tipo di blocco. Nel secondo si crea invece una personalizzazione mirata per uno o più elementi scelti manualmente.
Come assegnare una classe CSS a un singolo blocco
L’Editor a blocchi permette di assegnare una classe personalizzata a molti elementi. Nelle impostazioni avanzate del blocco si può utilizzare il campo dedicato alle classi CSS aggiuntive.
Si potrebbe, per esempio, inserire:
box-promozione
Nel campo dell’editor il nome viene scritto senza punto. Nel foglio CSS, invece, la stessa classe viene richiamata con il punto iniziale:
.box-promozione {
padding: 24px;
background-color: #f7f7f7;
border-left: 4px solid #333333;
}In questo modo la regola non deve essere applicata indistintamente a tutti i blocchi dello stesso tipo.
Cascata, ereditarietà e specificità
Il nome stesso del CSS richiama il concetto di cascata. Quando più dichiarazioni possono modificare la stessa proprietà, il browser deve stabilire quale utilizzare.
Non è sufficiente dire che vince sempre la regola scritta per ultima. La decisione dipende da diversi fattori, tra cui origine delle dichiarazioni, importanza, specificità del selettore e ordine delle regole quando gli altri criteri hanno la stessa priorità.
Si considerino queste due regole:
p {
color: red;
}
.entry-content p {
color: black;
}Il secondo selettore è più specifico perché non indica genericamente un paragrafo, ma un paragrafo contenuto in un elemento con classe entry-content.
Per sovrascriverlo può quindi essere necessario utilizzare un selettore adeguato:
.entry-content p {
color: #2457a6;
}Esiste inoltre l’ereditarietà. Alcune proprietà assegnate a un elemento possono essere ereditate dai suoi discendenti, mentre altre non si comportano nello stesso modo. Il colore del testo, per esempio, viene spesso ereditato; un margine normalmente no.
Quando utilizzare !important
!important aumenta la priorità di una dichiarazione all’interno della cascata.
.pulsante-speciale {
background-color: #222222 !important;
}Può essere utile in situazioni particolari, ma non dovrebbe diventare il metodo abituale per risolvere qualsiasi conflitto.
Se ogni nuova regola viene forzata con !important, il foglio di stile diventa progressivamente più difficile da gestire. Quando servirà modificare nuovamente quelle proprietà sarà necessario affrontare altre regole con priorità elevata.
Prima di utilizzarlo conviene controllare quale selettore sta vincendo, da dove arriva la regola e se è possibile risolvere il problema con una specificità più appropriata.
Come applicare il CSS soltanto a una pagina WordPress
A volte una modifica deve riguardare una singola pagina e non tutto il sito.
WordPress aggiunge normalmente diverse classi all’elemento body. In molti casi tra queste compare anche un riferimento all’identificativo della pagina.
Supponendo che una pagina presenti la classe page-id-42, si può scrivere:
.page-id-42 .entry-title {
color: #6d2e8c;
}Il colore viene applicato al titolo soltanto quando questo si trova all’interno della pagina identificata dal selettore scelto.
Le classi effettive dipendono comunque dal codice generato da WordPress e dal tema. Prima di utilizzare una regola è quindi necessario controllare l’HTML reale della pagina.
Come modificare un elemento al passaggio del mouse
Il CSS permette di definire uno stile anche in funzione dello stato di un elemento. Per questo vengono utilizzate le pseudo-classi.
Una delle più conosciute è :hover, che può intervenire quando il puntatore si trova sopra un elemento:
.wp-block-button__link:hover {
opacity: 0.8;
}Un’altra pseudo-classe importante è :focus, utilizzata quando un elemento riceve il focus, per esempio durante la navigazione tramite tastiera.
Quando si modificano questi stati bisogna prestare attenzione anche all’accessibilità. Eliminare indiscriminatamente gli indicatori di focus può rendere più difficile utilizzare il sito senza mouse.
Come creare modifiche CSS responsive
Un sito non viene visualizzato soltanto su monitor desktop. Una personalizzazione deve funzionare anche su tablet e smartphone.
Le media query permettono di applicare determinate regole soltanto quando vengono soddisfatte alcune condizioni.
Un esempio semplice è:
@media (max-width: 768px) {
.titolo-speciale {
font-size: 28px;
}
}La dimensione indicata viene applicata quando la larghezza disponibile non supera il valore specificato.
I breakpoint non dovrebbero essere scelti semplicemente perché un certo numero è diffuso nelle guide. È preferibile osservare quando il layout reale comincia ad avere problemi e intervenire in funzione del contenuto.
Nascondere un elemento con il CSS
Una delle regole più conosciute è:
.elemento-da-nascondere {
display: none;
}display: none rimuove l’elemento dal normale layout della pagina.
Va però utilizzato con criterio. Nascondere graficamente qualcosa non equivale necessariamente a eliminare il contenuto dal codice HTML o impedirne il caricamento.
Se l’obiettivo riguarda sicurezza, privacy o controllo degli accessi, il CSS non è lo strumento appropriato. Il CSS controlla la presentazione, non l’autorizzazione ad accedere alle informazioni.
Come usare Ispeziona elemento per trovare il selettore corretto
Una delle attività più utili quando si personalizza WordPress consiste nell’imparare a utilizzare gli strumenti per sviluppatori del browser.
Con Chrome, Firefox, Edge e altri browser moderni si può normalmente fare clic con il pulsante destro sull’elemento interessato e scegliere Ispeziona.
Si apre un pannello che mostra la struttura HTML e le regole CSS applicate all’elemento selezionato.
Supponendo di voler modificare un pulsante, si può selezionarlo e controllare quali classi possiede. Nel pannello degli stili si può poi verificare quale regola determina il colore dello sfondo, il bordo, la dimensione del testo oppure il padding.
Questo evita di inventare selettori o copiare classi trovate in esempi relativi a temi differenti.
Provare il CSS nel browser prima di salvarlo
Gli strumenti per sviluppatori non servono soltanto a leggere il CSS esistente. Permettono anche di modificarlo temporaneamente.
Si può cambiare:
padding: 10px;
in:
padding: 24px;
e vedere immediatamente cosa succede sulla pagina.
Queste modifiche rimangono nel browser e non vengono salvate sul sito. Ricaricando la pagina viene ripristinata la versione originale.
Si può quindi utilizzare il browser come ambiente di prova: si individua il selettore, si sperimentano proprietà e valori e, una volta raggiunto il risultato corretto, si trasferisce la regola nell’area CSS di WordPress.
Perché a volte una modifica CSS non appare
Una regola può sembrare corretta ma non produrre il risultato previsto. Le cause possibili sono diverse.
La prima è un errore di sintassi. Una parentesi mancante, una proprietà scritta in modo errato o una dichiarazione non valida possono impedire l’applicazione della regola.
Un’altra possibilità riguarda la specificità. Una regola già presente nel tema potrebbe avere una priorità maggiore.
Il selettore potrebbe inoltre non corrispondere all’elemento realmente mostrato nella pagina.
Bisogna infine considerare la cache. WordPress può utilizzare sistemi di cache propri, plugin di ottimizzazione, cache lato server o Content Delivery Network. Anche il browser conserva localmente alcune risorse. Dopo una modifica potrebbe quindi essere necessario svuotare le cache coinvolte prima di concludere che il CSS non funziona.
Modificare style.css direttamente: quando evitarlo
Aprire il file style.css del tema principale e aggiungere regole manualmente può sembrare la strada più immediata. Nella maggior parte dei casi, però, non è una buona scelta.
Quando il tema viene aggiornato, i suoi file possono essere sostituiti. Una personalizzazione aggiunta direttamente al tema principale rischia quindi di andare persa.
Per interventi limitati è generalmente più pratico utilizzare il CSS aggiuntivo messo a disposizione da WordPress.
Quando invece si sta sviluppando una personalizzazione strutturata del tema, può essere opportuno utilizzare un tema child.
Che cos’è un tema child e cosa c’entra con il CSS
Un tema child, chiamato anche tema figlio, permette di estendere un tema principale senza modificarne direttamente i file.
È particolarmente utile quando le personalizzazioni non riguardano soltanto poche regole CSS ma fanno parte di uno sviluppo più ampio che deve essere mantenuto nel tempo.
Nei temi classici il file style.css continua ad avere un ruolo importante. Nei temi WordPress moderni bisogna però considerare anche il sistema degli Stili Globali e theme.json.
Per questo non conviene considerare il tema child semplicemente come un posto alternativo in cui incollare qualche riga di CSS. È uno strumento di sviluppo del tema e richiede una gestione più consapevole della struttura WordPress.
Che cos’è theme.json
I temi WordPress moderni possono utilizzare un file chiamato theme.json per definire impostazioni e stili in modo integrato con l’Editor del sito.
Attraverso questo sistema un tema può configurare colori, tipografia, spaziature, bordi, impostazioni dei blocchi e altri aspetti grafici. Le informazioni definite nel file vengono integrate con il sistema degli Stili di WordPress.
Per chi vuole semplicemente cambiare il colore di un titolo non è necessario modificare theme.json. È però utile sapere che esiste, perché spiega perché un tema a blocchi moderno non dipende esclusivamente da un grande foglio style.css.
Nel lavoro di sviluppo di un tema, utilizzare il sistema degli Stili quando possibile permette inoltre di integrarsi meglio con gli strumenti grafici messi a disposizione da WordPress.
CSS aggiuntivo, tema child o theme.json: quale scegliere
La scelta dipende dal tipo di intervento.
Per una modifica piccola e specifica, come cambiare uno spazio o correggere l’aspetto di un elemento, il CSS aggiuntivo è normalmente la soluzione più semplice.
Se il tema a blocchi mette già a disposizione l’impostazione necessaria attraverso Stili, è preferibile valutare prima quella soluzione.
Se invece si sta sviluppando una personalizzazione complessa e permanente del tema, un tema child può diventare più appropriato.
theme.json riguarda soprattutto la configurazione strutturata del sistema grafico del tema e l’integrazione con gli Stili Globali.
Non si tratta quindi di strumenti necessariamente alternativi. Possono convivere, purché ciascuno venga utilizzato per il compito adatto.
Attenzione ai page builder e ai plugin
Elementor, Divi e altri page builder possono introdurre propri sistemi di stile, classi, CSS generato dinamicamente e controlli responsive. Anche diversi plugin aggiungono fogli di stile al front-end.
Quando si modifica un elemento creato da questi strumenti, il CSS personalizzato può quindi entrare in relazione con regole che non provengono direttamente dal tema.
La procedura rimane comunque la stessa: si ispeziona l’elemento, si identifica la regola effettivamente applicata e si costruisce una personalizzazione sufficientemente mirata.
È preferibile evitare selettori eccessivamente generici. Una regola come:
div {
margin: 0;
}può modificare centinaia di elementi contemporaneamente e produrre effetti difficili da prevedere.
Errori comuni quando si aggiunge CSS a WordPress
Uno degli errori più frequenti consiste nel copiare una regola trovata online senza controllare se il proprio tema utilizza gli stessi selettori.
Un altro problema nasce dall’uso indiscriminato di !important, spesso aggiunto appena una dichiarazione non produce l’effetto desiderato.
Bisogna inoltre evitare di assegnare valori rigidi a elementi che devono adattarsi a schermi differenti. Una larghezza fissa può apparire corretta su desktop e creare uno scorrimento orizzontale su smartphone.
È utile anche organizzare il CSS personalizzato. Quando le regole diventano numerose, si possono raggruppare logicamente e aggiungere commenti:
/* Titoli degli articoli */
.entry-title {
margin-bottom: 1.5rem;
}
/* Pulsanti */
.wp-block-button__link {
border-radius: 6px;
}I commenti non modificano l’aspetto della pagina, ma rendono più semplice capire perché una determinata regola è stata inserita.
Come lavorare sul CSS senza rischiare di rompere il sito
Il CSS raramente compromette il funzionamento di WordPress come potrebbe fare un errore PHP, ma una regola sbagliata può comunque rendere il sito difficile da utilizzare.
Conviene effettuare modifiche circoscritte e verificarle subito. Prima si prova la regola nei DevTools del browser, poi la si inserisce nel sito e infine si controllano le pagine interessate.
Per modifiche importanti è opportuno utilizzare un ambiente di staging, cioè una copia del sito destinata ai test e non visibile come sito di produzione.
Dopo ogni intervento bisogna controllare almeno le principali dimensioni dello schermo e verificare che menu, moduli, pulsanti e contenuti continuino a essere utilizzabili.
Un metodo pratico per personalizzare WordPress con il CSS
Il sistema più efficace consiste nel partire sempre dall’elemento che si vuole cambiare, non dal codice.
Si apre la pagina, si individua graficamente l’elemento e lo si analizza con Ispeziona. Si controllano le classi presenti e le dichiarazioni CSS che stanno producendo l’aspetto corrente.
Si modifica temporaneamente una proprietà nel browser. Se il risultato è quello desiderato, si costruisce una regola che intervenga soltanto sugli elementi necessari.
La regola viene quindi inserita nel punto appropriato di WordPress e verificata sia nella pagina originale sia nelle altre aree che potrebbero utilizzare lo stesso selettore.
Infine si controlla la visualizzazione responsive e, se il risultato non appare immediatamente, si verifica l’eventuale presenza di cache.
Seguendo questo procedimento non serve conoscere a memoria tutte le proprietà del CSS. Diventa più importante sapere leggere la struttura della pagina, individuare il selettore corretto e comprendere perché una determinata regola viene applicata.
Dove si incontra il CSS usando WordPress
Il CSS compare praticamente in ogni parte grafica di un sito WordPress. Si trova nei file del tema, negli stili generati dall’Editor a blocchi, nel codice prodotto da alcuni plugin e page builder, nei temi child e nelle personalizzazioni aggiunte dall’amministratore.
Lo si incontra anche utilizzando semplicemente gli strumenti di sviluppo del browser: selezionando un titolo, un’immagine o un pulsante si possono vedere le regole che ne controllano colori, dimensioni e spazi.
Per iniziare non serve quindi costruire un foglio di stile completo. È sufficiente scegliere una modifica reale, analizzare come viene generato l’elemento e intervenire con una piccola regola mirata. Con il tempo diventano più familiari selettori, cascata, Box Model e responsive design, cioè proprio i concetti che permettono di passare dalle semplici correzioni grafiche a una personalizzazione più consapevole di WordPress.
