Come creare un tema child per Divi
La creazione di un tema child è un ottimo modo per aggiungere personalizzazione avanzata al tema senza doversi preoccupare di cancellare tali modifiche ogni volta che aggiorni il tema. In effetti, se usi Divi, un tema child ha molti vantaggi (vedi il seguente paragrafo).
In questo post invece, ti mostrerò come creare un tema Divi child. La mia speranza è che questo processo sia utile per coloro che hanno appena iniziato con Divi e anche per gli sviluppatori che cercano di pubblicare temi Divi Child completi per i loro clienti. Bene, iniziamo!
Perché avresti bisogno di un tema child per Divi
Divi è un tema WordPress. Ogni volta che è necessario apportare modifiche a qualsiasi tema WordPress, è buona norma creare un tema child che erediti il design e le funzionalità di quel tema principale. Un motivo importante per creare un tema child è conservare le modifiche apportate durante l’aggiornamento del tema principale. Ogni volta che aggiorni Divi, tutti i file del tema vengono aggiornati, quindi se hai apportato modifiche a questi file, tali modifiche verranno cancellate. Invece di modificare direttamente i file dei temi di Divi, puoi creare file di temi aggiuntivi all’interno di un tema child in modo che quando Divi viene aggiornato, quei file di temi secondari rimangono invariati. Pertanto, se prevedi di apportare personalizzazioni avanzate al tuo tema come la modifica dei modelli di pagina e / o l’aggiunta di grandi quantità di CSS / JavaScript e / o l’aggiunta di nuove funzioni, è meglio apportare queste modifiche al tema child senza dover mai toccare i file del tema principale.
È possibile utilizzare Divi senza un tema child?
Sì, è possibile utilizzare Divi senza creare un tema Divi Child, purché si capisca il motivo.
Divi ti consente di aggiungere CSS e codice personalizzati in luoghi come Divi Builder, Theme Customizer e Theme Settings. Se infatti Divi ha persino migliorato la modifica del codice per questo scopo. E questo codice viene conservato durante l’aggiornamento del tema Divi. Quindi, c’è un argomento da sostenere che un tema child non è necessario se un utente sta solo per apportare piccole modifiche. Inoltre, Divi minimizza e memorizza automaticamente nella cache un file CSS statico, quindi non ci saranno problemi con la velocità di caricamento della pagina.
Per semplificarti le cose, lasciami analizzare le circostanze in cui probabilmente dovresti e non dovresti usare un tema Divi Child.
Probabilmente DOVRESTI usare un tema Divi Child se …
- Hai intenzione di apportare modifiche al codice di file di temi specifici (questo include cose come modelli di pagina e functions.php)
- Hai intenzione di aggiungere centinaia di righe di codice (CSS, JavaScript, ecc.). Anche se è possibile aggiungerlo a luoghi come le impostazioni del tema, diventa più difficile da gestire con molti CSS.
- Vuoi collaborare con gli altri e accelerare i tempi di sviluppo mantenendo tutto in uno spazio organizzato.
- Non vuoi che i clienti armeggino nelle impostazioni / personalizzazione del tema e violino il tuo codice. Nasconderlo in un tema child lo manterrà sicuramente al sicuro dagli altri.
Probabilmente NON DOVRESTI usare un tema Divi Child se …
- Hai intenzione di apportare modifiche minori al tema. L’aggiunta di una piccola quantità di CSS (come meno di 100 righe per esempio) o di alcuni script nelle impostazioni del tema / personalizzatore non giustifica la necessità di creare un tema child se questo è TUTTO quello che hai intenzione di fare.
- Non hai intenzione di collaborare con un team. Supponiamo che tu assuma uno sviluppatore per lavorare sul tuo sito, quella persona potrebbe o meno avere familiarità con Divi e ricorre senza dubbio alla creazione di un tema child per apportare modifiche comunque.
- Non ti dispiace che i clienti vedano le modifiche al codice nelle impostazioni / personalizzazione del tema.
Cosa ti serve per creare un tema Divi child
Per creare il tuo tema Divi Child, avrai bisogno di quanto segue:
- Tema Divi installato e attivato
- Editor di testo per modificare i file dei temi. Puoi utilizzare l’editor di testo fornito con Windows o Mac, ma se prevedi di prendere l’abitudine di modificare questi file, ti suggerisco di procurarti un editor di testo più potente come Atom, Sublime, Notepad ++, ecc.
- Client FTP: non è necessario se prevedi di caricare il tema child su WordPress come file zip. Ma se stai tentando di accedere ai file del tema per un sito live, avrai bisogno di un client FTP come FileZilla per poter accedere, modificare, aggiungere o eliminare i file del tema. Se stai lavorando su un’installazione locale, dovresti essere in grado di accedere ai file del tema direttamente sul tuo disco rigido.
- Tazza di caffè o tè (opzionale)
Gli elementi costitutivi di un tema child
Al livello più base, un tema child deve essere costituito da tre cose:
- Una directory (o cartella) del tema child. Come tutti i temi, la cartella del tema child esisterà all’interno della cartella Temi di WordPress che contiene i file del tema child.
- Un file style.css (che verrà utilizzato per memorizzare il CSS del tema child)
- Un file functions.php – Al livello di base questo file conterrà l’azione wp_enqueue_scripts che accoderà il foglio di stile del tema principale (ne parleremo più avanti)
Crea la cartella per il tema secondario (Divi child)
Esistono due modi per aggiungere i file del tema child a WordPress. Puoi aggiungere la cartella del tema child direttamente ai file del tema WordPress (tramite FTP o localmente). Oppure puoi creare una cartella al di fuori di WordPress per essere successivamente zippata e caricata su WordPress come nuovo tema.
Per creare una nuova cartella per il tuo tema child direttamente in WordPress, dovrai accedere ai file del tema che si trovano nella cartella Temi di wordpress (wp-content / themes /). Quindi crea una nuova cartella all’interno della cartella dei temi e assegnagli il nome “divi-child”. Quindi la nuova directory del tema child sarà wp-content / themes / divi-child.
Ma se stai creando una cartella del tema child da comprimere e caricare in WordPress in un secondo momento, puoi semplicemente creare una nuova cartella sul tuo computer e darle il nome “divi-child”.
Crea il tuo file Style.css del tema child per aggiungere CSS personalizzato
/*
Nome del tema: Divi Child
URL del tema: https://www.elegantthemes.com/gallery/divi/
Descrizione: Divi Child Theme
Autore: Elegant Themes
URL Autore: https://www.elegantthemes.com
Template: Divi
Version: 1.0.0
*/
/* =La personalizzazione del tema comincia qui
——————————————————- */
Crea il file Functions.php
Ora che abbiamo il nostro file style.css per il nostro tema child, dobbiamo assicurarci di non tralasciare completamente lo stile già presente all’interno di Divi (il tema principale). Ciò significa che dovremo assicurarci di utilizzare prima il foglio di stile principale di Divi e poi introdurre il nostro nuovo foglio di stile. Questo ordine è importante perché se hai familiarità con i CSS, il codice che inserisci in basso avrà sempre la precedenza sul codice in alto. Quindi, nel nostro caso, vogliamo che il codice del foglio di stile genitore venga caricato per primo e poi il codice del foglio di stile child per ultimo.
Per fare ciò, dobbiamo accodare il foglio di stile del tema principale (Divi). Enqueue è una parola stravagante che letteralmente significa “aggiungi a una coda”, quindi in questo caso stiamo aggiungendo il foglio di stile principale da mettere in coda prima del foglio di stile del tema child. In altre parole, qualsiasi cosa aggiungiamo al nostro foglio di stile del tema child aggiungerà e sostituirà il tema principale.
Divi è ottimizzato per WordPress
Da quando Divi è stato lanciato per la prima volta, è stato impostato per aderire al modo originale consigliato da WordPress di impostare un tema child. Questo metodo originale di creazione di temi child implicava l’esecuzione di un’importazione CSS @ del foglio di stile del tema principale dall’interno del file style.css del tema child. Molti temi sono ancora impostati in questo modo, lasciando al tema child il semplice compito di definire il proprio style.css e @import -ing Divi’s style.css e Divi caricherà automaticamente quel file. Funziona con Divi che utilizza la funzione get_stylesheet_directory_uri () quando accoda il foglio di stile principale. Ciò significa che Divi è impostato per richiamare il proprio foglio di stile o il foglio di stile del tema child (a seconda di quale sia attivo). Fondamentalmente, con get_stylesheet_directory_uri (), se hai attivato un tema child, WordPress restituirà l’uri alla directory del tema child piuttosto che alla directory del tema principale.
Ora che WordPress ha aggiornato il suo modo consigliato di affrontare questo problema, puoi ancora impostare facilmente gli stili per il tuo tema child Divi. Tutto quello che devi fare è accodare esplicitamente style.css principale di Divi, poiché Divi è già impostato per accodare style.css del tema child.
Per fare ciò, dovremo utilizzare il nostro editor di testo per creare un altro file all’interno della cartella del tema child. Salvare il file con il nome functions.php (il nome deve essere esattamente questo) e quindi aggiungere il seguente codice nel file:
function my_theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
Quindi salva il file.
Questo codice è specifico per Divi ed è una versione modificata del metodo proposto dal Codex di WordPress.
Suggerimento: non è necessario il tag di chiusura PHP. I documenti PHP come questo dovrebbero sempre iniziare con un tag php aperto (il codice non funzionerà senza di esso). Tuttavia, è buona norma NON includere il tag di chiusura php. Ciò assicurerà che nessuno dei tuoi codici php venga tagliato da un tag di chiusura fuori posto o crei spazi indesiderati bizzarri che potrebbero rompere il tuo codice quando cerchi di includerlo.
A proposito, non è necessario comprendere il funzionamento interno di questo codice php perché funzioni (ovviamente). Quindi, se sei completamente confuso, non preoccuparti. Puoi semplicemente copiare e incollare il codice sopra nel file functions.php del tuo tema child e chiudere.
Crea la thumbnail per il tema del tuo child Divi (opzionale)
WordPress ti consente di fornire una miniatura da utilizzare come screenshot del tema o immagine del marchio per il tuo tema quando lo visualizzi nella dashboard di WordPress.
Per creare una miniatura per il tema child, crea prima un’immagine (WP consiglia una dimensione di 1200 px di larghezza per 900 px di altezza) e salvala con il nome del file screenshot.png (il nome del file deve essere esattamente questo in modo che WP lo riconosca). Quindi aggiungilo alla cartella del tema child accanto ai due file già presenti.
Ecco una thumbnail di Divi Child che ho creato:
Ecco i tre file che la cartella del tema child dovrebbe avere:
Carica e attiva il tema child
Dopo aver creato la cartella del tema child, il file style.css e il file functions.php, il tema child è pronto per il caricamento e l’attivazione.
A questo punto, assicurati che il tuo tema Divi sia stato caricato in modo che il tuo tema child funzioni dopo l’attivazione.
Se hai aggiunto la cartella ei file del tema child direttamente alla directory Temi di WordPress, non è necessario caricare il tema su WordPress. È già lì. Tutto quello che devi fare è andare sulla dashboard di WordPress e accedere a Aspetto> Tema, passare con il mouse sul tema child e fare clic sul pulsante Attiva.
Se hai semplicemente creato la cartella ei file del tema child sul tuo computer, dovrai prima comprimerli (ZIP) in modo che siano nel formato corretto per il caricamento su WordPress. Mac e Windows hanno entrambi la funzionalità ZIP nativa. Una volta compresso, caricare e attivare un tema child non è diverso da un tema normale, basta caricarlo tramite la pagina Aspetti> Temi nella dashboard di WordPress e attivarlo.
Per verificare se il tema child funziona correttamente, aggiungi alcuni CSS nel file style.css del tema child e salva le modifiche. Dovresti vedere questi cambiamenti sul sito live. Potrebbe essere necessario aprire la pagina in un browser privato nel caso sia memorizzata nella cache.
Modifica del file Functions.php di Divi
Il file Functions.php è dove sono archiviate le funzioni principali di Divi. Per aggiungere funzioni personalizzate per il nostro tema child, abbiamo creato un file functions.php nella nostra cartella del tema child. Tuttavia, questo file non sovrascriverà completamente le funzioni del tema principale. Aggiungerà nuove funzioni in modo molto simile al file style.css per il foglio di stile principale.
Poiché si tratta di un file php, è importante che tutto il codice php sia racchiuso nei tag php appropriati. Ma poiché avrai già aggiunto e modificato il file functions.php durante la creazione del tema child, puoi aggiungere qualsiasi nuova funzione direttamente dopo il codice già presente.
function my_theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );//add new code here
Modifica dei file template di Divi
Non sei limitato a modificare solo i file style.css e functions.php. Puoi aggiungere e modificare qualsiasi file del tema principale, inclusi file modello o file PHP. Qui è dove puoi ristrutturare completamente e adattare qualsiasi parte del tuo tema (fallo con grande cura). A differenza della modifica di functions.php, i file modello devono essere sostituiti interamente con uno nuovo. Questo perché il file originale del tema principale (Divi) viene ignorato e viene utilizzato quello nuovo. Per modificare un file modello, è necessario prima replicare il vecchio file prima di iniziare a modificarlo. Per fare ciò, copia semplicemente (non taglia!) E incolla il file originale del tema nella cartella del tema child assicurandoti che il nome del file e la posizione siano esattamente gli stessi. Ad esempio, se vogliamo modificare Divi / includes / navigation.php, allora dovremmo copiare e incollare questo file in divi-child / includes / navigation.php.
Finché il nome e la posizione sono esattamente gli stessi del tema principale, WordPress utilizzerà il file del tema child al posto di quello vecchio.
Migrazione del codice / CSS personalizzato corrente al nuovo tema child
Dopo aver creato il tuo tema Divi Child, assicurati che tutto sia in un unico posto. Quindi, se hai già CSS personalizzato o codice aggiunto a Divi, lo migrerai sul tuo tema child. Ad esempio, se hai un CSS personalizzato in Divi> Personalizzatore tema> CSS aggiuntivo, tutto ciò che devi fare è spostare (tagliare e incollare) il CSS nel file style.css del tema child.
Migrazione del codice / CSS personalizzato corrente al nuovo tema child
Aggiornamento del tema del bambino
Divi e WordPress migliorano e si adattano continuamente. Quindi, potrebbe arrivare un momento (dopo molti aggiornamenti Divi) in cui alcuni dei file dei temi di Divi cambieranno. E, se hai un tema child che sovrascrive il file che è stato modificato, il tema child potrebbe interrompersi in qualche modo. Questo perché stai utilizzando codice obsoleto all’interno del tema child e deve essere aggiornato per corrispondere al nuovo codice utilizzato da Divi. Quindi, se utilizzi un child theme da un po ‘di tempo e le cose iniziano a non funzionare, potresti dover aggiornare il codice.
Considerazioni finali
Sono sicuro che esistono diversi modi efficaci per creare un child theme. Ma poiché molti temi WordPress sono impostati in modo diverso, ho pensato che sarebbe stato più utile concentrarsi sulla creazione di un tema child specifico per il tema Divi. Per gli sviluppatori, potrebbe essere utile conoscere le migliori pratiche per accodare i fogli di stile padre e child per ottenere prestazioni migliori. Per i neofiti, non devi necessariamente capire come funziona tutto per creare un tema child con questo tutorial o con un plug-in, e anche questo va bene. E potresti arrivare a capire che un tema child non è necessario perché le impostazioni di stile integrate di Divi sono tutto ciò di cui hai bisogno Indipendentemente da ciò, spero che questo post ti serva bene.
Non vedo l’ora di leggere i vostri commenti e rispondere a dubbi o perplessitá.
