Vuoi modificare il CSS di una singola pagina su WordPress?
Può capitare di voler cambiare una pagina senza cambiare tema: cambiare il colore di un pulsante, la dimensione del testo o la larghezza di un bordo.
Vuoi sorprendere i tuoi utenti con un sito che cambia con le stagioni? Dare un tocco naive e creare uno stile diverso per ogni pagina o articolo del tuo sito web? Non c’è bisogno di un tema arcobaleno, devi solo sapere come lavorare con il CSS.
Seguendo questa guida, potrai fare le modifiche che desideri senza la necessità di installare plugin aggiuntivi!
Proprio così, il tuo sito ha già tutti gli strumenti necessari per applicare una personalizzazione di questo tipo.
Prima di fare qualsiasi modifica al CSS del tuo sito web, che si tratti di un semplice colore o di personalizzazioni più importanti, installa subito un tema child.
Se effettui le modifiche direttamente sul tema parent, quando lo aggiornerai perderai tutto, perché i file verranno sovrascritti.
Il tema child, invece, crea dei file aggiuntivi che non verranno modificati con l’aggiornamento del tema, perciò tutto il tuo lavoro sarà sempre salvo.
Crea anche un backup completo del tuo sito.
Se non hai molta pratica, c’è il rischio di commettere qualche errore e non sapere dove andare a correggerlo e così modificare il CSS di una singola pagina rischia di rimescolare un po’ troppo le carte. Presta quindi attenzione e in caso di dubbio ritorna al backup.
Fatto tutto? Bene! Ora possiamo entrare nel vivo del discorso.
Per seguire questo tutorial, avrai bisogno di:
Il CSS (Cascading Style Sheet) è il linguaggio di programmazione usato per personalizzare l’aspetto degli elementi di una pagina web.
Usando il CSS puoi personalizzare colori, font, bordi, margini e molto altro ancora.
Il CSS è semplice ed intuitivo da utilizzare.
Se non hai idea di come si usa il CSS, non farti spaventare dai codici e leggi la nostra guida sul CSS.
In 15-20 minuti avrai un’idea sicuramente più chiara, garantito.
Se vuoi approfondire l’argomento, il nostro video corso WordPress all’interno della SOS WP Academy include anche un intero modulo dedicato a questo linguaggio.
Ti consiglio di dare un’occhiata se ti interesserebbe applicare delle personalizzazioni un po’ più avanzate.
Cioè, un campo dove inserire il tuo CSS personalizzato all’interno del tema (spesso questo si trova tra le opzioni del tema)
OPPURE
la funzionalità nativa di WordPress. A partire dalla versione 4.7 di WordPress è presente una sezione CSS aggiuntivo all’interno dell’area Aspetto > Personalizza.
Per vedere questa funzionalità devi aver installato la versione 4.7 di WordPress o superiore (se non hai ancora fatto l’aggiornamento di WordPress, ti consiglio di farlo quanto prima.
Questo è molto importante, soprattutto per mantenere il tuo sito sicuro e ben funzionante).
Attenzione! Le modifiche fatte al CSS dal pannello Personalizza vengono applicate al tema attivo sul sito al momento del salvataggio.
Non saranno quindi visibili se successivamente installi ed attivi un altro tema e, anche in questo caso, potrai perderle se non hai attivato un tema child..
Se nessuna di queste due opzioni è per te accessibile, dovrai fare le modifiche direttamente all’interno del file style.css.
Questa è un’opzione che funziona molto bene.
Naturalmente, non mi stancherò mai di dirlo, ci stiamo riferendo sempre al tema child!
Per seguire al meglio il tutorial, ti consiglio anche di usare Google Chrome come browser.
Ok, iniziamo.
Affinché una modifica al CSS venga applicata ad una singola pagina (o ad un singolo post), dobbiamo specificare l’ID della pagina in questione all’interno della nostra regola CSS.
Nello specifico, l’ID della pagina deve figurare come selettore.
Facciamo un breve ripasso:
h1 {
font-size: 30px;
} Quella che vedi qui sopra è una regola CSS.
Tutto ciò che si trova prima della parentesi graffa di apertura è il selettore, in questo caso h1.
La regola CSS verrà quindi applicata a tutti gli elementi h1.
Per modificare il CSS di una singola pagina, dobbiamo specificare nel selettore l’ID della pagina.
Dove si trova quindi l’ID della pagina?
Scopriamolo subito.
Per scoprire l’ID di una pagina WordPress puoi fare così.
Apri nel browser la pagina che vuoi modificare, quindi, apri la console Google (in qualunque punto della pagina), clicca il tasto destro del mouse, seleziona ‘Ispeziona elemento’ ed assicurati che sia selezionata la tab Elements/Elementi.
Qui dovresti vedere i codici HTML e CSS della pagina.
Bene, ora all’interno dell’HTML, scorri verso l’alto fino a raggiungere il punto dove vedi il tag di apertura <body>. Prima della > di chiusura vedrai un sacco di altri codici, questo è ciò che ci interessa.
Ora, qui cerca un tag che sia:
OPPURE
Ai fini del CSS, in entrambi i casi si tratta di una classe. Nel primo caso, si tratta però di una classe che serve ad identificare un post (articolo), nel secondo invece serve ad identificare una pagina.
Ora che abbiamo l’ID, possiamo modificare il CSS di una singola pagina in modo piuttosto semplice.
Per prima cosa, prepara le regole CSS che vuoi applicare.
Ti consiglio di fare tutti i test del caso sempre dalla console Google e prenderne nota (possibilmente, su un editore di testo semplice, come il blocco note; non su Word).
Quindi, apri la pagina dove si trova il campo per inserire codici CSS personalizzati.
Per esempio, la pagina con le opzioni del tuo tema o il pannello Personalizza.
Ora, proprio all’inizio della regola che hai preparato, aggiungi la classe relativa alla pagina o al post che vuoi modificare, e aggiungi uno spazio tra questo selettore e quello che identifica l’elemento da modificare.
In questo modo:
.page-id-72 h1 {
font-size: 30px;
} Infine, salva.
Nell’esempio sopra, saranno modificati solo gli elementi h1 (cioè, i titoli di dimensione più grande) che si trovano all’interno della pagina con ID 35.
Per prima cosa svuota la cache del tuo sito, se usi un plugin di caching, ed anche la cache del browser.
Quindi, ricarica la pagina.
Se dopo questo passaggio le modifiche ancora non sono visibili, modifica la dichiarazione aggiungendo prima del punto e virgola finale.
Aggiungere fa sì che la regola vada a sovrascrivere gli altri codici CSS che si occupano dell’elemento specificato nel selettore.
Attenzione però ad usare con moderazione, dovrebbe proprio essere l’ultima risorsa.
Conclusione
Abbiamo visto cosa puoi fare da solo. Ma se pensi di non essere pronto per lavorare sul tuo codice, ricorda che c’è sempre un plugin (e la nostra assistenza)! Per modifica il CSS di una pagina WordPress con un plugin io ti consiglio di provare Simple Custom CSS.
Tutto qui. Come vedi, modificare il CSS di una singola pagina su WordPress è piuttosto semplice.
Inoltre, grazie alla nuova funzionalità per inserire codici CSS direttamente dal pannello Personalizza, hai probabilmente già tutti gli strumenti che ti servono sul tuo sito.
Ovviamente, devi investire un po’ di tempo nel lavorare sulla console e testare codici CSS, però stai tranquillo: tutte le prove che vengono fatte all’interno della console Google sono assolutamente temporanee, visibili solo a te e ‘scompaiono’ appena chiudi la finestra del browser!
Ecco quindi tutti i sistemi per personalizzare l’aspetto di singole pagine o articoli in WordPress usando i codici CSS.
Hai mai provato a modificare il CSS di una singola pagina su WordPress?
Quale soluzione hai usato?
Ci stai provando ora ma riscontri qualche problema?
Lascia pure le tue domande nei commenti e ti risponderemo al più presto.
Oltre la SEO tradizionale, è importante comprendere come gli LLM valutano i contenuti web e…
Il numero degli utenti che utilizzano ogni giorno Google come motore di ricerca è ovviamente…
Sorpresa nel mondo tech: Google presenta un nuovo design per il suo iconico logo "G".…
Non tutti i contenuti nascono uguali. Alcuni catturano l'attenzione per un giorno, altri continuano a…
In teoria recensioni e AI Overview non hanno quasi niente in comune. Le recensioni sono…
Cosa vuole veramente un utente quando fa una ricerca su Google? La risposta sta nel…