Come creare e personalizzare un tema figlio

Se desideri apportare modifiche al tema del tuo sito WordPress, probabilmente hai visto persone che ti dicono di utilizzare un tema figlio di WordPress.

Ma cos'è un tema figlio e perché i temi figlio sono così importanti?

In questo post, ti daremo le risposte a queste domande con un'introduzione ai temi per bambini e ai loro vantaggi.

Quindi, ti mostreremo passo dopo passo come creare e personalizzare il tuo tema figlio utilizzando plug-in o codice.

Scaviamo.

Un tema figlio di WordPress non è un tema autonomo. È un "figlio" di un tema genitore esistente, da cui il nome.

Lo installerai insieme al tuo tema principale, ma ti darà la possibilità di apportare modifiche in modo sicuro al tuo tema principale senza dover modificare il tema principale stesso.

Il tema figlio estrarrà la maggior parte/tutte le sue impostazioni di progettazione dal tema padre. Tuttavia, nelle situazioni in cui apporti una modifica al tema figlio, tale modifica sovrascriverà le impostazioni nel tema principale.

A questo punto, ti starai chiedendo perché non puoi semplicemente apportare le modifiche direttamente al tema principale?

Il motivo principale per cui non è una buona idea sono gli aggiornamenti dei temi .

Se vuoi mantenere il tuo sito WordPress sicuro e ben funzionante, devi applicare prontamente gli aggiornamenti non appena escono, inclusi gli aggiornamenti al tuo tema.

Se personalizzi il tuo sito modificando direttamente il tema (senza un tema figlio), significa che sovrascriverai tutte le modifiche ogni volta che aggiorni il tema.

Ciò significa che:

• Aggiorna il tuo tema e perdi il tuo lavoro. Non è un'esperienza molto divertente, vero?
• Non aggiornare il tuo tema in modo da non perdere il tuo lavoro... il che non va bene per la sicurezza e il funzionamento del tuo sito.

Con un tema figlio di WordPress, puoi apportare tutte le modifiche al tema figlio. Quindi, sarai in grado di aggiornare il tema principale senza perdere nulla del tuo lavoro.

Oltre ad aiutarti ad aggiornare in sicurezza, l'utilizzo di un tema figlio è anche generalmente conveniente per effettuare personalizzazioni. Poiché separa tutte le modifiche in un unico punto, è facile tenere traccia di tutte le modifiche e modificarle secondo necessità.

Rende anche facile andare in retromarcia. Ad esempio, se vuoi smettere di usare le tue modifiche e tornare al tema principale "vanilla", tutto ciò che devi fare è disabilitare il tema figlio.

Alcuni temi WordPress off-the-rack utilizzano anche questo approccio genitore/figlio per impostazione predefinita. Ad esempio, se desideri utilizzare Genesis Framework, avrai bisogno sia del tema genitore (il framework di base) che di un tema figlio per controllare il design.

A parte alcune eccezioni che elencheremo di seguito, dovresti sempre utilizzare un tema figlio se hai intenzione di apportare le tue modifiche a un tema WordPress esistente.

In generale, l'utilizzo di un tema figlio è una buona pratica ottimale ogni volta che personalizzi il tuo tema WordPress.

Tuttavia, ci sono alcune eccezioni alla regola in cui potrebbe esserci un'opzione migliore rispetto all'utilizzo di un tema figlio.

Innanzitutto, se vuoi solo apportare alcune piccole modifiche CSS, potrebbe essere eccessivo creare un tema figlio solo per alcune modifiche.

Invece, puoi aggiungere il tuo CSS personalizzato utilizzando la funzione CSS aggiuntiva integrata nel Customizer di WordPress. In alternativa, puoi utilizzare un plug-in gratuito come il plug-in Simple CSS di Tom Usborne.

In secondo luogo, se stai apportando modifiche che desideri siano indipendenti dal tema, un tema figlio potrebbe non essere l'opzione migliore.

Ad esempio, se stai registrando una tassonomia personalizzata o un tipo di post personalizzato, probabilmente non vorrai utilizzare il file functions.php del tema figlio (perché vorrai conservarli anche se cambi tema). Invece, dovresti semplicemente aggiungere il codice al di fuori del tuo tema interamente con un plug-in come Code Snippets o il tuo plug-in personalizzato.

1. Usa un plugin gratuito per il generatore di temi per bambini di WordPress.
2. Crea manualmente il tuo tema figlio.

Un plug-in per la generazione di temi figlio ti consente di creare un tema figlio senza uscire dalla dashboard di WordPress.

L'opzione più popolare qui è il plug-in gratuito Child Theme Configurator, attivo su oltre 300.000 siti.

Child Theme Configurator non solo ti aiuta a creare i file di base del tema figlio, ma eseguirà anche la scansione del tema che stai utilizzando e accoda i fogli di stile del tema e del carattere secondo necessità.

Include anche altre utili funzionalità se stai cercando di creare un tema figlio su un sito in cui hai già aggiunto del contenuto. Ad esempio, può copiare i widget esistenti e le opzioni di personalizzazione nel tema figlio.

Tuttavia, se hai intenzione di utilizzare il plug-in su un sito Web live, ti consigliamo di eseguire un backup completo prima di procedere. O, idealmente, imposta tutto su un sito di staging.

Una volta pronto il backup, inizia installando e attivando il plugin gratuito Child Theme Configurator da WordPress.org. Quindi, vai su Strumenti → Temi figlio per creare il tuo tema figlio.

Nel menu a discesa Seleziona un tema principale , seleziona il tema per il quale desideri creare il tema figlio. Quindi, fare clic su Analizza :

Il plug-in analizzerà quindi il tema principale per eventuali dipendenze.

Una volta fatto, vedrai alcune opzioni aggiuntive per configurare come creare il tuo tema figlio. Se non sei sicuro del significato di un'impostazione specifica, puoi semplicemente lasciarla come predefinita:

Una volta che hai finito di fare le tue scelte, fai clic sul pulsante in basso per creare un nuovo tema figlio .

E questo è tutto! Il plugin creerà quindi il tema figlio per te. Tuttavia, non attiverà il tema figlio.

Per attivarlo:

• Vai su Aspetto → Temi.
• Visualizza in anteprima l'aspetto del tuo sito con il tema figlio (per assicurarti che funzioni: se il tuo sito ha un aspetto strano, è probabile che sia dovuto a un problema CSS).
• Attiva il tuo tema figlio come faresti con qualsiasi altro tema WordPress. Assicurati di lasciare installato il tuo tema principale, però.

Una volta attivato il tema figlio, il plug-in Child Theme Configurator include anche alcuni altri strumenti utili per aiutarti a gestire il tema figlio. Ad esempio, se vai alla scheda File delle impostazioni del plug-in, puoi visualizzare tutti i file associati sia nel tema principale che nel tema figlio.

Quindi, puoi copiare i file dal tema principale al tema figlio.

Ad esempio, se volessi apportare alcune modifiche a single.php , potresti copiare quel file nel tuo tema figlio in modo da poterlo modificare in sicurezza:

Troverai anche molti altri strumenti per aiutarti a lavorare con i CSS.

Vedremo perché questi strumenti sono utili in seguito.

Per questa sezione, supponiamo che tu conosca un po' di PHP e CSS. Se ti senti sopraffatto dalle istruzioni qui, ti consigliamo di attenersi al plug-in gratuito della sezione precedente.

Per creare manualmente un tema figlio, devi creare due file (questi sono il minimo indispensabile per un tema figlio):

• style.css : all'inizio, tutto ciò che devi aggiungere è un codice standard.

• functions.php – questo ti permette di accodare il foglio di stile dal tema genitore. Senza questo, il tuo tema figlio non sarebbe in grado di applicare il CSS del tuo tema genitore, il che renderebbe il tuo sito molto brutto!

Innanzitutto, crea un file chiamato style.css e aggiungi il seguente codice:

/*

Nome del tema: Hello Elementor Child

URI del tema: https://github.com/elementor/hello-theme/

Descrizione: Hello Elementor Child è un tema figlio di Hello Elementor, creato dal team di Elementor

Autore: Elementor Team

URI autore: https://elementor.com/

Modello: ciao-elementor

Versione: 1.0.1

Dominio del testo: ciao-elementor-child

Licenza: GNU General Public License v3 o successiva.

URI licenza: https://www.gnu.org/licenses/gpl-3.0.html

*/

Assicurati di sostituire tutto ciò che viene dopo i due punti con le tue informazioni reali:

• Nome tema : il nome del tema figlio.

• URI del tema : il sito Web per il tema e la relativa documentazione.

• Descrizione : una breve descrizione del tema.

• Autore : il nome dell'autore del tema.

• URI dell'autore: – il sito web dell'autore del tema.

• Modello : il nome della cartella del tema principale (come indicato all'interno della cartella wp-content/themes). Questa è la linea più importante in quanto il tema del tuo bambino non funzionerà senza di essa.

• Versione : il numero di versione del tema figlio.

• Text Domain : utilizzato per l'internazionalizzazione. Puoi semplicemente aggiungere "-child" alla fine del nome del modello.

• Licenza : lascia questo come predefinito.

• URI licenza : lascialo come predefinito.

Escludendo la riga Modello , non è molto importante ciò che inserisci, quindi non stressarti troppo. Assicurati di inserire correttamente il nome della cartella del tema principale per il modello .

Se desideri aggiungere i tuoi stili personalizzati in futuro, puoi aggiungerlo a questo foglio di stile sotto il codice standard.

Successivamente, devi creare il file functions.php per il tuo tema figlio. Ancora una volta, questo è ciò che ti consente di accodare l'intero foglio di stile CSS dal tuo tema principale.

Nel file functions.php , aggiungi il seguente codice:

<?php

/* Funzione per accodare il foglio di stile dal tema principale */

function child_enqueue__parent_scripts() {

wp_enqueue_style( 'genitore', get_template_directory_uri().'/style.css' );

}

add_action( 'wp_enqueue_scripts', 'child_enqueue__parent_scripts');

Una volta che hai il tuo file style.css e il file functions.php , devi caricarli sul tuo sito WordPress come nuovo tema.

Per farlo, connettiti al tuo sito WordPress tramite FTP.

Quindi, vai alla directory dei temi del tuo sito ( wp-content/themes ) e crea una nuova cartella per il tuo tema figlio.

Ad esempio, se la cartella del tema principale è hello-elementor , puoi denominare la cartella del tema figlio hello-elementor-child per aiutarti a ricordarlo.

Quindi, carica il tuo file style.css e functions.php all'interno di quella cartella:

Dopo aver caricato entrambi i file, puoi andare su Aspetto → Temi e attivare il tema figlio proprio come faresti con qualsiasi altro tema WordPress.