WordPress, oltre ad essere il CMS più popolare sul web, è famoso per la grande quantità di temi personalizzati tra cui scegliere, che permettono di dare al nostro sito o blog l'aspetto che più ci piace. Tutti i sistemi CMS sono in grado di personalizzare l'aspetto delle pagine web, ma ciò richiede spesso la conoscenza di qualche linguaggio di programmazione o la configurazione di alcuni files XML. Con WordPress (WP) è tutto molto più facile. Oggi vedremo come personalizzare in pochi minuti un tema senza compromettere il tema originale. Ci basterà conoscere le nozioni più elementari di CSS... e il coraggio di mettere le mani dentro le cartelle di WP.
Child themes
Quando modifichiamo un tema già esistente, creando una nostra versione del tema, si parla della creazione di child themes (temi figlio). Un child theme è un tema che eredita tutte le caratteristiche del tema “padre”, tranne quelle che noi vogliamo personalizzare.
La procedura per creare un child theme è davvero semplice
- Apriamo la cartella
wp-content/themesdella nostra installazione di WP. Qui dentro dovremmo trovare tutti i temi che abbiamo installato - Creiamo una nuova cartella, assegnando un nome a nostro piacimento. A titolo d'esempio assumeremo di creare una cartella di nome
prova, e daremo lo stesso nome al child theme che ci apprestiamo a creare - Creiamo all'interno della cartella un file di testo vuoto, che deve chiamarsi obbligatoriamente
style.css
Apriamo adesso il file style.css e copiamo al suo interno il seguente testo
/*
Theme Name: Prima prova di Theme Child
Theme URI: http: //example.com/
Description: Personalizzazione del tema Twenty Eleven
Author: Mario Rossi
Author URI: http://example.com/about/
Template: twentyeleven
Version: 1.0
*/
La maggior parte di questi attributi sono opzionali. E' comunque buona norma compilare tutti i campi, perché renderà più facile riconoscere e ritrovare il nostro tema nell'interfaccia di amministrazione di WP.
Gli attributi che dobbiamo obbligatoriamente specificare sono
- Theme Name: qui mettiamo il nome del tema che vogliamo creare, ad esempio “Prima prova di Theme Child”
- Template: qui mettiamo il tema (già installato) che vogliamo estendere, o meglio usare come base di partenza
Dopo averlo creato, il file style.css conterrà solamente l'intestazione vista sopra, racchiusa tra i simboli /* e */, che indicano l'inizio e la fine di un commento CSS. Questo ci dice che l'intestazione non riguarda l'aspetto del nuovo tema, ma solo la sua definizione: entriamo ora nel vivo dell'argomento iniziando a personalizzare il nuovo tema.
Se siamo esperti di CSS, e vogliamo cambiare ogni dettaglio del tema padre, possiamo definire il file style.css come ci pare e piace. Questo dovrebbe capitare di rado, perché il vantaggio di un theme child è la possibilità di personalizzare qua e là, sfruttando però l'impostazione già esistente (il tema padre). E' più probabile che vorremmo cambiare solo qualche dettaglio, o almeno muovere i primi passi assumendo come default il tema padre. Aggiungiamo quindi la direttiva (subito dopo l'intestazione)
@import url("../twentyeleven/style.css");
che dice al nostro foglio style.css di utilizzare, per default, l'aspetto del tema padre. Ciò offre tra l'altro il vantaggio di potere aggiornare gli aspetti generali del tema figlio quando aggiorniamo il tema padre. Dopo la direttiva import possiamo iniziare ad inserire le nostre regole CSS, ad esempio
.entry-header > .entry-title {
COLOR: green;
}
salviamo il file style.css e impostiamo il nuovo tema, agendo sul pannello Aspetto – Temi di WP. Visualizzando un articolo dovremmo ritrovare il tema familiare Twenty Eleven, ma con i titoli degli articoli in verde. Finché qui tutto facile... l'unica difficoltà dovrebbe essere: come scegliere i selettori (e le proprietà) CSS da modificare? In altre parole: come faccio a sapere che per cambiare il colore del titolo devo modificare la classe CSS entry-title, come nell'esempio qui sopra?
Esistono molte risposte a questa domanda. Se conosciamo bene l'HTML e il CSS ci basterà dare un'occhiata ai templates e al file style.css del tema padre, per capire cosa vogliamo modificare. Oppure potremmo usare uno strumento di debug del browser, come ad esempio il plugin Firebug per Firefox. In ogni caso ricordiamoci che il “dove mettere le mani” dipende dal tema padre, per cui se cambiamo il tema padre dovremo svolgere le nostre indagini da capo. Ad esempio, per cambiare il titolo nel tema Wu Wei, la proprietà da cambiare dovrebbe essere
h1 {
COLOR: green;
}
e non la entry-title come nel caso precedente. Prima di iniziare a lavorare sul theme child è quindi vivamente consigliato scegliere con cura il tema padre, studiarne gli aspetti fondamentali e verificare che faccia davvero al caso nostro. Solamente a questo punto varrà la pena creare un nuovo theme child e dare libero sfogo alla nostra creatività!
