Questo è uno dei problemi tipici di chi vuole personalizzare il proprio sito web: aggiungere CSS personalizzati su WordPress ed evitare che le tue modifiche rovinino tutto. Questo passaggio può aiutarti a rendere il tuo prodotto finale adatto alle esigenze specifiche. Infatti, sappiamo bene che il CSS è un elemento fondamentale per ottenere grandi risultati rispetto all’estetica e alla funzionalità del sito internet che stai curando.
Il CSS (Cascading Style Sheets) è il linguaggio che usi per dare stile alle pagine web. Spieghiamolo meglio: se i tag HTML delineano lo scheletro di una pagina – definendo la struttura e i contenuti – il CSS è il vestito: colori, font, layout, spaziature, animazioni e tutto ciò che riguarda l’aspetto visivo del portale web.
Il suddetto markup per la stilizzazione si trova nella cartella /wp-content/themes/nome-child/style.css. Con questo elemento puoi fare grandi cose ma devi personalizzare bene questi elementi, utilizzando le giuste procedure. Vuoi approfondire? Ecco come aggiungere CSS personalizzati su WordPress.
Inizio indicando quella che è la cosa peggiore per chi vuole aggiungere CSS personalizzato su un sito WordPress: modificare il tema padre (parent theme). Ovvero il layout WordPress che hai installato e attivato. Tipo Astra, GeneratePress, Twenty Twenty-Four o qualsiasi altro. Se lo modifichi, quando aggiorni il tema si sovrascrivono tutti i file. Anche il CSS. Così perdi tutte le modifiche.
Esempio concreto: monti Astra sul tuo sito, modifichi il file style.css aggiungendo 200 righe di CSS personalizzato, arriva l’aggiornamento e lo esegui. In un attimo perdi tutto il lavoro svolto. Per aggiungere CSS personalizzato ci sono soluzioni più pratiche e convenienti che devi conoscere per personalizzare il sito web.
Da leggere: mostrare e nascondere i contenuti dei blocchi WordPress
Il modo più semplice per inserire nuovo CSS sul sito internet è anche il migliore, il più stabile. In pratica, c’è una funzione nativa del CMS che ti consente di aggiungere stringhe e comandi con un semplice copia e incolla, senza toccare elementi che potrebbero danneggiare il tuo equilibrio grafico nell’immediato e in futuro.
Come funziona tutto ciò? Molto semplice: accedi alla dashboard di WordPress, in alto noterai una voce sempre presente nel menu fissato. Si tratta del link Personalizza, c’è anche l’icona del pennello vicino.
Clicca, e vai sulla voce CSS aggiuntivo. Ti troverai un box in basso: lì puoi incollare il Cascading Style Sheets customizzato, senza timore di sovrascritture, aggiornamenti e danni al sito. Infatti, una volta inserito il CSS hai un’anteprima delle modifiche in tempo reale. Puoi navigare il sito web per assicurarti che tutto funzioni.
Se sei sicuro/a del risultato salvi e procedi. Il CSS viene salvato nel database di WordPress, non nei file del tema. Quindi è al sicuro dagli aggiornamenti. Certo, ha i suoi lati deboli: se un domani cambi completamente tema, questo CSS sparisce e non è adatto a lavori impegnativi. Ma per modifiche veloci è perfetto.
Un dettaglio: personalmente trovo molto comodo questo sistema ma può essere confusionario dato lo spazio ridotto. Per evitare problemi, utilizzo sempre il comando /* comment here */ che non viene interpretato dal browser. E che viene usato per indicare quando inizia una nuova stringa e di cosa si tratta.
Utilizzi Gutenberg? perfetto, dovresti sapere che puoi modificare il CSS anche del singolo elemento. Non è una soluzione pratica se vuoi che la modifica venga replicata ovunque, ma se hai bisogno di personalizzazioni spot su singoli elementi puoi fare così: nell’area Personalizza crea lo stile che ti interessa, con tutte le caratteristiche.
Aggiungi e un nome specifico (tecnicamente la classe) che servirà da richiamo. Poi, vai nel blocco e poi nelle sezioni avanzate: qui si trova una voce Classe/i CSS aggiuntiva/e. Incolla il nome del CSS e tutto quadra.
Una delle opzioni più amate per aggiungere CSS su misura nel sito. Esistono diversi plugin WordPress che ti consentono di personalizzare l’estetica aggiungendo stringhe e comandi. Le estensioni funzionano in modo simile al CSS aggiuntivo del personalizzatore WordPress ma con qualche differenza importante.
Tra le opzioni più note possiamo elencare tre nomi essenziali. Il primo è Simple Custom CSS and JS, permette di aggiungere CSS personalizzato (e anche JavaScript e HTML se serve) senza toccare i file del tema. È molto più potente del semplice CSS aggiuntivo, ad esempio puoi disattivare una stringa senza cancellarla.
Poi abbiamo WP Add Custom CSS e Custom CSS pro che sono altrettanto potenti. E che hanno procedure più o meno simili: clicchi sul comando di inserimento, si apre un editor dove scrivi il tuo CSS, salvi e vai. Il CSS resta anche se cambi tema, alcuni plugin hanno editor più avanzati con syntax highlighting, autocomplete e puoi facilmente gestire più snippet di CSS separati, senza scrivere tutto in un unico blocco.
Alcuni tempi, così come diverse estensioni, permettono di integrare i comandi del CSS in editor personalizzati. Sono delle opzioni simili alla personalizzazione WordPress ma legate alla singola realtà.
Personalmente sono contrario a queste operazioni su opzioni esterne perché stiamo parlando sempre di modifiche effettuate su un editor che non controlli: se domani cambi tema o plugin, tutto scompare.
Da leggere: i migliori plugin per Gutenberg
Ecco la soluzione preferita da chi deve effettuare modifiche importanti in termini di CSS: l’intervento sul tema figlio. Ovvero, quello che replica le impostazioni del padre e non è soggetto alle sovrascritture nel momento in cui c’è un aggiornamento. Questa soluzione ti permette di intervenire in modo massiccio e strutturato senza timore di perdere il lavoro svolto nel tempo. Come procedere in questi casi? Quali sono i passaggi?
Devi prima creare un child theme (ecco la guida ufficiale di WordPress) dove il CSS viene caricato dopo quello del padre, quindi le tue regole sovrascrivono quelle originali grazie alla cascata del CSS. Questo significa che nel momento in cui hai creato il tema figlio, puoi andare nel file style.css e intervenire come preferisci.
2 commenti presenti
Marco ha commentato il 2026-05-15 18:01:10
Ottimo riepilogo! Spesso si sottovaluta l’importanza del Child Theme, ma è l’unico modo per dormire sonni tranquilli dopo un aggiornamento.
Riccardo Esposito ha commentato il 2026-06-08 04:46:41
Per forza, solo così puoi fare delle modifiche stabili.