WordPress custom CSS

Come possiamo creare CSS custom per WordPress e quindi personalizzare l’aspetto grafico della nostra pagina web costruita su WordPress?

Prima una premessa: cos’è il CSS?
CSS è l’acronimo di Cascading StyleSheet, (Foglio di stile a cascata) ed è il linguaggio con cui si costruisce il layout di una pagina web definendo elementi grafici quali:
– Font dei caratteri
– Colori
– Bordi
– Ombre
– Sfondi
– Interlinee
– Elementi decorativi

Il CSS è un insieme di regole strutturate come nell’immagine di esempio sotto, dove abbiamo il nome del selettore ed una dichiarazione, composta da proprietà e relativo valore:

(immagine 1)

Qui viene definito l’aspetto del titolo pagina (H1): colore caratteri: bianco, sfondo: rosso.

I selettori CSS identificano una caratteristica grafica e potranno semplicemente essere richiamati all’interno della pagina HTML perché quell’aspetto grafico venga applicato.
Ci sono fondamentalmente 4 tipi differenti di selettori CSS:

Solitamente per un sito si inserisce l’insieme degli elementi grafici comuni a tutte le pagine in un file esterno (style.css) che viene richiamato dalla pagina HTML, in modo che la costruzione e la modifica del layout sia molto più veloce e sicura:
– Veloce perché impostiamo (o modifichiamo) una sola volta nel file style.css il layout di tutte le pagine del sito
– Sicura perché il layout, gestito separatamente, non tocca assolutamente il contenuto impedendone quindi la modifica o cancellazione involontaria

In WordPress spesso per la creazione di un sito viene applicato un tema preconfezionato, che fornisce automaticamente l’aspetto grafico (e quindi il foglio di stile) per tutto il sito.
Se volessimo modificare il template (anche se solo per alcuni particolari) di una singola pagina, potremmo in teoria agire sul CSS in WordPress (quindi direttamente sul file style.css), ma è sconsigliato procedere in questa maniera perché, ogni volta che il tema viene aggiornato (il che succede non raramente) si perderebbero le modifiche fatte, che vengono sovrascritte dalla nuova versione.

Possiamo quindi utilizzare queste opzioni alternative:
1) Creare un tema child WordPress
2) Utilizzare il WordPress CSS editor
3) Usare un WordPress CSS editor plugin (SiteOrigin CSS)
4) Altro plugin per WordPress: Advanced CSS editor

Fai il test per misurare il tuo livello di competenze ed abilità tecniche come professionista del digitale

Opzione 1: creare un tema child WordPress (e modificare il nuovo file style.css associato)

Per ovviare al problema su esposto, per cui le modifiche al file style.css ‘parent’ (=genitore) vengono perse dopo gli aggiornamenti del tema, viene creato un tema ‘child’ (=figlio), un “duplicato” che eredita lo stile e le caratteristiche del tema parent. Il CSS personalizzato viene inserito nel tema child.
La guida ufficiale di WordPress per gli sviluppatori (il “Codex”) contiene una pagina in lingua italiana che descrive come creare un tema child.
WordPress quindi caricherà entrambi i fogli di stile: prima quello del tema parent e poi quello del tema child, in modo che le regole inserite in quest’ultimo possano eventualmente sovrascrivere quelle dello stesso tipo presenti nel file originale (il secondo prevale sul primo per la regola della ‘cascata’ – termine che fa parte della definizione del CSS – per cui se il tema parent ha stabilito per esempio per i titoli il colore carattere rosso ed il tema child invece il colore blu, prevale quest’ultimo)

Una volta creato il tema child, per modificare il nuovo file style.css ad esso associato si deve:
a) accedere alla pagina di amministrazione sito in WordPress (bacheca del backend) e selezionare dal menu laterale a sinistra le voci: Aspetto > Editor
Se si utilizza WordPress multisite si dovranno invece selezionare dal menu superiore le voci: I miei siti > Gestione network > Bacheca e poi le voci Temi > Editor del tema nel menu laterale a sinistra

b) in alto a destra selezionare il proprio tema child nel menu a tendina della opzione ‘Selezionare il tema da modificare’ e cliccare sull’adiacente bottone ‘Seleziona’ (vedere immagine 2)

(immagine 2)

c) a questo punto è possibile inserire le regole CSS e salvare le modifiche cliccando sul bottone ‘Aggiorna file’ in basso a sinistra nella pagina.

Scarica gratuitamente l’eBook WordPress per capire come creare e distribuire contenuti multimediali del tuo sito web in maniera dinamica

Opzione 2: utilizzare il WordPress CSS editor

(immagine 3)

In WordPress esiste un editor integrato, a cui è possibile accedere attraverso il menu laterale: Aspetto > Personalizza, quindi selezionare ‘CSS aggiuntivo’ (vedere immagine 3).

In questo caso, contrariamente a quanto avviene nell’opzione precedente (che lavora direttamente sul file style.css – quindi abbiamo un External CSS), qui i comandi CSS saranno integrati nella pagina HTML, come foglio di stile incorporato.

Un buon compromesso tra i due metodi delle opzioni 1 e 2 può essere quello di testare il CSS personalizzato utilizzando l’editor incorporato e, una volta raggiunto l’effetto desiderato, tagliare il codice CSS e incollarlo nel file style.css del tema child.

Nel caso occorresse modificare il template pagina (in casi sporadici), si può accedere direttamente al codice di quella specifica pagina seguendo i passaggi mostrati nelle immagini sotto (n.4 e 5):

immagine 4: una pagina di esempio, in cui è presente grassetto, colore rosso, corsivo: cliccare sui 3 puntini in alto a destra e selezionare ‘editor del codice’

(immagine 4)

immagine 5: abbiamo sotto la stessa pagina in codice: qui si può aggiungere, oltre a codice HTML, direttamente il codice degli stili (inline CSS)

(immagine 5)

Opzione 3: usare un WordPress CSS editor plugin (SiteOrigin CSS)

(immagine 6)

In WordPress sono disponibili dei plugin che permettono di inserire CSS personalizzato.

Tra questi si distingue, con oltre 200.000 installazioni attive, il plugin SiteOrigin CSS (gratuito) (vedere immagine 6)

Questo plugin permette la visualizzazione in tempo reale delle modifiche inserite (come l’editor CSS incorporato) e fornisce altre comode funzioni, come la possibilità di cliccare sul punto della pagina che si vuole personalizzare ed ottenere in automatico il selettore della regola CSS.

Anche in questo caso è possibile tagliare il codice CSS stabile e incollarlo nel file style.css del tema child.
Dopo aver installato e attivato il plugin, andare nel seguente percorso Aspetto> CSS personalizzato per accedere alla versione CSS del plugin.

Opzione 4: altro WordPress CSS editor plugin (Advanced CSS editor)

(immagine 7)

Questo plugin ha +10.000 installazioni attive. Dopo averlo installato e attivato, andare alla posizione Aspetto> Personalizza per accedere al cruscotto e cercare “avanzato CSS Editor” nel menu. Apparirà in cima all’elenco delle voci di menu in Customizer. (vedere immagine 7)
Per modificare un codice CSS, basta aggiungere un selettore e la regola che si applica ad esso nella casella di testo quando si fa clic sul menu “Avanzato CSS Editor”.

Le regole CSS possono essere scritte per essere applicate in generale o per indirizzare un determinato elemento su dispositivi specifici (computer, telefono, tablet, ecc.). Non appena vengono scritte le regole, il Customizer visualizzerà un’anteprima con le modifiche che sono state apportate.

Conoscere WordPress per personalizzare il CSS

Le informazioni qui presentate presuppongono una certa familiarità con WordPress, in modo da poter applicare le personalizzazioni CSS senza problemi. Ma nel caso invece tu non l’avessi, potresti cogliere l’opportunità offerta da Digital Coach e seguire il corso appositamente studiato per darti piena padronanza di uno strumento potente come WordPress, con il vantaggio di imparare dai migliori professionisti. Di seguito il link al corso; Digital Coach è a tua disposizione per qualsiasi necessità di approfondimento. Se desideri scopri anche cosa è una pagina genitore Word Press.

Diventa un Professionista qualificato, consegui le giuste competenze pratico operative nella realizzazione e nella programmazione di siti web e blog

CORSO WORDPRESS