Tema-Child-Wordpress

Tema Child WordPress: ecco come crearlo in 1 click.

Tema Child WordPress di cosa stiamo parlando? Perché dobbiamo crearlo nel nostro sito web?

Dopo aver scelto un template per il tuo sito web, potrebbe essere necessario apportare delle modifiche o aggiunta delle funzionalità, in questo modo non perderai le modifiche quando il tema padre viene aggiornato.

Cos’è un tema child WordPress?

Un child theme (in italiano “Tema Figlio”) è un tema che importa tutte le caratteristiche e funzionalità di un altro tema (detto Parent Theme, in italiano “Tema Genitore”).

La possibilità di creare temi child è un’importante caratteristica di WordPress in quanto consente agli sviluppatori di siti web di modificare l’aspetto e le funzionalità di un tema senza agire direttamente sui suoi file originali.

Un tema child permette di applicare modifiche al template utilizzato, sia grafiche che funzionali, senza correre il rischio di vederle “azzerate” al primo aggiornamento che rilascia la software house che lo ha sviluppato.

Questo passaggio è fondamentale nel caso tu stia utilizzando un tema a pagamento o un tema soggetto ad aggiornamenti, che ti consiglio di farli sempre per avere una maggiore sicurezza (quasi sempre vengono corretti bug di sicurezza del tema) e per poter utilizzare le nuove funzionalità di quest’ultimo.

Come funziona un Child Theme

Da un punto di vista tecnico, il funzionamento dei temi child è piuttosto semplice: nella cartella del nostro child theme andremo a caricare i soli file che intendiamo modificare rispetto al parent theme. Se, ad esempio, vogliamo cambiare il footer rispetto a quello del tema genitore, non dovremo fare altro che copiare il file footer.php del tema genitore all’interno della cartella del nostro tema child ed applicargli le modifiche che riteniamo necessarie.

WordPress, per visualizzare le pagine del sito web, utilizzerà i file presenti all’interno della cartella del tema genitore ad eccezione dei file, aventi lo stesso nome e posizionati nelle medesime sotto-cartelle, presenti all’interno della cartella del tema figlio. Questa regola vale per tutti i file ad eccezione del file functions.php come vedremo tra poco.

Come creare un Tema Child WordPress

La creazione di un child theme di WordPress è una cosa piuttosto semplice. Vi spiegherò passo passo come creare il vostro primo tema child partendo da un qualsiasi tema di WordPress. Per semplicità espositiva, in questo articolo, prenderemo in considerazione il tema di default di WordPress che, nel momento in cui scriviamo, è ColorMag.

Ah, dimenticavo se vuoi puoi anche leggere la guida in inglese che trovi sul sito di WordPress.org oppure seguire questa mini guida.

  • Per prima cosa è necessario accedere via FTP alla root della tua installazione di WordPress (le credenziali dovrebbero esserti state comunicate dal tuo hosting provider al momento della sottoscrizione del piano hosting). Puoi utilizzare FileZilla.
  • All’interno della tua installazione di WordPress devi spostarti nella cartella wp-content e, successivamente, nella sua sotto-cartella themes. In questa cartella sono presenti tante sotto-cartelle quanti sono i temi installati nel tuo sito WordPress. Nel nostro esempio prenderemo in considerazione la cartella ColorMag.
  • Per creare il nostro tema child WordPress dovremo, innanzitutto, creare una nuova cartella chiamata colormag-child e, al suo interno, creare un file vuoto che dovremo salvare come style.css.
Tema Child WordPress
Tema Child WordPress creare cartella child
Tema Child WordPress sottocartelle
Tema Child WordPress – sottocartella child
  • Apriamo il file style.css e copiamoci dentro il seguente contenuto:
/*
Theme Name: Colormag Child
Author: Autore del tema
Author URI: https://www.sito-dell-autore.com
Description: Tema Child di Colormag
Template: Colormag
Version: 0.1
*/

Queste righe di testo, che tecnicamente non sono altro che un commento all’interno del foglio di stile del nostro tema child, definiscono alcune caratteristiche del tema. E’ opportuno precisare che le sole righe obbligatorie sono Theme Name e Template, le altre informazioni sono facoltative quindi, se volete, potete anche ometterle.

  • Theme Name: è il nome del nostro tema child, quindi potete scrivere ciò che volete;
  • Template: è il nome della directory del tema genitore che, nel nostro caso, è il nome della directory dove risiede il tema Colormag.

Successivamente, occorre creare un nuovo file txt e chiamarlo functions.php.

All’interno del file functions.php copia il codice che ti permetterà di includere il foglio di stile del tema padre.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Grazie a questo codice il tuo sito WordPress includerà lo stile del tema originale e, successivamente, quello del tema child. Questo significa che il sito avrà l’aspetto del tema originale e tu potri modificarlo creando le tue regole di stile all’interno del file style.css del tuo child theme.

NB. All’interno di questo file potrai aggiungere i codici php richiesti per ottenere determinate funzionalità, come aggiungere o togliere aree widget nel tuo tema, modificare un testo nel footer o rimuovere la funzione di ricerca in WordPress. Non ti preoccupare nei prossimi articoli ti mostrerò come effettuare queste modifiche.

Se hai seguito i semplici passaggi indicati hai creato un tema child WordPress. Ora non ti resta che accedere al pannello di controllo del tuo sito e attivare il tema child  in Aspetto-> temi.

Tema Child e file functions.php

Come abbiamo detto, WordPress utilizza tutti i file che trova all’interno del tema child al posto di quelli del tema genitore. Questa regola, tuttavia, patisce un’importante eccezione: il file functions.php del tema child, infatti, non sovrascrive quello del tema parent ma viene caricato insieme a questo.

Si tratta di un’eccezione molto importante: nel nostro file functions.php, quindi, non saremo costretti a copiare tutte le istruzioni del tema originale (in quanto verranno caricate a prescindere) ma potremo limitarci ad aggiungere i soli blocchi di codice necessari a personalizzarlo.

Si ricordi che la personalizzazione del file functions.php non è consigliata agli utenti poco esperti: intervenire su questo file, infatti, significa scrivere codice PHP rispettando le logiche strutturali e sintattiche del coding di WordPress ed eventuali errori potrebbero compromettere la stabilità e la sicurezza del vostro sito web!

Tema Child WordPress vs. CSS personalizzati

Ad un certo punto, potresti ritrovarti a voler apportare piccole modifiche stilistiche al tuo sito web. La domanda diventa quindi: dovresti aggiornare il foglio di stile del tuo tema child o inserire CSS personalizzati?

In poche parole, il CSS personalizzato è un’area all’interno del Theme Customizer di WordPress (e altri plugin di terze parti) che consente di aggiungere CSS che sovrascrive le opzioni di stile predefinite del tema.

Puoi apportare semplici modifiche qui, come il colore di sfondo e lo stile del carattere oppure puoi anche apportare queste modifiche al foglio di stile del child theme, anche se non è così facilmente accessibile come l’utilizzo del CSS personalizzato.

Creare temi child WordPress con plugin

Ovviamente, il modo più rapido per implementare tema child sul tuo sito WordPress è tramite un plugin.

Diamo un’occhiata ad alcune delle opzioni più funzionali.

WordPress Child theme configurator

WordPress Child theme configurator: è un’opzione popolare che si trova nella directory dei plugin di WordPress. Con pochi clic, puoi avere il nuovo tema child WordPress attivo e pronto per essere lanciato.

Questo plugin ti consente anche di vedere come appariranno le modifiche al foglio di stile del child theme prima di implementarle. Questo può farti risparmiare ancora più tempo, poiché modifichi il tema in base alle esigenze del tuo sito web.

Creare tema child WordPress con plugin

WordPress Child theme creator by Orbisius

Sebbene non sia conosciuto come gli altri plugin, Child Theme Creator di Orbisius è una scelta praticabile per chiunque abbia bisogno di un plugin per la creazione di un tema child WordPress semplice ma efficace.

Puoi creare un tema child per WordPress con un solo clic usando la semplice interfaccia e puoi anche combinare elementi di diversi temi child per creare la tua creazione unica.

Se ciò non bastasse, Child Theme Creator utilizza anche il CSS minificato. Questo aiuta a garantire che il tuo tema – e di conseguenza, il tuo sito web – si carichi più rapidamente.

Creare tema child WordPress con plugin

Come Risolvere i Problemi tra Child Theme e Parent Theme

Quindi ora sapete come creare un child theme in WordPress e come usarlo per sovrascrivere i template file, aggiungere uno stile e funzionalità extra al vostro sito.

Ma cosa succede se il vostro child theme non funziona come previsto? Cosa succede se il contenuto non viene visualizzato nel modo previsto o se una funzione non viene attivata?

Utilizzate questa checklist per risolvere i problemi dei vostri child theme:

  • Verificate di aver attivato il child theme e che il tema principale non sia ancora in esecuzione. È sorprendentemente facile dimenticare questo passaggio!
  • Aggiornate la cache del browser e la cache creata da qualsiasi plugin presente sul vostro sito.
  • Impostate wp-debug su true nel file wp-config.php. Se state guardando uno schermo bianco, dovrebbe esserci un messaggio che vi dice quale codice ha causato il problema e in quale file si trova. Questo vi aiuterà a identificare il bug e quale file viene utilizzato.
  • Controllate il codice di output della vostra pagina, post o archivio. Trovate l’elemento body e vedete quali classi ha. Queste vi diranno quale tipo di contenuto state guardando, cosa che vi aiuterà a identificare il template file che viene utilizzato. A volte non è quello che vi aspettate. Ad esempio, la pagina principale del blog non usa mai archive.php, anche se mostra un archivio dei vostri post.
  • Verificate di aver assegnato correttamente i nomi ai vostri file. Fate riferimento alla gerarchia dei template per essere sicuri di aver utilizzato la sintassi corretta.
  • Se avete duplicato un file del tema principale e l’avete aggiunto al tema secondario, verificate di aver salvato le modifiche.
  • Se una funzione per sovrascrivere una funzione integrabile non funziona, verificate di averle assegnato esattamente lo stesso nome della funzione integrabile e che la funzione nel tema principale sia effettivamente integrabile.
  • Se una funzione rimossa viene ancora eseguita, verificate di aver aggiunto la priorità corretta e che l’ortografia sia identica all’ortografia della funzione e dell’hook presenti nel tema principale.
  • Se avete utilizzato la priorità per ignorare o estendere una funzione, provate ad aumentare il valore della priorità, in modo da poter essere assolutamente sicuri che scatti per ultima. Verificate che non ci siano altre funzioni collegate a quell’hook che interferiscono con il vostro codice.

Auspicabilmente, uno o più di questi passaggi vi aiuteranno a identificare il problema del vostro child theme e a risolverlo. Ricordate: non modificate direttamente il tema principale.

Conclusione

Ti ho spiegato perché è importante creare un tema child WordPress , come crearlo e piccoli consigli . Il tema child è molto utile cosi potrai fare esperienza e testare nuove funzionalità.

Autore Bartolomeo

Consulente tecnico con la passione per il web e la tecnologia e tutto quello che le ronza intorno.
Nel tempo libero scrivo articoli per il mio blog su argomenti vari, in particolare su configurazione Windows, Linux e WordPress.

Condividi questo articolo!

2 Commenti

Bartolomeo Rispondi

Ciao Luigi,
ti ringrazio per avermi scritto sul mio blog e infatti ho preso alla lettera il tuo consiglio, quello di rivedere il post.
Sai questo è stato uno dei miei primi articolo sul mio blog.
Per scrupolo, in locale, ho creato un tema child e ti posso garantire che funziona. Può darsi che non era chiara la procedura e avrai sbagliato qualche passaggio. In ogni caso ho arricchito l’articolo aggiungendo altre modalità.
Saluti

Luigi Rispondi

A questo articolo mancano dei passaggi, se faccio tutto corretto quando vado in aspetto temi mi dice che il child è incompleto, che manca la index e che va creato l’head… mi sa che la dovresti rivedere un’attimino

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Ho letto la policy privacy e accetto il trattamento dei miei dati personali in conformità al D.Lgs. 196/2003