Come aggiungere codice CSS personalizzato su WordPress

Come inserire CSS personalizzato su WordPress

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.

Hosting professionale per WordPress e ad alte prestazioni. Scopri i pacchetti disponibili su Xlogic per il tuo sito web.

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“.

Box del CSS aggiuntivo di WordPress
Box del CSS aggiuntivo di WordPress

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.

Trovare ID pagina o post per il CSS aggiuntivo
Trovare ID pagina o post per il CSS aggiuntivo

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:

  1. 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.
  2. 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;).
  3. 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 🙂

Uno dei page builder più famosi per WordPress. Sfrutta appieno le sue potenzialità con Elementor PRO e crea siti web come non avresti mai immaginato.

Piaciuto l'articolo? Condividilo sui social!

Scrivi una risposta

Il tuo indirizzo email non sarà pubblicato.I campi obbligatori sono contrassegnati *