Come creare un tema figlio per la vetrina di WooCommerce

Ultimo aggiornamento - 5 marzo 2021

Un tema figlio è una modifica di un tema esistente mantenendone lo stile e le funzioni di base. Il tema originale è chiamato tema padre e quello nuovo modificato è chiamato tema figlio. Creare il tuo tema figlio WooCommerce Storefront è un buon modo per personalizzare il tuo negozio senza acquistare un nuovo tema.

Ottieni la vetrina WooCommerce!

Tema bambino: una panoramica

Come accennato nell'introduzione, un tema figlio utilizzerà il tema principale come base e conferirà funzionalità aggiuntive al tema. Spesso questa è una buona opzione quando vuoi apportare variazioni per un tema. Nella directory dei temi figlio di Storefront, puoi trovare una buona gamma di temi figlio premium adatti a vari settori e tipi di prodotto. In questo modo puoi creare facilmente il tuo tema figlio per Storefront.

Vantaggi dell'utilizzo di un tema figlio

La modifica diretta di un tema comporta il rischio di perdere le modifiche durante l'aggiornamento. Un tema figlio garantisce che le modifiche vengano mantenute intatte. Nel complesso, lo sviluppo di un tema figlio è un processo più rapido rispetto alla creazione di un tema nuovo. Inoltre, per coloro che sono interessati allo sviluppo di temi WordPress , creare un tema figlio è un ottimo modo per sperimentare e imparare.

Ecco alcuni dei vantaggi nella creazione di un tema figlio:

• Aiuta a creare diverse varianti per lo stesso tema per adattarsi a domini diversi.
• Può salvare le personalizzazioni del design separatamente senza modificare il tema principale.
• Le personalizzazioni possono essere conservate anche dopo l'aggiornamento del tema principale o dei file core di WordPress o WooCommerce.

Creazione di un tema figlio WooCommerce Storefront

È consigliabile avere un backup adeguato del tuo sito prima di tentare di personalizzare un tema. Hai bisogno dell'accesso FTP al tuo host per caricare il nuovo tema figlio.

Per avviare il processo, crea un file style.css per il tema figlio con il seguente codice di esempio fornito in WooCommerce Docs.

Quindi, cambia il campo del modello in modo che punti a Storefront.

Una differenza che potresti aver notato qui è che con Storefront non è necessario il passaggio di accodamento seguito durante la creazione di un tema figlio per il tema ventiquindici. Quando crei un tema figlio utilizzando Storefront, hai solo bisogno di un file function.php vuoto e di un file style.css per avviare il processo.

Puoi semplicemente trasferire il file in una cartella del tema figlio, creare un file zip e caricarlo. Fatto ciò, attiva il nuovo tema figlio da Aspetto > Temi .

Puoi anche caricare il tema figlio tramite FTP, se hai accesso al tuo servizio di hosting. Puoi usare un programma FTP come FileZilla.

I migliori client FTP per Mac e Windows.

Ora puoi personalizzare aggiungendo codici al foglio di stile del tema figlio e ai file modello. Ad esempio, puoi copiare qualsiasi file modello dalla cartella del tema di Storefront alla cartella del tema figlio. Questo file nella cartella del tema figlio può essere personalizzato modificando il codice secondo le tue esigenze.

Come personalizzare il design e la funzionalità di un tema figlio?

Con le impostazioni di cui sopra, hai creato un tema figlio per Storefront. Tuttavia, non ci sono ancora proprietà personalizzate per il tuo tema. Puoi aggiungere funzionalità e personalizzazioni del design al tuo tema figlio senza modificare il tema principale.

Modifiche al design

Ad esempio, nel foglio di stile sopra che hai creato per il tema figlio, puoi personalizzare il colore per il titolo del sito con il codice seguente:
.site-branding h1 a {
color: red;
}

Modifiche ai modelli

Puoi anche modificare i file modello (*.php) nella cartella del tema. Ad esempio, puoi modificare un codice specifico copiando header.php dalla cartella del tema principale wp-content/themes/storefront/header.php nella cartella del tema figlio wp-content/themes/storefront-child/header.php.

Una volta eseguita la copia, puoi modificare header.php e personalizzare qualsiasi codice secondo le tue esigenze. L'header.php nel tema figlio verrà utilizzato al posto dell'header.php del tema genitore.

Puoi anche apportare modifiche ai modelli WooCommerce in questo modo. Crea semplicemente una nuova cartella nel tema del tuo bambino e chiamala "WooCommerce". Qui puoi apportare modifiche ai modelli WooCommerce per allinearli al design del tuo sito.

Questa documentazione di WooCommerce ti aiuterà a capire di più sulla struttura del modello di WooCommerce.

Funzionalità di personalizzazione

Quando crei un tema figlio, vorresti che avesse anche funzionalità personalizzate. Per questo, devi prima assicurarti che il tuo file functions.php sia vuoto e non contenga alcuna informazione dal file functions.php del genitore. Ora, se una funzione specifica nella funzione del tema principale è collegabile (avvolta in un'istruzione if condizionale), sarai in grado di copiarla nel temi figlio functions.php. Dopo aver copiato una funzione collegabile, è possibile apportare le modifiche necessarie. Di seguito è riportato un esempio per una funzione collegabile:
if (!function_exists("parent_function_name")) {
parent_function_name() {
...
}
}

Creazione di un tema figlio generale

Il processo di creazione di un tema figlio è diverso e più semplice con Storefront rispetto ad altri temi. In questo articolo, esamineremo anche i dettagli di base del metodo generale.

Il primo passo è creare una directory di temi. Quindi, crea un foglio di stile (file style.css) per il tema figlio. WooCommerce consiglia di creare un file functions.php, utile per accodare correttamente gli stili.

Creazione di un tema figlio generale

Il processo di creazione di un tema figlio è diverso e più semplice in vetrina rispetto ad altri temi. In questo articolo, esamineremo anche i dettagli di base del metodo generale.

Il primo passo è creare una directory di temi. Quindi, crea un foglio di stile (file style.css) per il tema figlio. WooCommerce consiglia di creare un file functions.php, utile per accodare correttamente gli stili.

Creazione di una directory del tema figlio

Crea e posiziona la directory del tema figlio in wp-content/themes. Si suggerisce di aggiungere il nome della directory del tema figlio con '-child', sebbene non obbligatorio. È necessario prestare attenzione a non lasciare spazi nel nome della directory del tema figlio per evitare problemi.

Creazione del foglio di stile del tema figlio

Crea un'intestazione del foglio di stile per avviare il processo. Di seguito è riportato un esempio del codice WordPress di un'intestazione di foglio di stile creata per un tema figlio basato sul tema Twenty Fifteen.

Durante la creazione di un tema figlio, puoi utilizzare questo testo di esempio come punto di riferimento e sostituirlo con dettagli rilevanti per il tuo tema. La riga Modello fornisce il nome della directory del tema principale. Devi regolarlo in base al tema con cui stai lavorando.

Accodamento dei temi padre e figlio

Crea un file functions.php nella directory dei temi figlio per accodare i temi padre e figlio. Accoda il foglio di stile del tema principale aggiungendo un'azione wp_enqueue_scripts e utilizzando wp_enqueue_style() nel function.php del tema figlio. Apri il function.php del tuo tema figlio con un tag PHP (<?php). Quindi, accoda i fogli di stile del tema genitore e figlio. Sotto lo screenshot c'è un esempio che funzionerà solo se il tuo tema principale utilizza un file .css per contenere il CSS. Se è presente più di un file .css, come style.css, main.css, ie.css, assicurati di mantenere tutte le dipendenze del tema principale. Un buon livello di conoscenza del codice è chiaramente un fattore importante per farlo bene la prima volta.

Devi anche accodare il codice CSS effettivo nel tuo tema figlio style.css. Per assicurarti che il foglio di stile del tema figlio venga caricato dopo il foglio di stile padre, puoi impostare lo stile genitore come dipendenza. Inoltre, includi il numero di versione del tema figlio per assicurarti di poter interrompere la cache anche per il tuo tema figlio. L'esempio consigliato nel Codex è il seguente:

Attivazione del tema figlio

Crea un file zip della cartella del tuo tema figlio e caricalo navigando in Aspetto → Temi → Aggiungi nuovo tema .

Ora il nuovo tema figlio sarà visibile nell'elenco dei temi.

Puoi attivare il nuovo tema figlio ora facendo clic sul pulsante Attiva .

• Scarica subito il tema Storefront.
• Leggi di più sui temi figlio di WordPress Codex.

Puoi anche scaricare un tema figlio di esempio da questo link WooCommerce per saperne di più. Oppure leggi alcuni dei nostri articoli correlati:

1. Come scegliere il tema giusto per il tuo negozio WooCommerce?
2. Come installare e configurare Storefront?
3. Ultime tendenze nei temi WooCommerce.