Cosa è un Child Theme?
Un child theme (tema figlio) essenzialmente è un insieme di file collegato ad un parent theme (tema genitore). Questo permette di effettuare modifiche, aggiungere del codice o CSS su un tema che, ereditando tutto dal parent theme, vengono applicate al tema senza intaccare l’integrità del tema originale. Quindi creando ed attivando un child theme basato su Divi appare e funziona esattamente come Divi. Saranno disponibili le stesse opzioni, lo stesso designer e tutti i moduli, insomma sarà tutto identico.
Se effettuiamo delle aggiunte o modifiche al child theme il Divi parent rimarrà sempre fedele la tema Divi originale.
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” hover_enabled=”0″ sticky_enabled=”0″]Perché usare un child theme?
I benefici sono proprio nel fatto che il nostro codice PHP, Javascript o CSS styles verrà applicato SOPRA il tema originale.
Se queste modifiche le applicassimo direttamente al tema originale, quando questo viene aggiornato portebbero essere, anzi nella maggior parte dei casi sono, perse! Quando si aggiornare il tema.
Quindi il motivo principale è che usando un tema child non viene modificato nulla del tema principale che, una volta aggiornato trasmtterà le sue modifiche al child theme mantenendoci sopra quelle fatte da voi senza alcuna perdita.
Possiamo immaginarlo come una seconda pelle che viene applicata automaticamente sul tema originale.
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” hover_enabled=”0″ sticky_enabled=”0″]Come si crea un Child Theme in WordPress?
E’ molto semplice, si devono considerare questi tre file:
style.css – È il CSS stylesheet principale per il vostro child theme. Contiene i dettagli del parent theme su cui si basa il child theme e, per le stesse definizioni, avrà la precedenza oppure aggiungerà quelle in più che avete scritto.
functions.php – È necessario per caricare e far funzionare il child theme e per caricare i file di codice eventualmente aggiunti.
Screenshot.jpg – È una immagine utilizzata per rappresentare il child theme. È l’immagine che si vede nel menu available themes di WordPress. Non è necessaria e, se non è specificata viene utilizzata la stessa immagine del parent theme. È comunque utile e non richiede un grosso sforzo usarne una diversa per distinguere visivamente i due temi.
Questi sono quelli che dovremo mettere nel nosrto child theme e per farlo di dovrà creare un nuovo folder sotto la directory /wp-content/themes/ con il nome del nostro tema.
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” hover_enabled=”0″ sticky_enabled=”0″]
Vediamo passo passo come fare:
- Decidiamo il nome del nostro child theme. – Qui usiamo il nome Divi_I2E
- Definiamo il folder dove mettere il child theme. – nel nostro caso andremo ad utilizzare i seguenti comandi dando per assodato che wordpress è nella directory
/var/www/wordpress
Voi sostituitela con quella della vostra installazione.mkdir /var/www/wordpress/Divi_I2E
Attenzione: verificate con che utente lo fate in modo che il folder creato abbia la stessa onwership e autorizzazioni degli altri temi. - Creiamo un nuovo style.css file. – dentro la directory appena creata definiamo un nuovo file style.css che avrà questo contenuto:
/* Theme Name: Divi_I2E Theme URI: {Your website address or a link to where people can download the theme} Description: {A Description of your theme} Author: {Your Name or your Company Name} Author URI: {Your website address} Template: Divi Version: {version number, e.g. 1.0.0} */Le uniche parti fondamentali sono il Theme Name, dove abbiamo messo il nome deciso al punto 1, e la Template che deve essere il nome esatto del tema su cui si basa il child. Per gli altri campi potete scrivere quello che preferite.
- Creiamo un nuovo functions.php file. – Sempre all’interno della directory appena definita creiamo il file con questo contenuto:
<!--?php
function load_child_theme_stylesheet() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'load_child_theme_stylesheet' ); - Creiamo un’immagine per il Child Theme.
Come detto prima, questa parte non è necessaria. Però aiuta visivamente per gestire il nostro sito identificare chiaramente il tema che abbiamo creato come dipendente di quello principale. Nel nostro caso useremo questa immagine:
L’immagine si deve chiamare screenshot.jpg or screenshot.png con un rapporto di 4:3. WordPress consiglia di fare un’immagine di 1200px di larghezza e 900px d’altezza.
[/et_pb_text][et_pb_text _builder_version=”4.9.10″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″]
Attivare il Child Theme
Se i precedenti passi sono andati tutti come previsto, dovreste vedere il vostro nuovo tema nell’area Admin e poter attivarlo.
1) Andate su Appearance > Themes
2) Con i lmouse posizionatevi sopra il vostro tema
3) Fste un click su ACTIVATE
Volede usare un modo più semplice?
È preferibile usare un po’ la linea comandi piuttosto che appoggiarsi ad un plugin anche per le coes più semplici. Ma se non avete confidenza con la consol in SSH sul vostro sito, ovviamente esistono dei plugin che fanno questo. Potete sbizzarrirvi tra questi:
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]
