Usa l'indice dei contenuti
Hai appena creato il tuo sito web con WordPress ma hai bisogno di fare delle modifiche estetiche particolari? La scelta migliore è quella di utilizzare del codice CSS personalizzato in modo da poter gestire sezioni, titoli, blocchi, paragrafi o qualsiasi altro elemento della pagina come più ci piace.
Infatti, in questo articolo vedremo quanto sia semplice aggiungere del codice CSS personalizzato su WordPress facendo un paio di esempi pratici, inoltre vedremo anche come far si che del codice CSS personalizzato venga utilizzato solo in una specifica pagina o articolo del proprio sito web.
Genera la privacy policy per il tuo sito web in 5 minuti con Iubenda. E con WP Special, il primo anno hai il 10% di sconto!
Codice CSS personalizzato: come inserirlo su WordPress
Esistono vari modi per aggiungere del codice CSS personalizzato su WordPress. Fino a qualche anno fa si faceva uso di specifici plugin, ma da qualche anno WordPress ha inserito un box dedicato esclusivamente all’aggiunta di codice CSS e ha reso più semplice tale operazione.
Il box per inserire codice CSS personalizzato è facilmente disponibile entrando nella propria bacheca di WordPress e poi andando su “Aspetto-> Personalizza” e successivamente su “CSS Aggiuntivo“.
All’interno di questo box sarà possibile inserire codice CSS personalizzato e il risultato sarà visibile in tempo reale sulla parte destra dello schermo (dove è presente l’anteprima del nostro sito web).
PS: Se si utilizza un child theme, è possibile inserire CSS personalizzato direttamente all’interno del file “style.css” del child theme,oppure utilizzare il metodo attualmente descritto.
Esempio di CSS personalizzato
Facciamo qualche esempio pratico per capire come funziona il CSS personalizzato su WordPress.
Supponiamo di voler aumentare la dimensione del testo e di cambiare il colore dei titoli delle pagine del nostro sito web. Utilizzare il CSS personalizzato in questo caso è la cosa più veloce e intelligente da fare.
Possiamo utilizzare un codice CSS di questo tipo e incollarlo nel box del CSS aggiuntivo:
h1 {
font-size: 20px;
color: #000000;
}Sarà possibile visualizzare il risultato in tempo reale, e quindi vedere se il titolo ha subito tali modifiche.
Ovviamente, in questo esempio, abbiamo cercato di semplificare al massimo il codice perché ogni tema segue uno stile differente e sarebbe impossibile scrivere un codice che vada bene per qualsiasi sito. Quindi in questo caso specifico il codice CSS andrebbe a modificare tutti gli H1 presenti nelle pagine del sito.
Un altro esempio potrebbe essere quello di voler aumentare la dimensione del testo solo per il contenuto dei post e delle pagine (quindi non il testo dell’intero sito).
Il codice CSS da applicare sarà di questo genere:
.entry-content {
font-size: 18px;
}Anche in questo caso, il nome delle classi potrebbe variare da tema a tema, quindi non è detto che questo codice CSS sia adatto per tutti i temi in circolazione. Si consiglia di guardare il nome della classe del contenitore dove è presente il contenuto dell’articolo o pagina.
Esempio di CSS personalizzato solo per una specifica pagina
Supponiamo sempre di voler modificare la dimensione e il colore del titolo delle pagina. E se volessimo effettuare questa modifica estetica solo per una specifica pagina o post?
In questo caso è necessario conoscere l’ID della pagina o del post. Vediamo come fare.
Utilizzando il browser Google Chrome o FireFox, andiamo nella pagina dove vogliamo utilizzare del codice CSS personalizzato. Facciamo click col tasto destro del mouse e selezioniamo “Ispeziona” oppure “Ispeziona Elemento“.
Si aprirà un tab contenente il codice HTML della pagina stessa, scorriamo verso l’alto fino a trovare il tag di apertura <body> che conterrà tutta una serie di classi al suo interno (<body class=”….”>).
All’interno di queste classi cerchiamo “postid-numeroid” se siamo all’interno di un articolo, oppure “page-id-numeroid” se siamo all’interno di una pagina.
Perfetto! Ora che abbiamo trovato l’ID della pagina o del post, possiamo ritornare nel box del CSS aggiuntivo e inserire un codice CSS personalizzato di questo genere:
body.postid-4400 h1 {
font-size: 20px;
color: #000000;
}Come si può notare, la differenza rispetto al codice precedente che funziona per tutte le pagine del sito, in questo caso abbiamo specificato la classe nel tab <body> che fa riferimento unicamente al post con ID 4400, quindi questa modifica estetica sarà utilizzata esclusivamente in questo caso.
Alcune informazioni riguardo il CSS aggiuntivo
Prima di concludere, ecco alcune informazioni importanti riguardo l’aggiunta di codice all’interno del box del CSS aggiuntivo:
- Se utilizzi un plugin di cache come ad esempio WP Rocket o simili, le modifiche CSS potrebbero non essere subito visibili. In questo caso sarà necessario svuotare la cache.
- Se alcune classi CSS non dovessero funzionare, è probabile che che ci siano alcune regole CSS che hanno priorità rispetto al tuo codice CSS (e che quindi invalidano il tuo codice CSS personalizzato). In questo caso si può tentare di utilizzare la dicitura “!important” a fianco al valore della proprietà (ad esempio: font-size: 20px !important;).
- Il codice inserito nel box del CSS aggiuntivo è valido solo per il tema corrente. Quindi, se in futuro decidessi di attivare un child theme o di cambiare completamente tema, ricorda che le regole CSS scritte in quel box non verranno applicate.
Conclusioni
In questo articolo abbiamo visto come aggiungere del codice CSS personalizzato all’interno di WordPress, e abbiamo visto anche vari esempi che potrebbero tornare utili in moltissimi casi reali.
E tu? Hai mai fatto uso di CSS personalizzato? Come lo hai inserito? Raccontaci le tue esperienze tramite i commenti 🙂
Sei in cerca di un form per il tuo sito WordPress? Con Gravity Forms puoi creare tutti i form di cui hai bisogno, dai più semplici form di contatto fino a complessi form per le tue attività!
Grazie, tutto chiarissimo. Ma se tipo tra 10 giorni mi rendo conto che voglio fare una modifica al css personalizzato che ho inserito … dove lo ritrovo (l’articolo è del 2020 ma comunque mi sembra assolutamente ancora valido)? Sempre lì nella sezione Aspetto->Personalizza, nel riquadro dove lo ho inserito, oppure devo andare a cercarlo direttamente nel file php?
Grazie
Anna
La modifica al CSS personalizzato che hai inserito sarà sempre disponibile nella stessa sezione, ovvero in Aspetto->Personalizza, nel riquadro dove l’hai inserito. Non sarà necessario cercarlo direttamente nei file PHP. Se avrai bisogno di apportare eventuali modifiche in futuro, potrai trovarlo facilmente lì. Buona continuazione con il tuo progetto!