Temi child WordPress: cosa sono, come funzionano e come crearne uno

Un tema child (tema figlio)  è un tema che acquisisce tutte le funzionalità di un altro tema, detto tema padre.

Perchè è così importante un tema child?

Perchè consente di modificare, aggiungere, eliminare delle funzioni o delle parti di un tema, senza andare a modificare i file del tema padre. Questo è molto importante nel caso utilizzi un tema a pagamento, o comunque un tema che è soggetto ad aggiornamenti, che è sempre bene fare per avere una maggiore sicurezza (spesso vengono corretti errori di sicurezza del tema) e per poter accedere a nuove funzionalità del tema stesso.

Ma cosa succede se modifichi un tema e poi lo aggiorni (magari senza aver fatto il backup)?

Ti uccidi. Perdi tutte le modifiche che hai fatto, ore ed ore del tuo lavoro buttate in cambio di nuove funzionalità e maggior sicurezza… ne vale davvero la pena?

I temi child servono proprio per avere la possibilità di mantenere le personalizzazioni che hai apportato al tema e contemporaneamente avere la possibilità di aggiornare il tema padre accedendo alle nuove funzionalità ed a migliorarne la sicurezza. Strepitoso.

Come creare un tema child

É possibile creare un tema child per qualsiasi tema ed è molto semplice e veloce, al contrario di quello che si possa immaginare.

Prenderò come esempio il tema di default di WordPress, il tema Twenty Eleven. Per creare il tema child di un altro tema, basta che segui i passaggi successivi e sostituisci il nome twentyeleven e Twenty Eleven con il nome del tuo tema, ad esempio con robertoiacono e Roberto Iacono.

Sei pronto? Cominciamo.

Crea sul tuo desktop (o dove vuoi te) una cartella per il tema child, ad esempio twentyeleven-child. Crea un nuovo file con il blocco note ed incolla il seguente codice:

[css]/*
Theme Name:     Twenty Eleven Child
Theme URI:      https://www.robertoiacono.it/
Description:    Tema Child per Twenty Eleven
Author:         Roberto Iacono
Template:       twentyeleven
Version:        0.1
*/[/css]

Questi codici servono per dare a WordPress le informazioni del tema che verranno visualizzate in Aspetto > Temi >.

• Theme Name: obbligatorio, è il nome del tema
• Theme URI: l’URL della pagina web del tema (se esiste)
• Description: la descrizione del tema
• Author: l’URL del sito dell’autore
• Template: obbligatorio, è il nome della cartella del tema padre, è case sensitive (distingue tra maiuscole e minuscole)
• Version: versione del tema child (fa molto figo)

Queste sono le informazioni principali, ma è possibile aggiungerne molte altre.

Ora inizia la vera parte di definizione dello stile del tema, quindi entra in gioco il CSS, ma non ti spaventare :). Aggiungi al file questo codice:

[css]
@import url("../twentyeleven/style.css");
[/css]

Con questa istruzione dici a WordPress di importare tutto il contenuto del file style.css del tema padre, quindi tutto lo stile del tema originale. É importante non inserire nient’altro tra questo codice e quello precedente, altrimenti non funzionerà.

Così per fare un piccolo test visuale, modifica il colore dello sfondo e del titolo, aggiungi al file questo codice:

[css]
body {
background-color:#1d1e1d;
}

#site-title a{
color: #f00;
}[/css]

Alla fine di questi semplici passaggi, dovresti ottenere questo file:

[css]/*
Theme Name:     Twenty Eleven Child
Theme URI:      https://www.robertoiacono.it/
Description:    Tema Child per Twenty Eleven
Author:         Roberto Iacono
Template:       twentyeleven
Version: 0.1
*/

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

body {
background-color:#1d1e1d;
}

#site-title a{
color: #f00;
}[/css]

Ora salva il file all’interno della cartella twentyeleven-child e chiamalo style.css.

Copia l’intera cartella sul tuo spazio web via FTP (oppure puoi testarlo in locale) nel percorso wp-content/themes/ . Da notare che non va inserito come sottocartella della cartella twentyeleven, bensì va aggiunto solamente in wp-content/themes/.

Attiva il tema child

Vai su Aspetto > Temi > e cerca il tema dal nome Twenty Eleven child che al momento non dispone di nessuna immagine di anteprima. Se la vuoi aggiungere, è possibile creare e salvare all’interno della cartella twentyeleven-child un’immagine di dimensioni 330 x 225 pixel e di nome screenshot.png.

Clicca su Attiva e vai a vedere come appare il sito ora, dovresti avere lo stesso sito di prima, solamente con lo sfondo grigio scuro ed il  titolo rosso.

Sei pronto a smanettare?

Il tema child ora è una copia identica del tema padre (con la piccola variazione del colore del titolo e dello sfondo, così sai che funziona). Ha tutte le sue funzioni e le sue impostazioni, e non aspetta altro che essere personalizzato come si deve.

Ogni variazione di stile (colori, dimensioni testo, immagini e quant’altro) che vorrai fare, andrà fatta sul file style.css del tema child, non su quello del tema padre, altrimenti al prossimo aggiornamento del tema padre perderai tutto.

Ogni variazione che apporterai sul file style.css del tema child, sovrascriverà un’eventuale istruzione analoga del tema padre. É proprio ciò che hai fatto per modificare il colore del titolo e dello sfondo.

É possibile modificare i file del template, ovvero index.php, single.php e tutti gli altri. In questo caso, i file del tema child hanno una priorità maggiore rispetto ai file del tema padre con lo stesso nome. Se due file hanno lo stesso nome (es. index.php) verrà eseguito solamente il file del tema child.

Ad esempio, puoi copiare il file index.php (solitamente questo file viene utilizzato per mostrare il contenuto dell’homepage) del tema padre ed incollarlo nella cartella del tema child.  Se provi a modificare il file index.php nella cartella del tema child, vedrai apparire le nuove modifiche. Al prossimo aggiornamento del tema padre, queste modifiche rimarranno attive! (perchè il tema child non viene toccato)

Per il file functions.php (che gestisce le funzioni del tema) invece il discorso è leggermente diverso. Il file functions.php del tema child non verrà caricato al posto del file functions.php del tema padre, bensì verrà caricato prima di quello del padre. In questo modo è possibile gestire in maniera intelligente anche le funzioni del tema padre. Se utilizzi una funzione uguale a quella presente nel tema padre, allora quella child avrà la precedenza (verrà eseguita solo quella).

Utilizza sempre il file functions.php del tema child per aggiungere nuove funzioni.

Per includere dei file che si trovano all’interno della cartella del tema child, utilizza l’istruzione:

[php]include ( get_stylesheet_directory(). ‘/file_da_includere.php’ );[/php]

Modifica attraverso l’editor di WordPress

Se vai su Aspetto > Editor > vedrai il file style.css del tema child, ma anche tutti i file di template del tema padre. Fai sempre molta attenzione e modificare i file tramite l’editor di WordPress, devi essere sicuro a che tema appartiene (child o padre) il file che stai modificando, altrimenti perderai tutto il lavoro al successivo aggiornamento.

Ripeto, se vuoi modificare i file di template, copiali nella cartella del tema child e modificali da lì.

Hai altri suggerimenti da dare? Cosa ne pensi di questi temi child?