Il Software.
  Applicare le regole CSS al tuo sito WordPress
 

ll Foglio di stile style.CSS

Su WordPress, tutte le regole CSS sono contenute in un file chiamato style.css. Questo è anche chiamato foglio di stile.

Puoi visualizzare il foglio di stile del tuo tema navigando in Aspetto > Editor.

In teoria, potresti  fare le modifiche e le aggiunte necessarie direttamente nel tuo foglio di stile. Tuttavia, se decidi di lavorare direttamente sul file style.css, ogni volta che effettuerai un aggiornamento del tema tutte le modifiche andranno perse.

Tema Child

Una prima soluzione è quella di usare un tema child, cioè, un tema che eredita le caratteristiche del tema genitore e che può essere modificato senza che tutti i cambiamenti vengano persi ad ogni aggiornamento.

Vuoi avere più informazioni su un tema child? Ecco come creare, configurare ed usare un tema child.

Un tema child (“bambino” o “figlio” in inglese)  WordPress  è un template che importa tutte le funzionalità e caratteristiche di un altro tema, chiamato parent theme (il tema “genitore”). Creare un tema child,ti permette di modificare e/o aggiungere  funzionalità al tuo template senza dover sovrascrivere alcun file del parent theme, rischiando di commettere errori o di perdere il tuo lavoro quando effettui aggiornamenti.

Quando è necessario utilizzare un tema child WordPress?

Molto probabilmente ti sarai già trovato o ti troverai nella condizione di dover effettuare modifiche al tuo template WordPress, per renderlo più adatto al tuo sito web e a seconda delle tue reali necessità.

L’utilizzo di un tema child WordPress può essere una soluzione ottimale per effettuare i cambiamenti che desideri, senza modificare il codice del tuo tema parent, ovvero quello originario del template che hai scelto di utilizzare per il tuo sito web. Quali sono le ragioni fondamentali per scegliere questa soluzione?

  • Non sei molto pratico di temi WordPress, e hai bisogno di testare maggiormente quello che hai installato
  • Hai poco tempo a disposizione e devi effettuare modifiche al tuo tema in breve tempo
  • Se modifichi il tuo tema corrente e questo viene aggiornato, tutte le tue modifiche andranno perse. Con un tema child, puoi effettuare l’update del tuo parent theme senza perdere le modifiche che hai fatto su quello child.

Se sei all’inizio nella creazione del tuo sito WordPress, ti consiglio di iniziare a lavorare su un tema child WordPress per prendere dimestichezza con i codici utilizzati ed effettuare le modifiche in tutta sicurezza.

Campo Custom CSS

Una seconda soluzione è quella di utilizzare lo spazio Custom CSS (cioè, CSS personalizzato) che è ormai una funzionalità presente nella maggior parte dei temi WordPress.

Solitamente, questo campo si trova all’interno delle sezioni per la configurazione del tema. Per esempio, sul tema Enfold, si trova in Theme Options > General Styling (in questo tema, il campo è chiamato Quick CSS)

Campo Custom CSS Enfold

Sovrascrivere le dichiarazioni CSS

Per ottenere gli effetti desiderati,  dovrai sovrascrivere dichiarazioni CSS già presenti all’interno del file style.css.

Talvolta, il box custom CSS presente all’interno del tema (come descritto nella sezione precedente) va a sovrascrivere automaticamente il foglio di stile.

Se però noti che le modifiche non hanno effetto, dovrai indicare manualmente che le tue nuove dichiarazioni devono avere priorità.

Per farlo, usa la dicitura !important alla fine della dichiarazione, prima del punto e virgola. 

Ecco un esempio:

h2 {
font-size: 20px !important ;
}

Questa dichiarazione andrebbe a sovrascrivere le altre dichiarazioni relative alla misura del font dell’elemento h2 all’interno del foglio di stile.

Dichiarazioni “Inline”

Se hai bisogno di modificare il CSS di un singolo elemento, potrai farlo direttamente all’interno dell’Editore di Testo, senza dover creare una nuova classe o ID nel foglio di stile.

Semplicemente, aggiungi le dichiarazioni CSS all’interno del tag HTML che precede il contenuto, usando la dicitura “style=”  così:

<h2 style="color:#ababab;font-size:40px;">Questo è un sottotitolo.</h2>

Come vedi, dopo il tag h2 è presente la dicitura style= . All’interno delle virgolette, sono racchiuse due dichiarazioni CSS (color: #ababab e font-size:40px), ciascuna chiusa dal punto e virgola.

In questo caso, la regola CSS sarà applicata esclusivamente a questo sottotitolo h2.

 Ispezionare il CSS delle pagine web

Il modo migliore per imparare il CSS è esercitandosi. Con la pratica, usare i codici CSS diventerà sempre più facile.

Oggi, abbiamo la fortuna di poter utilizzare strumenti fantastici per ispezionare i codici CSS di qualunque pagina web e anche testere temporaneamente le nostre modifiche, senza che i cambiamenti siano definitivi.

Questi strumenti sono molto utili anche per trovare le classi e gli ID associati ai contenuti delle tue pagine. Una volta trovato il nome della classe su cui vuoi lavorare, potrai creare per essa nuove dichiarazioni che andranno a sovrascrivere quelle già presenti nel file style.css

Chrome DevTools per browser Google Chrome

Se usi come browser Google Chrome, hai a disposizione Chrome DevTools.

Su qualunque pagina web, clicca il tasto destro del tuo mouse e seleziona ispeziona elemento. Si aprirà nella parte inferiore della pagina una finestra suddivisa in due parti: sulla destra, l’HTML della pagina. Sulla sinistra, il CSS.

Per ispezionare nel dettaglio un elemento specifico della pagina, clicca sulla piccola lente d’ingrandimento che si trova nell’angolao in alto a sinistra del box DevTools. Quindi, seleziona sulla pagina l’elemento di tuo interesse.

Vedrai che i codici nel box si aggiorneranno con quelli relativi all’elemento selezionato (puoi sempre usare la barra di scorrimento per muoverti verso l’alto ed il basso e selezionare elementi all’interno del codice stesso).

Una volta individuate le dichiarazioni CSS su cui vuoi lavorare, clicca due volte sul codice. In questo modo, si attiverà un campo per modificare il codice oppure disattivare del tutto le dichiarazioni CSS.

Questo sarà un ottimo modo per esercitarti e testare tutte le modifiche che desideri.

Chrome DevTools

Firebug per browser Mozilla Firefox

Se invece usi come browser Mozilla Firefox, ti consiglio Firebug. Questa è una vera e propria estensione che aggiunge al tuo browser diverse funzionalità molto utili per analizzare e modificare codici HTML e CSS.

Per installare Firebug, visita il sito ufficiale e clicca Install Firebug in alto a destra. Avvia il download e segui il procedimento per aggiungere l’estensione alla barra degli strumenti del tuo browser.

Per attivare Firebug, clicca il simbolo a forma di insetto in alto a destra: questo farà aprire un box nella parte inferiore della pagina, similare a quello Chrome DevTools.

Anche qui, sulla sinistra vedrai il codice HTML, sulla destra quello CSS.

Per visualizzare tutto il CSS della pagina, clicca la tab CSS.

Per selezionare un elemento specifico sulla pagina, clicca il simbolo con il piccolo rettangolo e il puntatore che si trova nella barra degli strumenti della finestra Firebug.

Firebug

 

8. Verificare i tuoi codici CSS

Quando si sta imparando ad usare il CSS, non è raro dimenticare qualche parentesi o punto e virgola.

Un ottimo strumento per testare la validità dei tuoi codici è il CSS Validation System del W3C, la comunità internazionale che si occupa di sviluppare gli standard relativi ai codici sul web.

Semplicemente, inserisci le tue regole CSS all’interno del campo di testo e clicca “Verifica”. Se i tuoi codici sono corretti, apparirà “Congratulazioni. Nessun errore trovato.” Se invece ci sono errori, apparirà un messaggio contente la riga da correggere.

 

 
  Today, there have been 48 visitatori (74 hits) on this page!  
 
=> Vuoi anche tu una pagina web gratis? Clicca qui! <=