CSS aggiuntivo WordPress: dove aggiungerlo e come cambiare il colore di un pulsante
Il CSS aggiuntivo di WordPress è un campo in cui aggiungi regole di stile tue senza toccare i file del tema. In un tema classico lo trovi in Aspetto → Personalizza → CSS aggiuntivo, in un tema a blocchi nell'Editor del sito, sotto Stili. La modifica funziona appena la salvi e sopravvive agli aggiornamenti del tema.
Autore: Il team TellMyShop. Una guida per i titolari di siti WordPress e negozi WooCommerce: la causa, la correzione a mano e lo stesso lavoro in una conversazione in chat.
Ultimo aggiornamento: · 5 min di lettura
Prima di scrivere CSS: forse basta un'impostazione
Il colore di pulsante più facile è quello che imposti senza codice. Controlla prima questi posti:
- Tema a blocchi: Aspetto → Editor → Stili. Nelle impostazioni dei blocchi o degli elementi trovi i pulsanti e puoi cambiarne lo sfondo e il colore del testo per tutto il sito.
- Tema classico: Aspetto → Personalizza. Molti temi hanno lì una sezione colori o pulsanti.
- Negozio WooCommerce: i pulsanti Aggiungi al carrello di solito prendono il colore dal tema, quindi spesso basta una modifica negli stili del tema.
Il CSS serve quando quell'opzione non c'è, o quando vuoi cambiare un pulsante preciso.
Dove si trova il CSS aggiuntivo nel tuo tema
| Tipo di tema | Dove aggiungere il CSS | Note |
|---|---|---|
| Classico (per esempio Astra, OceanWP) | Aspetto → Personalizza → CSS aggiuntivo | anteprima dal vivo a destra, salvataggio con il pulsante Pubblica |
| A blocchi (per esempio Twenty Twenty-Five) | Aspetto → Editor → Stili, menu a tre puntini → CSS aggiuntivo | salvato negli stili globali del tema |
| A blocchi, un solo tipo di blocco | Stili → Blocchi → blocco scelto → Avanzate | CSS solo per quel blocco |
| Più di qualche regola | il foglio di stile del child theme | serve l'accesso ai file |
Il CSS dell'Editor del sito e quello di Personalizza sono due posti separati. Lo spiega la nota del team core di WordPress sul CSS negli stili globali. Se hai un tema a blocchi ma una volta hai aggiunto CSS in Personalizza, conviene spostarlo in un solo posto, così tra un anno saprai dove guardare.
Come cambiare il colore di un pulsante passo per passo
- Apri la pagina con il pulsante, cliccaci con il tasto destro e scegli Ispeziona. Vedrai la classe dell'elemento, per esempio wp-block-button__link o button.
- Vai al punto del CSS aggiuntivo indicato nella tabella qui sopra.
- Aggiungi una regola, per esempio:
.wp-block-button__link {
background-color: #1f6f5c;
color: #ffffff;
}
.wp-block-button__link:hover {
background-color: #17574a;
}- Guarda l'anteprima. Se il colore non è cambiato, una regola del tema è più forte. Metti prima della classe il nome di un'area, per esempio .site-footer, invece di forzare subito la regola con important.
- Pubblica o salva le modifiche.
- Controlla la pagina in una finestra privata e sul telefono. Il colore del testo deve essere leggibile sul nuovo sfondo.
I colori nell'esempio sono solo esempi. Altri approcci, compresi un child theme e un plugin, sono descritti nella guida di Hostinger al CSS personalizzato in WordPress.
Cos'altro sistemano poche righe di CSS
Il colore dei pulsanti è la richiesta più comune, ma lo stesso campo aiuta con altre piccole correzioni di stile:
- Nascondere un elemento, per esempio la data sotto gli articoli o il nome dell'autore, con una regola display: none. L'elemento resta nel codice della pagina, solo non lo vedi.
- Spaziature, quando un titolo è attaccato a un'immagine o i pulsanti sono troppo vicini sul telefono.
- Dimensione del carattere in un punto, per esempio il footer, senza cambiare tutta la tipografia del tema.
- Colore dei link nel contenuto degli articoli, quando il colore del tema è troppo chiaro su sfondo bianco.
- Layout su mobile, con una regola che ha una condizione sulla larghezza dello schermo e vale solo sugli schermi stretti.
Due abitudini ti risparmieranno ricerche tra qualche mese. Sopra ogni regola aggiungi un commento tra /* e */, per esempio «pulsanti verdi, ottobre 2026». E tieni tutte le correzioni in un solo posto, non un po' in Personalizza, un po' negli stili dell'editor e un po' nelle impostazioni di un page builder. Così vedi facilmente quale regola fa cosa, e togli senza preoccupazioni quelle che non ti servono più.
Una nota di prudenza sul nascondere. Se in questo modo nascondi un testo importante per i clienti, per esempio i costi di spedizione, sparisce dallo schermo ma non dagli obblighi del negozio. Quel tipo di contenuto correggilo alla fonte.
Quando il CSS aggiuntivo non basta
Il CSS aggiuntivo cambia l'aspetto, non il contenuto né la struttura HTML. Non puoi usarlo per aggiungere nuovo testo al footer o spostare un pulsante in un'altra sezione. Per questo ti servono i template nell'Editor del sito o i file di un child theme WordPress. Sono descritti nel Theme Handbook di WordPress.
Se dopo il salvataggio non cambia niente anche se il CSS è giusto, spesso la colpa è della cache. L'ordine in cui svuotarla lo descriviamo nell'articolo sulle modifiche non visibili in WordPress.
Come la chat cambia il CSS con un'anteprima
Il plugin TellMyShop per WordPress e WooCommerce permette alla tua chat (Claude o ChatGPT) di leggere il CSS aggiuntivo attuale e di aggiungerne o sostituirne una parte. Prima di salvare controlla che le parentesi graffe tornino, e ti avvisa se carichi stili da altri domini. In un tema a blocchi cambia anche colori e tipografia negli stili globali.
Tu: I pulsanti del sito sono grigi, falli verdi come il logo.
La tua chat: Il tema è classico e il CSS aggiuntivo ha già due regole. Aggiungo in fondo:
Il testo bianco su questo verde è leggibile. Salvo? (sì / no)
Tu: Sì.
La tua chat: Salvato. Ho controllato la home page da non collegato: i pulsanti sono verdi.
Stato della scheda: in attesa del tuo «sì»nuova versione: .wp-block-button__link { background-color: #1f6f5c; color: #ffffff; }
nuova versione: .wp-block-button__link:hover { background-color: #17574a; }
Le modifiche al CSS e agli stili globali funzionano in TellMyShop Pro con l'interruttore Tema acceso nel pannello del plugin. L'interruttore dura 24 ore e richiede un backup del database di oggi. La chat prepara l'anteprima anche con l'interruttore spento, e salva solo quando è acceso e dopo il tuo «sì». La modifica finisce nella cronologia delle modifiche e puoi annullarla con una sola richiesta.
La versione gratuita TellMyShop Free non legge né cambia l'aspetto del sito, quindi in questo compito aiuta poco. La descrizione di entrambe le versioni la trovi nella pagina TellMyShop per WordPress e WooCommerce, i prezzi nella pagina prezzi. Altre guide sono sul blog.
Domande e risposte
Il CSS aggiuntivo sparisce dopo l'aggiornamento del tema?
No. WordPress salva il CSS aggiuntivo nel database, non nei file del tema, quindi un aggiornamento non lo tocca. È però legato al tema in cui l'hai aggiunto. Se cambi tema, devi copiarlo nel nuovo.
Ho aggiunto del CSS e non è cambiato niente. Perché?
Di solito il selettore non corrisponde all'elemento, oppure una regola del tema è più forte. La seconda causa comune è la cache, quindi controlla la pagina in una finestra privata. In un tema a blocchi verifica anche di aver aggiunto il CSS negli stili dell'Editor del sito e non nella vecchia schermata Personalizza.
Un CSS sbagliato può rompere il sito?
Non lo blocca come può fare un errore PHP. Può però nascondere un elemento, rompere il layout o colorare il testo in modo illeggibile. Quindi cambia una regola alla volta e controlla subito la pagina, anche sul telefono.
Mi serve un plugin per cambiare il colore di un pulsante?
No. In un tema a blocchi il colore dei pulsanti lo imposti negli stili globali, in un tema classico spesso nelle opzioni del tema in Personalizza. Il CSS aggiuntivo serve quando il tema non ha questa opzione.
WordPress è un marchio della WordPress Foundation. WooCommerce è un marchio di Automattic Inc. Claude è un marchio di Anthropic PBC. ChatGPT e OpenAI sono marchi di OpenAI. TellMyShop non è affiliato a queste aziende.