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”
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.
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.
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:
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");
E che sia scritta correttamente, basta un errore in questa riga per far sì che il foglio di stile non venga correttamente visto dal tema, ecco il perchè del sito non formattato.
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.
Vai alla seconda parte del tutorial
Ciao,
ho seguito la tua guida solo che non riesco a capire cosa è che non funziona in modo corretto:
Ho acquistato un tema da themeforest e stò cercando di fare un child theme per poi poter modificare il tema e non avere problemi con aggioramenti del tema ufficiale, come da te riportato.
Ho creato il file style.css dove ho importato con @import url il path assoluto del file css del tema originale .
Il tutto funziona lato backend in wp, ovvero il tema viene visto come child theme, lo attivo, ma lato frontend non vedo il css caricato, tuttavia se spulcio tra il sorgente da frontend del sito, mi riporta il tutto correttamente..ovvero tutti i file css del tema e dei plugin, i js etc etc..insomma mi carica il tema originale ma non me lo formatta.
Sono in locale, quindi non posso darti un url, ma mi puoi consigliare da cosa possa dipendere cortesemente?
grazie.
Ciao Matteo, alcuni temi effettivamente non danno la possibilità di utilizzare i child themes.
Ma prima di dare un giudizio affrettato vorrei capire cosa intendi per path assoluto, dico questo perchè il giusto approccio è il percorso “relativo” del file e non “assoluto”.
Quindi controlla che il percorso sia relativo e riprova l’attivazione del tema.
@import url("../twentyfourteen/style.css");
e non
@import url("http://sitoweb.it/wp-content/themes/twentyfourteen/style.css");
Fammi sapere 😉
Ciao,
come faccio a sapere se un tema possa permettere la creazione di child theme? non è normale che si possa effettuare tale operazione? ho anche io un tema a pagamento, e se creo un child theme come hai mostrato tu, va tutto bene, ma poi non mi carica la grafica del template quando vado frontend a visualizzare il tema. Ma da sorgente file vedo che sono stati importati comunque correttamente tutti i file .css etc, da cosa può dipendere?
Grazie.
Ciao Andrea, ogni sviluppatore dovrebbe seguire le linee guida, proprio per evitare che chi utilizza i loro temi bellissimi, pieni di funzioni e di templates ma, a volte, estremamente complessi e difficili da capire (almeno per la struttura interna), si ritrovino con questi problemi fastidiosi.
Se hai la possibilità, dammi il link al sito, in tal modo posso provare a capirci qualcosa.
Ma il consiglio più spassionato è: rivolgiti al supporto dello sviluppatore, come scrivi tu “anche io un tema a pagamento” e allora sfrutta la situazione, dai valore al denaro che hai speso 😉
Ciao Eugenio
Scrivo per un consiglio: io ho già creato il mio sito web in locale e devo solo procedere a spostarlo online ma, per inesperienza, non ho precedentemente installato il child theme (peraltro presente nei file di download del tema che ho comprato). Posso procedere all’installazione del child theme anche ora che sono alla fine di tutti i passaggi? Se è si, come posso fare?
grazie mille in anticipo e complimenti per il blog 🙂
Ciao Laura, capita o è capitato anche ai più bravi della classe 😉
Detto questo, puoi installare il child theme, tenendo presente che questo non rifletterà le modifiche che hai fatto precedentemente.
L’ideale sarebbe aver preso nota (o ricordarti) delle modifiche fatte e riprodurle: diciamo che se hai cambiato quattro cosette semplici te la cavi, dipende dalle personalizzazioni fatte e se sei in grado di ricostruirle nel child theme.
Spero di essere stato comprensibile, fammi sapere come è andata a finire 🙂
Molto esauriente nella tua risposta…. grazie 1000!