WordPress: creare un child theme

Hai appena installato WordPress nel tuo spazio hosting, hai scelto un tema che ti piace e si adatta perfettamente alle caratteristiche del sito che ti appresti a sviluppare.

Cominci a fare delle modifiche:

cambi il font

inserisci una bella immagine di sfondo

modifichi la paginazione del blog

Insomma, il tema era molto vicino alle tue aspettative ma non era esattamente come lo volevi ma adesso è perfetto in tutto.

Domani il tema viene aggiornato dallo sviluppatore (perché lo ha migliorato con nuove funzioni, ha cambiato la sidebar o per renderlo compatibile all’ultima versione di WordPress).

Vai sulla Dashboard e noti l’avviso di aggiornamento, fai clic per aggiornare il tema:

con questo clic hai fatto un disastro.

Hai appena cancellato tutte le modifiche che, con tanta fatica, avevi apportato al tema.

E adesso?

Se avevi fatto un backup dei file modificati hai la possibilità di riprendere le fila della situazione e riapportare le modifiche, in caso contrario dovrai lavorarci su come se non le avessi mai apportate.

Non è la strada giusta, neanche un po’.

Che cos’è un child theme?

L’ancora di salvezza al disastro di cui scrivevo prima.

Non è altro che un tema “figlio” dell’originale in cui apportare le modifiche che preferiamo evitando, così, di rovinare il tema padre (o “genitore”).

E’ semplice da realizzare

1) Crea una nuova cartella all’interno della directory wp-content/themes della tua installazione

2) Chiamala con il nome che preferisci, io la chiamerò Child Theme

3) Crea un file all’interno della cartella creata e chiamalo “style.css”

Crea una cartella con il tuo child theme.

Il child theme è stato creato, infatti il foglio di stile appena inserito nella cartella è l’unico file necessario, manca un dettaglio, dobbiamo aggiungere alcune righe di codice per farlo funzionare:

/*
 Theme Name:   Child Theme
 Theme URI:    http://ilvostrosito.com
 Description:  Tema child per Twentyfourteen
 Author:       Il tuo nome
 Author URI:   http://sito.com
 Template:     twentyfourteen
 Version:      0.1
*/

@import url("../twentyfourteen/style.css");
-------------------------------------------------------------- */

Le righe che avete appena aggiunto al foglio di stile servono a WordPress per identificare il tema, alcuni potete anche non scriverli, l’indirizzo del vostro sito, ad esempio o la versione non sono necessari ma come vedrete verranno visualizzati tra i dettagli del tema.

Chiaramente, se il tema “padre” che utilizzate è diverso da Twentyfourteen dovete adattare le informazioni adeguatamente.

Adesso, se avete seguito le indicazioni, andate alla Bacheca di WordPress e cliccate su Aspetto -> Temi.

Fra i temi disponibili ci sarà un nuovo tema, il vostro tema.

Fra i temi di sponibili c’è anche il tuo.

Complimenti, avete creato un child theme del  tema Twentyfourteen.

Se cliccate sull’anteprima del child theme vedrete i dettagli che non sono altro che quelle righe che avete scritto nel file style.css.

L’anteprima del child theme.

Manca ancora qualche dettaglio:

come avrete notato non si vede l’immagine che rappresenta il tema, la miniatura del tema, come per gli altri.
Dobbiamo, infatti crearla.
Si tratta di un’immagine in formato PNG dalle dimensioni di 880 x 660, per crearla ci basta uno screenshot del nostro tema ridimensionato o un’immagine qualsiasi che rispetti questi parametri.

Quando inserirete l’immagine all’interno della cartella (wp-content/themes/childtheme/screenshot.png) questo sarà il risultato:

L’anteprima del child theme con la miniatura.

E’ venuto il momento di inaugurare il nostro child theme:

Aspetto -> Temi  e clic su Dettagli del tema del vostro child theme.
Avete diverse opzioni:

Attiva: il vostro tema sarà immediatamente attivato e si rifletterà immediatamente sull’aspetto del sito.

Anteprima: con questa opzione potete vedere come sarà il vostro sito prima di attivarlo.

Cancella: se non avete ancora le idee chiare o ci avete ripensato cliccate qui e tornerete alla Bacheca di WordPress.

Se avete seguito tutto il tutorial, attivando il vostro child theme il vostro sito avrà lo stesso aspetto del tema “padre” (nel mio caso Twentyfourteen, il nuovo tema di default di WordPress).

Se vedete, invece, il sito non formattato controllate che all’interno di “style.css” del child theme vi sia questa riga:

@import url("../twentyfourteen/style.css");

Da ora in poi, quando effettuerete una modifica al CSS del child theme si rifletterà sull’aspetto del sito senza bisogno di toccare il tema “padre”.
Quando sarà disponibile una nuova versione del tema potrete aggiornare senza problemi, le modifiche che avete apportato al child theme resteranno intatte.

In questo tutorial ho solamente accennato alle potenzialità di un child theme, infatti oltre al foglio di stile (unico file necessario per attivarlo) possiamo aggiungerne altri, il file functions.php ad esempio può aggiungere tutte le funzionalità che ci servono, possiamo aggiungere dei nuovi template di pagina, etc.

Nei priossimi giorni scriverò la seconda parte del tutorial in cui spiegherò tutte le potenzialità dei child theme.