Come modificare il CSS di una singola pagina su WordPress

come modificare il css di una singola pagina

Vuoi modificare il CSS di una singola pagina su WordPress? In altre parole: cambiare il colore di un bottone, la dimensione del testo o la larghezza di un bordo solo su una specifica pagina, lasciando il resto del sito invariato?

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.

Modificare il CSS di una singola pagina: pre-requisiti

Per seguire questo tutorial, avrai bisogno di:

Conoscenza base su come usare il CSS

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 introduttiva. In 15-20 minuti avrai un’idea sicuramente più chiara, garantito.

Un posto dove inserire i tuoi codici CSS

Cioè, un campo dove inserire il tuo CSS personalizzato all’interno del tema (spesso questo si trova tra le opzioni del tema)

OPPURE

la versione 4.7 di WordPress installata sul tuo sito. Se tra le opzioni del tuo tema non c’è quella per inserire codici personalizzati, puoi comunque inserire codici CSS aggiuntivi dal tuo pannello 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).

css aggiuntivo pannello personalizza wordpress

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.

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. Devi però assicurarti di aver creato un tema child – trovi maggiori informazioni su questa guida – affinché le modifiche non vadano perse ogni volta che aggiorni il tema.

Per seguire al meglio il tutorial, ti consiglio anche di usare Google Chrome come browser.

Ok, iniziamo.

Step 1: trovare l’ID della pagina o del post da modificare

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.

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:

  • postid-NUMERO

OPPURE

  • page-id-NUMERO (trovi questo esempio nell’immagine qui sotto)

console google css id pagina

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.

Step 2: applicare i codici CSS alla tua pagina o post

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, ed 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.

css aggiuntivo wordpress

Se le tue modifiche non sono immediatamente visibili:

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 !important prima del punto e virgola finale.

Aggiungere !important fa sì che la regola vada a sovrascrivere gli altri codici CSS che si occupano dell’elemento specificato nel selettore. Attenzione però ad usare !important con moderazione, dovrebbe proprio essere l’ultima risorsa.

Ti interessa sapere quali altri linguaggi di programmazione vengono usati all’interno del tuo sito? Leggi la nostra guida base sulla struttura tecnica di WordPress.

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!

Conclusione

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.

Chiara Buzzi

Chiara Buzzi

Chiara è una blogger a tempo pieno. Esperta di content marketing, aiuta imprenditori e liberi professionisti a sfruttare la rete per promuovere online la loro attività. Quando non sta lavorando sul web, Chiara ama leggere riviste e cucinare, ed ha una strana ossessione per tutto ciò che riguarda il mondo del beauty.

SOS WP raccomanda SiteGround come migliore hosting in Italia


Acquista SiteGround tramite il nostro link e ricevi gratuitamente la nostra Assistenza Prioritaria

SiteGround - Miglior hosting per Wordpress
4 commenti
  1. dice:

    nel post precedente non ha mostrato il codice che avevo trascritto per mostrarti da dove ho ricavato il nome “menu”… ipotizzo per qualche forma di sicurezza (?); ti sostituisco < con [
    [nav id="menu”]
    [ul class=“menu page-menu”]

    [/nav]
    [a class=“responsive-menu-tootle “ href=“#”]
    [i class=“icon-menu-fine”]
    ::before
    [/i]
    [/a]

    Grz

    Rispondi
  2. dice:

    Ciao Chiara, prendo spunto da quello che scrivi in questo post per chiederti una informazione (premessa…è la prima volta che mi cimento con un CSS); sto cercando di modificare una pagina di un mio sito (attualmente è in locale), che diversamente da tutte le altre, non voglio abbia il menu a tendine nella top bar fissa… ho scoperto che la pagina di riferimento (che è la home page) è “page-id-234” e il menu che voglio eliminare è “menu”

    (

    )

    Il comando che sto usando nel css è
    .page-id-234 #menu {display: none !important;}
    ho anche aggiunto l’important come da tuo consiglio, ma non vedo nessuna modifica

    Sto inserendo questo codice nel Betheme Child: Stylesheet (style.css) usando l’editor che si trova nel menu di wp “Aspetto”.
    Secondo te la procedura che ho seguita è corretta?

    Grazie, Andrea

    Rispondi

Lascia un Commento

Vuoi partecipare alla discussione?
Fornisci il tuo contributo!

Lascia un commento

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