Come Usare il CSS Aggiuntivo in WordPress: guida pratica per iniziare e non fare danni

Il CSS Aggiuntivo di WordPress è il modo più semplice per cambiare l’aspetto al tuo sito senza toccare i file del tema in uso. Funziona direttamente dal backand di WordPress, andando sul menù di sinistra e scegliendo Aspetto → Personalizza → CSS aggiuntivo: incolli il codice, vedi subito l’anteprima, e quando sei soddisfatto pubblichi. In questa guida ti mostro dove trovarlo, come scrivere e organizzare il codice, come evitare gli errori tipici e ti lascio esempi pronti da incollare. La logica è quella di “Mettere In Pratica”: spiegazioni chiare, passi concreti, risultati immediati.

Nota utile: il CSS Aggiuntivo è legato al tema attivo. Se cambi tema, il codice non sparisce dal database ma non si applica al nuovo tema finché non lo ricopi (o finché non riattivi il tema precedente). Tieni traccia dei tuoi snippet in un file esterno word o sul blocco note, oppure in un tema child.

 

Dove si trova e come funziona (passo per passo)

1. Accedi alla Bacheca di WordPress come amministratore.
2. Vai su Aspetto → Personalizza.
3. Clicca su CSS aggiuntivo nella colonna di sinistra.
4. Incolla o scrivi il tuo CSS nello spazio di testo. A destra vedi l’anteprima dal vivo.
5. Premi Pubblica in alto per rendere effettive le modifiche su tutto il sito.

Suggerimenti pratici:

• Usa commenti per etichettare i blocchi e ricordarti a cosa servono, ad esempio puoi aggiungere questo commento (neutro) sopra al codice che cambia l’ampiezza dei blocchi “spazio” di gutenberg:
  /* =====================
     Ampiezza blocco spazio
     ===================== */
• Se vedi che una regola non ha effetto, aggiungi !important subito dopo il valore della proprietà CSS (es. color: red !important;), e usalo solo quando serve e verifica di utilizzare i selettori corretti (classe, id, struttura HTML effettiva del tema).
• Pulisci periodicamente il CSS: evita duplicati e regole che non servono più.

 

Regole di base per scrivere CSS pulito (e funzionante)

• Specificità: un selettore più specifico vince (es. .header .menu a supera semplicemente a). Prima di usare !important, prova ad aumentare la specificità.
• Mobile first: pensa prima agli schermi piccoli e poi amplia con media query.
• Coerenza: usa sempre le stesse unità (es. rem per font, px per bordi, %/vw per larghezze fluide) e la stessa notazione colori (#hex, rgb, hsl).
• Commenti sempre: ogni blocco deve avere un titolo che spieghi lo scopo. Quando torni sul codice dopo settimane ti ringrazierai.
• Backup: copia gli snippet in un file .txt, word o dove ti trovi meglio tu.

Esempio di struttura tipo per il tuo foglio CSS Aggiuntivo:

Esempio 1:
/* ========== Tipografia ==========
   Titoli, paragrafi, link */

Esempio 2:
/* ========== Spaziature ==========
Margini, padding, spaziatori */

Esempio 3:
/* ========== Layout ==========
   Larghezze, colonne, contenitori */

Esempio 4:
/* ========== Componenti ==========
   Bottoni, card, tabelle */

 

Un paio di snippet di base utili (con etichette pronte)

Ecco alcuni codici CSS semplici e immediati, già pronti da usare con etichette e un paio di note pratiche.

Snippet 1:

/* COLORE INTESTAZIONI H1,H2,H3,H4 */
h1 { color: #222222 !important; }  /* Grigio scuro */
h2 { color: #1E90FF !important; } /* Azzurro brillante */
h3 { color: #228B22 !important; } /* Verde foresta */
h4 { color: #B22222 !important; } /* Rosso mattone */

Snippet 2:

/* AMPIEZZA BLOCCO SPAZIO */
.wp-block-spacer {
  height: 50px !important;   /* Cambia qui l’altezza */
  width: 100% !important;    /* Cambia qui la larghezza */

}

 Perché funzionano: i selettori sono semplici e globali. Attenzione però agli stili del tema: se noti che un titolo cambia colore in una pagina ma non in un’altra, verifica se il tema aggiunge classi più specifiche in certi contesti (es. .entry-content h2).

Esempi pratici in più (da copiare e incollare)

Di seguito trovi alcuni esempi pronti all’uso che puoi usare direttamente. Sono pensati per un blog tecnico.

1) Aumentare la leggibilità dei paragrafi

/* Tipografia: leggibilità paragrafi */
.entry-content p {
  line-height: 1.7;
  font-size: 1.05rem;
  margin-bottom: 1.15em;
}

2) Link più visibili con sottolineatura al passaggio

/* Link: sottolineatura hover */
.entry-content a {
  text-decoration: none;
}
.entry-content a:hover {
  text-decoration: underline;
}

3) Bottone principale in stile WordPress

/* Pulsanti principali */
.wp-block-button__link, button, input[type=”submit”] {
  background: #0073aa;  /* blu WP */
  color: #fff;
  border-radius: 6px;
  padding: 10px 16px;
}
.wp-block-button__link:hover, button:hover, input[type=”submit”]:hover {
  filter: brightness(1.05);
}

4) Card con ombra leggera per box informativi

/* Componenti: card con ombra */
.card, .wp-block-group.is-style-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  padding: 20px;
}

5) Tabelle più leggibili negli articoli tecnici

/* Tabelle: righe alternate */
.entry-content table {
  border-collapse: collapse;
  width: 100%;
}
.entry-content table td, .entry-content table th {
  border: 1px solid #e6e6e6;
  padding: 8px 10px;
}
.entry-content table tr:nth-child(even) {
  background: #fafafa;
}

6) Intestazione (header) sempre visibile

/* Layout: header sticky */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #fff;
}

7) Nascondere il titolo solo in una pagina specifica

Sostituisci 123 con l’ID della pagina (lo trovi nell’URL di modifica pagina).

/* Pagine: nascondi titolo su una pagina */
.page-id-123 .entry-title {
  display: none;
}

8) Spaziatore responsive (più piccolo su mobile)

/* Spaziatore: responsive su mobile */
@media (max-width: 600px) {
  .wp-block-spacer { height: 24px !important; }
}

9) Contenuto a larghezza ampia nelle pagine

/* Layout: contenuto wide */
.alignwide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

10) Evidenziare le note importanti dentro gli articoli

/* Componenti: box nota */
.note-importante {
  border-left: 4px solid #ffb100;
  background: #fff8e6;
  padding: 12px 14px;
  margin: 16px 0;
}

 

Come usare classi aggiuntive nei blocchi Gutenberg

Ogni blocco ha un campo Classe CSS aggiuntiva (barra laterale → Avanzate). Se lo compili, puoi puntare lo stile solo a quel blocco, senza toccare gli altri.

Esempio pratico:

1. Seleziona un blocco Paragrafo → Avanzate → Classe CSS aggiuntiva → scrivi nota-importante.
2. Incolla lo snippet del box nota visto sopra al punto 10.
3. Quel paragrafo avrà uno stile evidenziato, gli altri no.

Questo approccio ti permette di creare un set di stili riutilizzabili (per note, avvisi, box pro/contro, ecc.).

 

Quando conviene passare a soluzioni più strutturate (theme.json / tema child)

Il CSS Aggiuntivo è perfetto per ritocchi rapidi e per i test. Se però inizi a collezionare decine di regole oppure vuoi impostare default globali (spaziature, palette, tipografia dei blocchi), conviene considerare di mettere le mani su:

• theme.json: imposti impostazioni e stili di base per blocchi, colori, spaziature, tipografia.
• Tema child: salvi il tuo CSS in un file dedicato (style.css) per mantenerlo al sicuro anche quando aggiorni il tema principale.

La combinazione ideale per la maggior parte dei siti è: CSS Aggiuntivo per le “microcorrezioni” + tema child per gli stili più strutturati.

 

Errori comuni (e come evitarli)

• Regola CSS che non si applica: il tema potrebbe usare selettori più specifici. La soluzione è: aumentare la specificità o applicare !important ma con criterio.
• Modifiche non visibili: cache del browser o plugin di cache attivi. Svuota la cache e ricarica forzatamente la pagina (CTRL/CMD + F5).
• Differenze tra editor e frontend: alcuni temi applicano stili diversi nell’editor. Prova con .editor-styles-wrapper per simulare l’anteprima, oppure testa direttamente sul sito live/loggato.
• Caos e disordine: col passare del tempo, quando il CSS diventa lungo e disordinato è anche difficile da gestire. La soluzione pratica è dividere il foglio in sezioni (tipografia, layout, spaziature, componenti) e inserire commenti chiari come le etichette. In questo modo avrai una “legenda” fissa che ti permette di capire subito cosa fa ogni blocco.

 

Checklist rapida prima di pubblicare le modifiche

Prima di cliccare su Pubblica, verifica questi punti:

• Ho aggiunto un commento/etichetta a ogni blocco CSS per ricordarmi qual è il suo scopo?.
• Ho controllato che i selettori puntino davvero agli elementi giusti?.
• Ho usato !important solo dove strettamente necessario?.
• Ho testato le modifiche sia su desktop che su mobile?.
• Ho svuotato la cache del browser e dei plugin prima di controllare il risultato?.
• Ho salvato una copia del codice in un file esterno per backup?.

 

Conclusione

Il CSS Aggiuntivo è lo strumento più rapido per dare ordine visivo al tuo sito WordPress: niente FTP, niente editor di file, solo incolla e pubblica. Parti dagli snippet pronti, etichetta tutto con commenti chiari e, quando la quantità di regole cresce, migra ciò che hai ben testato in un tema child o in theme.json.

Se t i è piaciuta questa spiegazione, Continua a leggere le guide di Mettere In Pratica per maggiori info…

 

 

FAQ

Posso rovinare il sito con il CSS Aggiuntivo?
Se sbagli un selettore, di solito non succede nulla. Se imposti regole troppo aggressive (es. * { display:none }), sì. Vai per gradi e usa l’anteprima.

Dove conviene mettere tanto CSS: in CSS Aggiuntivo o nel tema child?
Per poche regole: CSS Aggiuntivo. Per uno stile coerente, strutturato e duraturo: tema child e/o theme.json.

Cambiare tema fa sparire il mio CSS?
Il codice rimane associato al tema in uso quando lo hai inserito. Se attivi un altro tema, dovrai copiare quel CSS nel nuovo tema (o mantenerlo nel child del nuovo tema). Fai sempre un Back-Up.