Hai finalmente trovato un tema che ti piace ma desideri modificarlo. Le modifiche sono piuttosto semplici sì, ma cosa succede quando vuoi aggiornare il tema? Vuoi davvero far passare tutti i file di nuovo a caccia delle modifiche? Non desidereresti semplicemente aggiornare con un semplice click e non pensarci più?
WordPress: il Child Theme e il Theme originale Arras
Ecco il modo giusto per modificare il tema e proteggerlo contro eventuali futuri aggiornamenti. E non preoccupatevi, è davvero semplice. Sì, perché ci ha pensato WordPress creando il sistema del Child Theme.
Cos’è un Child Theme
Un WordPress Child Theme è un tema che eredita le funzionalità di un altro tema, chiamato tema principale, e consente di modificarne, o aggiungere, le funzionalità o i fogli di stile.
Come creare un Child Theme personalizzato
1. Creare la struttura
All’interno della cartella wp-content/themes create una nuova directory, nominatela con il nome che volete dare al vostro nuovo tema (per es. noi l’abbiamo chiamata girlgeeklife), create all’interno un file css dal nome style.css, al momento vuoto.
- \
- wp-content
- themes
- arras (la directory del tema principale del nostro esempio, Arras. Deve essere sempre presente, anche se non utilizzata)
- girlgeeklife(la directory del nostro tema figlio; può avere qualsiasi nome)
- style.css (file obbligatorio in un child theme; deve assolutamente chiamarsi style.css)
- themes
- wp-content
Nella cartella del vostro child theme possono essere presenti altri file, nel caso non vi limitiate a modificare il solo foglio di stile:
- style.css (obbligatorio)
- functions.php (facoltativo)
- file legati al Template (facoltativo)
- altri file (facoltativo)
2. Il contenuto del file style.css
style.css è l’unico file richiesto in un child theme. Fornisce tutte le informazioni utili a WordPress a riconoscerlo come child theme, e in questo modo va a sostituire il file style.css del tema principale.
Ecco un esempio di informazioni da inserire nell’intestazione del file style.css di un child theme:
/* Theme Name: Girl Geek Life Theme URI: http: //www.girlgeeklife.com/ Description: Child theme del tema Arras Author: Nome Cognome Author URI: http: //nomecognome.com/about/ Template: arras Version: 0.1.0 */
Dove:
Theme Name. (obbligatorio) Il nome del nuovo tema, qualsiasi.Theme URI. (facoltativo) L’home page del nuovo tema.Description. (facoltativo) La descrizione del nuovo tema, alcune note da aggiungere.!Author URI. (facoltativo) Sito web dell’autore.Author. (facoltativo) Il nome dell’autore.Template. (obbligatorio) il nome della directory del tema principale, case-sensitive.Version. (facoltativo) la versione del nuovo tema.
Questa intestazione all’inizio del nuovo stylesheet è obbligatoria. Tenete poi in considerazione che lo stylesheet del nuovo tema sostituisce completamente il foglio di stile del tema principale. Così se vuoi solo modificare alcune piccole cose è meglio importare il foglio di stile del tema principale e poi aggiungere le tue modifiche. Ecco un esempio:
@import url("../arras/style.css");
Esempio
Il nostro tema principale è Arras. Ci piace tutto di lui tranne il colore del titolo del blog, che vogliamo cambiare da nero a verde. Usando il sistema del child theme lo possiamo fare in tre semplici passaggi (attenzione: il tema Arras, o il tema principale che hai scelto, deve essere già installato, come già scritto sopra):
- Crea una nuova directory in wp-content/themes e chiamala girlgeeklife (o in qualsiasi altra maniera)
- Salva il codice qui sotto in un file dal nome style.css e trascinalo nella nuova directory
- Vai nella Dashboard di WordPress entra nella sezione Themes e attiva il tuo nuovo tema, il Girl Geek Life.
/*
Theme Name: Girl Geek Life
Description: Child theme del tema Arras
Author: Nome Cognome
Template: arras
*/
@import url("../arras/style.css");
#site-title a { color: #009900; }
Il file functions.php
Contrariamente al style.css, il file functions.php di un child theme non sovrascrive il suo corrispondente nel tema principale. Viene caricato in aggiunta al functions.php del tema principale, viene caricato esattamente prima per la precisione.
File legati al Template
I file del template in un tema child si comportano proprio come il file style.css, nel senso che sovrascrivono i loro omonimi del tema principale. Un tema child può ignorare qualsiasi template del tema principale, semplicemente utilizzando un file con lo stesso nome (Nota: index.php può essere sovrascritto solo in WordPress 3.0 e versioni successive).
WordPress: il Child Theme impostato
Altri file
Un child theme può usare qualsiasi tipo di file nello stesso modo in cui lo fanno abitualmente tutti i temi, a condizione che il file sia correttamente collegato. Ad esempio, un tema child può usare le icone e le immagini che sono richiamate dal suo foglio di stile.
Risorse
In questo post ho voluto solo brevemente descrivere i passaggi principali, se hai bisogno di ulteriori informazioni prova a leggere i seguenti post:
- Child Themes – la pagina ufficiale su wordpress.org
- How to Modify WordPress Themes the Smart Way – un post in quattro parti sui child themes
- How to make a child theme for WordPress: A pictorial introduction for beginners – un’introduzione illustrata sui child theme
- Introducing Thirty Ten – una guida su come creare un Twenty Ten Child Theme
E voi, avete mai utilizzato questo sistema? Avete qualche consiglio da aggiungere?
Ciao
che emozione sono la prima ad aver commentato 🙂
Appena posso voglio cimentarmi nella creazione di un child theme, quanto meno per fare esercizio!
tiziana
Brava Tiziana, è molto più difficile da spiegare che da fare.
Molti temi poi, come nel caso di Arras, contengono già al loro interno una cartella templare per costruire un child theme.
Luigina
urca! lo scopro solo ora, dopo aver personalizzato “pesantemente” il tema Arras… ormai il mio default.css è tutto sistemato..e non riuscirei ora a scorporare le mie modifiche 🙁
Domanda: io prima di iniziare a personalizzare la grafica avevo duplicato e rinominato col mio nome TUTTA la cartella del tema Arras: non è corretta come procedura? in questa maniera dunque perdo le segnlazioni degli eventuali aggiornamenti del tema?
Ho trovato solo ora questo articolo, proprio mentre cercavo info su come aggiungere un mio file .css in aggiunta a quelli del tema (per formattare l’hml di alcune pagine in cui mi occorrono stile ad hoc 😉
mi conviene ora impostare un child theme?
come potrei procedere?
se copio tutto il mio default già modificato nel .css del child è ok?
@ BiBi: Cerco di risponderti per punti:
– in questa maniera dunque perdo le segnlazioni degli eventuali aggiornamenti del tema? Sì, perdi le segnalazioni, o comunque la possibilità di aggiornarlo automaticamente (come avviene per esempio per i plugin)
– mi conviene ora impostare un child theme? Sì
– come potrei procedere?
se copio tutto il mio default già modificato nel .css del child è ok? direi di sì
prendi il tuo default.css rinominalo in style.css e inserisci all’inizio l’intestazione come riportato nel post, mettilo in una cartella con il nome che vuoi tu e dovrebbe funzionare. Ovviamente devi aver installato (e non attivato) il tema arras originale.
Spero di essere riuscita a rispondere ai tuoi dubbi.
grazie x risposta, quindi procedo col child!
meglio averlo scoperto oggi che sono ancora in locale !
grazie mille.
ps. la tecnologia spiegata da donne è tutta un’altra cosa 😉
Ho seguito i tuoi consigli e le tue indicazioni ed ho creato un child theme.
Ma come faccio ad utilizzarlo? Cioè, nell’elenco dei temi disponibili che mi mostra WP, c’è il tema padre ma non il figlio…Come faccio a dirgli dui utilizzare il child theme che, tra l’altro, contiene una traduzione in italiano del tema-padre?
@ Gianni: dovresti trovarlo nell’elenco dei temi disponibili se hai fatto tutto correttamente.
Ho aggiornato le immagini del post così puoi notare come deve apparire la pagina principale dell’amministrazione dei temi.
Luigina Foggetti wrote:
Sembra tutto facile, sembra abbia fatto tutto come dovrebbe essere fatto ma non c’è verso di vedere il child theme elencato tra i disponibili nel pannello di amministrazione di WP.
Ho contemporaneamente segnalato il problema qui http://aquoid.com/forum/viewtopic.php?f=4&t=6692 (c’è anche una copia sello style.css che ho fatto ed uno shapshot che dimotra dove l’ho inserito) ma ancora nessuno è riuscito a suggerirmi cosa controllare/modificare/correggere.
@ Gianni: mi viene un dubbio, che il tema da te scelto supporti i child theme. Prova a fare un test utilizzando come tema padre il tema di default, twenty ten, prova con uno stylesheet semplice, solo per vedere se lo trovi nell’elenco.
@ Luigina Foggetti:
Non ci son dubbi: http://aquoid.com/news/themes/suffusion/translating-suffusion/#use-basic
Il tema supporta i child.
Anzi per oral’unico motivo per cui voglio crearne uno è oroprio per tradurlo.
Ho risolto.
Sai qual’era il problema?
Più banale di così non si può: mancava il punto e virgola alla fine dell’ultima rica del css….
@ Gianni: sai che mi era venuto il dubbio? poi ho pensato fosse inutile riaprire il link del forum, sicuramente se ne sarebbero accorti tutti 🙂
Sono passati due anni dall’ultimo commento, spero di non essere troppo in ritardo 🙂
Tutto chiaro per quanto riguardo il foglio di stile. Quello che però temo è la perdita delle modifiche alle immagini.
Mi spiego.
Nella cartella images del tema che utilizzo ho sostituito diverse immagini di default con altre che ho scelto curiosando nel web (le icone dei social network, le frecce per passare da un articolo e l’altro…. etc… etc…). Per conservarle, che tipo di precauzione devo prendere?
Grazie!
La risposta – se ho capito bene la domanda – è nel post:
Altri file
Un child theme può usare qualsiasi tipo di file nello stesso modo in cui lo fanno abitualmente tutti i temi, a condizione che il file sia correttamente collegato. Ad esempio, un tema child può usare le icone e le immagini che sono richiamate dal suo foglio di stile.
Crea una cartella immagini nella cartella del child theme e poi le richiami direttamente dal css
Perfetto. Dovrò quindi creare una cartella del child theme e poi modificare il css (a questo punto il css del child).
Quindi mi confermi che l’aggiornamento del tema aggiorna anche la cartella images?
Grazie!
Esatto, l’aggiornamento del tema automatico coinvolge tutti i file.
Grazie, sei stata davvero gentile.
Mi aspetta un lavoraccio… devo andare a ritrovare tutte le modifiche che ho fatto tempo fa e che, come un genio, non mi sono appuntato.
Gianluca.
Ok. Poi facci sapere
Posso porre una domanda anch’io?
Se voglio modificare alcuni file php o css che risiedono in sottocartelle del tema, dove devo inserire questi file modificati nel tema figlio? Nella cartella principale (dove risiede style.css per intenderci) o devo ricreare la struttura delle cartelle? Ad esempio, se voglio modificare il file “topolino/pippo/minnie.php” devo ricreare nella cartella principale del tema figlio tutte le sottocartelle “topolino/pippo” e in quest’ultima mettere il file minnie.php o basta inserire il file minnie.php nella cartella principale?
Giovanni, devi ricreare la struttura, questo dicono le istruzioni ufficiali.
Nel caso non funzionasse prova a metterlo nella cartella principale, a volte mi è capitato che funzionasse così, ma il fatto era che il tema scelto non supportava perfettamente il child theme.
ciao,
sto per creare un tema child per modificare la dimensione di un font e piccole cose ma mi sorge un dubbio..
se io lavoro sul tema child, quando farò gli aggiornamenti sul tema padre 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, li vedrò anche nel child?
ecco mi piacerebbe sapere come integrare aggiornamenti e modifiche.
grazie!
Ciao Sara.
La risposta alla prima domanda è sì, li vedrai anche nel tema child, questo sistema è stato creato apposta, per avere gli aggiornamenti del tema padre senza perdere la personalizzazione.
È possibile creare un tema child DOPO aver già creato dei contenuti (articoli, pagine, portfolio ecc.) e delle modifiche, per poter usufruire degli upgrade del tema? Se sì, potresti indicarmi una procedura o un testo di riferimento? Thx