Hai mai avuto bisogno di cambiare qualcosa con i css sul tuo sito WordPress, ma solo su una determinata pagina? Lo sapevi che è possibile? In questa guida ti spiego come modificare i css solo in una pagina di WordPress.
Indice dei contenuti
Modificare il CSS di una sola pagina di WordPress
Quante volte avresti voluto cambiare il colore di un pulsante o l’aspetto di un widget su una determinata pagina del tuo sito in WordPress? Salvo poi scoprire che quella modifica influenzava altre parti del sito e così vi hai dovuto rinunciare o digerire controvoglia questa modifica indispensabile. E invece no. Su WordPress si possono modificare i CSS su ogni singola pagina e il bello è che ci vuole un attimo.
Vediamo cosa serve per modificare i css di una specifica pagina di WordPress:
- Chrome (o altro browser)
- L’Id della pagina (vi mostrerò come trovarlo)
- Un pochino di confidenza con il CSS
Tutto qui. Si tratta di andare ad individuare l’id della pagina che di solito è contenuto in una classe css. Utilizzando questa classe, possiamo cambiare qualsiasi elemento della singola pagina. Ti spiego meglio.
Troviamo l’ID della pagina
Per modificare il css di una sola pagina di WordPress, inizia aprendo il frontend del tuo sito, portati sulla pagina alla quale vuoi modificare il codice CSS e visualizza il codice sorgente della stessa utilizzando la combinazione dei tasti CTRL+U.
Vedrai aprirsi una nuova scheda del browser che ti mostra il codice HTML che la compone.
Adesso devi cercare l’ID della pagina e per farlo utilizza la combinazione CTRL+F che ti aprirà una casella di ricerca.
Adesso devi avere un po’ di iniziativa per utilizzare il termine giusto che ti permetterà di andare ad individuare l’ID.
Di solito basta cercare con la parola body, perché normalmente i temi piazzano l’id della pagina come classe proprio nella prima riga del body.
Il body è il tag di apertura del contenuto delle pagine e di solito viene seguito dall’id delle pagine stesse.
Guarda l’immagine sotto per capire meglio.
ricerca id pagina wordpress
In pratica avrete qualcosa come <body class=”page-id-xxx altre-classi”>, dove al posto di xxx troverete il numero identificativo della specifica pagina, l’ID appunto.
Nel mi caso l’id è 95 e la mia classe è page-id-95. L’Id identifica univocamente solo quella pagina ed è per questo che conoscerlo, consente di poter cambiare qualsiasi elemento grafico solo in quella pagina senza andare a modificare le altre.
Effettuiamo la modifica al CSS della singola pagina
Ora andiamo a fare la modifica vera e propria. Quindi portiamoci sulla bacheca di WordPress e selezioniamo Aspetto —-> Personalizza —> CSS aggiuntivo (o personalizzato o custom) e inseriamo qui il codice CSS per la modifica che vogliamo effettuare.
Essendo una classe scriveremo .page-id-xx seguito dal selettore dell’elemento che vogliamo modificare.
Quindi se ad esempio volessimo modificare la grandezza dei caratteri a 18px della nostra pagina, potremmo scrivere:
<strong>.page-id-xx</strong> <strong>p</strong> {font-size: 18px;}
È solo un esempio naturalmente ma è idoneo a spiegare come procedere per cambiare i css di una singola pagina specifica di WordPress.
E se vogliamo modificare i CSS di un singolo articolo o di una pagina categoria?
L’elemento page-id è presente solo nelle pagine di WordPress. Fate attenzione perché negli articoli troverete la classe postid-xxx. Nelle categorie invece troverete la classe nella forma category-xxx. Per il resto non cambia nulla.
ricerca id articolo wordpress
A questo punto qualsiasi pagina di wordpress può essere modificata e personalizzata con del codice CSS dedicato, senza che la modifica impatti anche sulle altre pagine del sito. Semplice, rapido, efficace.
Be the first to comment