Tema figlio

Un tema figlio in WordPress è un "sottotema" che eredita lo stile e le funzionalità di un altro tema, noto come tema padre, consentendo al contempo di apportare personalizzazioni in modo sicuro senza modificare i file del tema originale.

Per creare un tema figlio, crea una cartella nella directory wp-content/themes. Questa cartella dovrebbe includere un file style.css personalizzato e un file functions.php. Il foglio di stile del tema figlio viene caricato dopo quello del tema padre, consentendo al tuo CSS personalizzato di avere la precedenza e garantendo che gli aggiornamenti al tema padre non sovrascrivano le tue modifiche.

Un tema figlio è un insieme di istruzioni che si sovrappone al tema originale, consentendo di aggiornare il tema principale, come Twenty Seventeen, Twenty Nineteen o Twenty Twenty-One, senza perdere le personalizzazioni. Esploriamo i concetti chiave, i passaggi per creare un tema figlio e le best practice per lo sviluppo di temi.

Qual è la differenza tra i temi Genitore e Figlio?

Un tema principale è un tema WordPress completo con tutti i file e gli stili necessari. Ha una propria cartella e un'intestazione style.css con metadati. Una volta attivato, funge da tema attivo per il tuo sito, fornendo layout e stili.

Un tema figlio eredita funzionalità e stili dal tema padre. Facendo riferimento alla cartella del tema padre nell'intestazione del foglio di stile del tema figlio, WordPress carica il file style.css del tema padre prima del CSS del tema figlio. Questo permette di aggiungere o sovrascrivere i file del template e includere CSS aggiuntivo senza modificare il file style.css del tema padre.

Vantaggi dell'utilizzo di un tema figlio

Sfruttare un tema figlio offre diversi vantaggi pratici, soprattutto quando si gestisce o si estende un tema personalizzato complesso:

• Aggiornamenti sicuri: l'aggiornamento dei file del tema principale non sovrascriverà le modifiche personalizzate apportate nella directory del tema secondario. Puoi applicare con tranquillità patch di sicurezza e miglioramenti delle funzionalità al tema principale senza compromettere l'aspetto del tuo sito.

• Netta separazione del codice: tutto il codice personalizzato, dalle modifiche ai file CSS ai frammenti di codice PHP, risiede nel tema figlio. Questa separazione semplifica il monitoraggio, il debug e la rimozione delle modifiche, evitando di doverle cercare nel codice del tema principale.

• Sviluppo più rapido del tema: un creatore di temi figlio o un plugin di configurazione di temi figlio (come il Child Theme Configurator ufficiale) può creare un nuovo tema figlio in pochi secondi. Si dedica meno tempo alla configurazione delle cartelle e più tempo al design e alle funzionalità.

• Riutilizzabilità: una volta creato un nuovo tema figlio per un sito, è possibile comprimerlo in un file zip e caricarlo su altre installazioni WordPress, risparmiando tempo sulle attività ripetitive di sviluppo del tema.

• Piattaforma di apprendimento: per gli aspiranti sviluppatori di temi, i temi figlio offrono un modo accessibile per sperimentare file modello, hook di azione e filtri senza mettere a rischio un sito attivo.

Funzioni di un tema figlio

Un tema figlio in WordPress è fondamentale per una personalizzazione sicura e scalabile del sito. Le sue funzioni principali includono:

• Eredita stili e layout del tema padre: carica e si basa sul foglio di stile e sulla struttura del tema padre, preservando tutti gli elementi di design e i layout originali.

• Personalizzazione dello stile e sovrascrittura del template: gli sviluppatori possono sovrascrivere stili, intestazioni, piè di pagina e altro ancora tramite il file CSS del tema figlio e i file template copiati.

• Aggiunta o modifica di funzionalità: il file functions.php in un tema figlio consente di scrivere o modificare il codice PHP per cambiare il comportamento di WordPress, senza toccare la logica principale del tema.

• Separazione del codice personalizzato dagli aggiornamenti del tema: le personalizzazioni rimangono isolate dagli aggiornamenti del tema principale, così puoi mantenere i miglioramenti della sicurezza e delle prestazioni senza perdere le modifiche.

• Semplificazione dei test e della prototipazione dei temi: ideale per sperimentare modifiche al layout o alle funzionalità di un sito WordPress senza comprometterne la stabilità.

Creazione di un tema figlio (passo dopo passo)

Puoi creare un tema figlio manualmente o utilizzare un plugin di configurazione. Di seguito è riportata la procedura manuale, che ti dà il controllo completo sulla cartella e sui file del tema figlio.

• Creazione della directory del tema figlio: nella tua installazione di WordPress, vai alla cartella wp-content/themes. Crea una nuova cartella, ad esempio twentyone-child, se stai utilizzando il tema Twenty Twenty-One come tema principale. Questa directory del tema figlio diventerà il contenitore per tutti i tuoi template e risorse personalizzati.

• Aggiungere il foglio di stile (style.css): all'interno della cartella del tema figlio, creare un file denominato style.css. Aggiungere la seguente intestazione in alto:

/*
Nome tema: Twenty Twenty-One
URI tema figlio: https://example.com/twentyone-child
Descrizione: Un tema figlio per il tema Twenty Twenty-One
Autore: Il tuo nome
Template: twentytwentyone
Versione: 1.0.0
*/

Modifica il nome del tema, il modello e gli altri campi in modo che corrispondano al nome del tema figlio e alla cartella del tema padre.

• Aggiungi gli stili padre e figlio alla coda: crea un file functions.php nella cartella del tema figlio. Utilizza questo semplice frammento di codice per caricare correttamente gli stili:

Funzione PHP my_child_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( 'parent-style' ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_child_enqueue_styles' );

In questo modo si garantisce che il foglio di stile del tema padre venga caricato per primo, seguito da qualsiasi CSS personalizzato nel tema figlio.

• Attiva il tuo tema figlio: comprimi la cartella del tema figlio (se lo carichi tramite la dashboard) oppure aggiorna semplicemente la sezione Temi in Aspetto. Individua il tuo nuovo tema figlio, fai clic su Attiva e verifica che il tuo sito si carichi correttamente con il design del tema principale e le modifiche del tuo tema figlio.

Informazioni sui file dei temi figlio

Un tema figlio completamente funzionale in genere include:

• style.css: Contiene i metadati dell'intestazione del tema figlio e tutto il CSS personalizzato.

• functions.php: questo file contiene il codice di accodamento sopra riportato e qualsiasi frammento di file PHP aggiuntivo, hook o filtro per estendere la funzionalità.

• File modello (facoltativo): copia qualsiasi modello del tema principale, come header.php, single.php o page.php, nella cartella del tuo tema figlio per sovrascriverlo. WordPress utilizzerà la tua versione al posto di quella del tema principale.

• screenshot.png (facoltativo): Un'immagine di anteprima viene visualizzata nella dashboard dei temi, con dimensioni di 1200×900 px.

• assets/ (facoltativo): una sottocartella per immagini specifiche del tema figlio, JavaScript o altre risorse.

Tutti gli altri file del tema padre che non vengono sovrascritti rimangono intatti, quindi il tema figlio "eredita" tutto dal tema padre, inclusi menu, widget e opzioni del tema.

Opzioni adatte ai principianti per personalizzare WordPress senza un tema figlio

Esistono alternative più semplici all'utilizzo di un tema figlio per gli utenti che desiderano personalizzare il proprio sito WordPress ma non necessitano di modifiche avanzate al tema. Questi metodi sono ideali per i principianti che desiderano modificare stile, layout o funzionalità senza modificare i file principali o creare una struttura di tema separata.

Ecco i metodi di personalizzazione più comuni e adatti ai principianti:

• Personalizzatore del tema (Aspetto > Personalizza): la maggior parte dei temi WordPress moderni include numerose impostazioni nel personalizzatore integrato, che consentono di regolare colori, caratteri, loghi e layout della homepage senza dover modificare il codice.

• Pannello CSS aggiuntivo: situato nel Personalizza tema, questo campo consente di scrivere frammenti di codice CSS personalizzati che sovrascrivono lo stile del tema. Le modifiche vengono applicate immediatamente e salvate insieme alle impostazioni del tema.

• Plugin CSS personalizzati: plugin come Simple Custom CSS o WP Add Custom CSS offrono un modo sicuro e autonomo per aggiungere regole CSS, anche se in seguito modifichi il tema.

• Plugin specifici per il sito: invece di modificare i file del tema, puoi creare un plugin leggero specifico per il sito per funzionalità di base come codici abbreviati, tipi di post personalizzati o piccole modifiche PHP.

• Page Builder (ad esempio, Elementor, Beaver Builder): questi strumenti drag-and-drop forniscono un controllo visivo sui layout e sul design delle pagine, semplificando la personalizzazione senza dover scrivere una sola riga di codice.

Questi metodi sono perfetti per gli utenti che desiderano flessibilità senza la complessità di gestire una cartella di un tema figlio o di modificare manualmente i file. Garantiscono che le modifiche rimangano invariate anche dopo gli aggiornamenti del tema (nella maggior parte dei casi) e non richiedono accesso FTP o esperienza nello sviluppo di temi.

Errori comuni e risoluzione dei problemi

Anche gli sviluppatori di temi più esperti possono inciampare quando lavorano con i temi child. Ecco alcuni rapidi controlli:

• Nome del template errato: assicurati che la riga Template nel tuo file style.css corrisponda esattamente alla cartella del tema principale (sensibile alle maiuscole/minuscole).

• Tema figlio non attivo: dopo l'installazione, ricordati di attivare il tema figlio; altrimenti, il tuo CSS e PHP personalizzati non funzioneranno.

• Problemi di memorizzazione nella cache CSS: le cache del browser o dei plugin possono nascondere le modifiche CSS. Cancella le cache o utilizza fogli di stile con controllo delle versioni nelle chiamate di enqueue.

• Dipendenze mancanti: se si fa affidamento su una funzione del tema padre, confermare l'utilizzo della priorità di hook corretta in modo che il codice padre venga caricato per primo.

Le migliori pratiche nello sviluppo dei temi

Ecco alcune buone pratiche per lo sviluppo di temi WP:

• Mantieni le funzionalità all'interno dei plugin: se stai aggiungendo funzionalità che non riguardano esclusivamente la presentazione, come tipi di post personalizzati o shortcode, valuta la possibilità di impacchettarle come plugin anziché appesantire il tuo tema figlio.

• Utilizza un configuratore di temi figlio: strumenti come il plugin Child Theme Configurator possono automatizzare la creazione di cartelle, la configurazione delle intestazioni e le routine di coda, il che è ideale per chi ha difficoltà a modificare manualmente le intestazioni dei file CSS o i file PHP.

• Mantieni il controllo di versione: salva il tuo tema figlio in Git o in un altro VCS. Tagga le release prima di modifiche significative per poter facilmente ripristinare la versione precedente in caso di problemi.

• Documenta le tue modifiche: conserva un semplice file README.md nella cartella del tuo tema figlio che elenca le tue personalizzazioni, in modo che i tuoi collaboratori e i tuoi futuri clienti possano comprendere le tue modifiche.

Dovresti usare un tema figlio di WordPress?

Capire quando utilizzare un tema figlio e quando no può farti risparmiare tempo e rendere il tuo sito a prova di futuro. Sebbene i temi figlio siano strumenti potenti per sviluppatori e utenti avanzati, non sono sempre necessari per ogni attività di personalizzazione.

Ecco come decidere:

Utilizza un tema figlio se:

• È necessario sovrascrivere o estendere i file modello (ad esempio, single.php, header.php).
• Si prevede di scrivere funzioni PHP personalizzate o hook di filtro tramite functions.php.
• Il tuo tema riceverà aggiornamenti regolari e vuoi conservare le modifiche.
• Stai creando un sito client o un ambiente di staging con una logica di progettazione personalizzata.

Evita un tema figlio se:

• Sono necessarie solo modifiche visive di base, come cambiamenti di colore o di carattere.

• Il tema principale supporta impostazioni di personalizzazione avanzate o la modifica completa del sito.

• Per modificare il layout, preferisci utilizzare page builder o plugin di progettazione.

• Stai utilizzando un tema basato su blocchi (ad esempio, Twenty Twenty-Four), in cui i temi figlio sono meno rilevanti a causa delle parti del modello e degli stili globali.

Suggerimento: per gli utenti intermedi, è consigliabile iniziare con piccole modifiche utilizzando il Customizer o un plugin CSS. Se le esigenze aumentano, è possibile passare a un tema figlio senza perdere le personalizzazioni iniziali.

Valutando il tuo livello di comfort tecnico e gli obiettivi a lungo termine del sito, puoi scegliere con sicurezza il percorso giusto, che si tratti di un tema figlio o di un'alternativa più semplice.

Quando non utilizzare un tema figlio

Sebbene potenti, i temi figlio non sono sempre la scelta giusta:

• Piccole modifiche CSS: un plugin come "Simple Custom CSS" potrebbe essere sufficiente per apportare diverse modifiche di stile.

• Riprogettazione completa: potrebbe essere più pulito creare un layout completamente nuovo, un tema personalizzato da zero o partire da un tema di base.

• Siti sensibili alle prestazioni: il caricamento di più file style.css e di hook PHP aggiuntivi può aumentare il carico. Analizza le risorse del tuo tema figlio e valuta la possibilità di incorporare il CSS critico direttamente nel codice HTML se la velocità è una priorità.

Caricamento e distribuzione del tema figlio

Una volta che il tema figlio è pronto:

• Comprimi la cartella del tema figlio: comprimi la cartella (ad esempio, twentyone-child.zip).

• Caricamento tramite Dashboard: Vai su Aspetto > Temi > Aggiungi nuovo > Carica tema, seleziona il tuo file zip e fai clic su Installa ora.

• Attivazione e test: dopo l'attivazione, esplora le pagine principali per verificare che tutto venga visualizzato e funzioni come previsto.

• Condividi con gli altri: se hai creato un tema figlio, valuta la possibilità di distribuirlo su GitHub o nella di WordPress.org (seguendo le linee guida), consentendo così anche ad altri proprietari di siti di beneficiarne.

Considerazioni finali

Utilizzare un tema figlio è il modo più sicuro ed efficace per personalizzare un tema WordPress senza toccare i file originali. Permette di aggiungere CSS personalizzati, modificare i template e aggiornare in modo sicuro il tema padre senza perdere le modifiche. Che si tratti di creare un nuovo tema figlio da zero o di modificarne uno esistente, è un approccio innovativo per principianti e sviluppatori.

Hai bisogno dell'aiuto di un esperto per configurare il tuo child theme WordPress? Seahawk offre servizi professionali per aiutarti a iniziare al meglio.