Come Creare un Tema Child di WordPress

Quando hai esigenze specifiche, scegliere un tema WordPress non è un compito semplice. La tua scelta deve avere l’aspetto giusto e offrire tutte le funzioni di cui hai bisogno — Un compromesso è quasi inevitabile.

Personalizzare il tema scelto è un modo per aggirare questo problema. Tuttavia, i temi di WordPress devono essere aggiornati periodicamente. Quando lo sviluppatore del tuo tema rilascia una nuova versione, tutte le tue personalizzazioni potrebbero essere azzerate.

La soluzione?

Crea un tema child di WordPress che eredita la funzionalità del tema originale ma mantiene il tuo stile. Anche se applichi un aggiornamento del tema, il tuo tema child personalizzato rimarrà intatto.

In questo post, esamineremo più da vicino i temi child di WordPress — da perché ne hai bisogno a come crearne uno tuo. Facciamo un tuffo!

Cos’è Un Tema Child?

WordPress ti permette di creare una copia leggera di qualsiasi tema per personalizzarlo. Il tema originale diventa il tema parent, e la copia è conosciuta come tema child.

Il tema child dipende dal tema parent, attingendo alle funzioni e al design del tema originale. Quando il tema parent riceve un aggiornamento, lo riceve anche il child.

Ma proprio come un adolescente, il tema child ha una certa indipendenza. Quando personalizzi il tema child, le modifiche vengono applicate sopra il tema parent originale. Queste aggiunte rimangono, anche quando il tema parent viene aggiornato o modificato in qualche altro modo.

È anche importante notare che le personalizzazioni al tuo tema child non influenzano il tema parent. Infatti, sono conservate separatamente. Questo significa che hai la libertà di sperimentare, senza preoccuparti di danneggiare il codice sottostante. Puoi anche eliminare completamente il tuo tema child, e questo non avrà alcun effetto sul tema parent originale.

Utilizzare un tema child rende più facile mantenere e aggiornare il tuo sito. Ti aiuterà anche ad evitare il rischio di modificare direttamente il tema parent, che potrebbe essere sovrascritto e perso.

Differenze Tra Temi Child E Temi Parent

Ci sono diverse differenze tecniche tra un tema parent e un tema child. Ad esempio, una cartella di tema parent include tipicamente:

• Un file style.css che determina l’aspetto del tuo sito web.
• Un file functions.php che ti permette di aggiungere funzionalità o modificare il comportamento predefinito di WordPress.
• Diversi file di template che definiscono come vengono visualizzate le varie pagine del tuo sito.

Al contrario, una cartella del tema child necessita solo di due file essenziali: style.css e functions.php. Dovrai aggiungere questi file all’interno della directory /wp-content/themes/.

Puoi utilizzare un tema child per apportare modifiche stilistiche al tuo sito web, come cambiare la tavolozza di colori predefinita, caratteri e layout.

Per esempio, diciamo che vuoi cambiare la combinazione di colori del tuo sito. Puoi farlo creando un nuovo file style.css nella directory del tema child e aggiungendo il seguente codice:

body {

background-color:#fff;

}

h1 {

color: #000

}

Abbiamo cambiato il colore dello sfondo e il colore di H1 nel codice sopra. Queste modifiche sovrascriveranno lo stile del tema parent e aggiorneranno i colori sul tuo sito. Puoi apportare tutte le modifiche necessarie nel file style.css del tema child.

Un tema child eredita tutto dal tema parent. Questo include tutti i file di template, le funzioni e gli asset come immagini e file JavaScript. Se vuoi apportare modifiche a questi elementi, devi copiarli nella directory del tema child dal tema parent. Puoi poi modificare i file.

Perché Dovresti Usare Un Tema Child

Ci sono diversi vantaggi nell’usare un tema child sul tuo sito WordPress, inclusi:

• Proteggere le modifiche al tema dagli aggiornamenti automatici.
• Regolazione degli elementi visivi del tuo tema.
• Imparare a modificare i temi, che è un passo verso lo sviluppo del proprio tema.

Utilizzare un tema child richiede anche un’esperienza minima di programmazione. Nella maggior parte dei casi, devi solo aggiungere alcune righe di codice al file style.css. Questo rende facile iniziare con un tema child, anche se non sei uno sviluppatore di temi.

Se desideri approfondire, puoi aggiungere nuovi elementi e funzioni al tuo tema child tramite codice personalizzato.

Come Creare Un Tema Child Di WordPress Usando Un Plugin

Utilizzare un plugin è probabilmente il modo più semplice per creare un tema child di WordPress. Il plugin può guidarti attraverso l’intero processo in semplici passaggi, il che significa che non hai bisogno di conoscenze tecniche.

In questo tutorial, lavoreremo con il plugin Child Theme Configurator. Questo strumento facile da usare può aiutarti a analizzare il tuo tema per individuare problemi, creare un tema child e modificarlo per adattarlo alle tue specifiche di layout e stile di design del sito web.

Passo 1: Scarica e Installa il Plugin Configuratore di Temi Child

Per iniziare, dovrai scaricare e installare il Child Theme Configurator. Puoi farlo navigando alla pagina del plugin e cliccando sul pulsante Download:

Il tuo computer scaricherà i file del tema in un file ZIP. Poi, naviga nella tua dashboard di WordPress e vai su Plugins > Aggiungi Nuovo per caricare i file.

Clicca su Upload Plugin > Scegli File, e seleziona la cartella scaricata:

Una volta installato il plugin, dovrai semplicemente attivarlo. Ricorda che dovrai anche scegliere un tema WordPress da cui creare il tuo tema child.

Passo 2: Analizza Il Tema Parent

Successivamente, vai su Strumenti > Temi child:

Il plugin ti guiderà attraverso i passaggi per creare un tema child. Semplicemente seleziona CREA un nuovo Tema Child per iniziare:

Ti verrà chiesto di selezionare il tuo tema parent dal menu a discesa. Se hai più temi sul tuo sito WordPress, assicurati di scegliere quello che vuoi personalizzare:

Ora clicca su Analyze per controllare il tema parent per eventuali problemi di codice:

Se il plugin trova problemi di compatibilità o di codifica, li elencherà qui. Altrimenti, vedrai un messaggio di successo verde che ti dice che è tutto a posto per procedere con la creazione del tema child:

Dopo aver determinato che il tuo tema parent è adatto per un tema child, puoi passare al passo successivo. (Puoi anche mostrare un’analisi dei dati grezzi o inviare richieste di supporto al creatore del plugin da questa pagina.)

Passo 3: Dà un Nome alla Directory del Tuo Tema Child

Successivamente, ti verrà chiesto di creare un nome per la directory del tema child. Questo è il nome della cartella all’interno dei file del tuo sito web.

Puoi chiamarlo come preferisci, purché sia unico per il tuo sito e contenga caratteri accettabili. Noi usiamo “twentytwentyfour-child” per semplicità:

Ricorda che nominare la directory del tema non è la stessa cosa che nominare il tuo tema child o aggiungere una descrizione al tema. Questi passaggi verranno effettuati più tardi.

Passo 4: Seleziona I Fogli Di Stile Dei Temi Child E Parent

In seguito, dovrai scegliere il nuovo foglio di stile per il tuo tema child. Se selezioni il foglio di stile principale (style.css), i tuoi stili CSS personalizzati sovrascriveranno il contenuto del tema esistente.

Questa è l’opzione predefinita, e ti consigliamo di sceglierla se sei nuovo ai temi child:

Ora ti verrà chiesto di scegliere il metodo di gestione del foglio di stile del tema parent. Ci sono varie opzioni, ma noi consigliamo di attenerti a Usa la coda di stile di WordPress per la maggior parte dei casi d’uso:

Come principiante, è meglio usare l’opzione predefinita fino a quando non sarai più familiare con il modo in cui il tema parent gestisce il foglio di stile. Le altre opzioni non sono sempre compatibili con tutti i temi.

Passo 5: Nominare il Tuo Tema Child

Il passo successivo è dare un nome al tuo tema child e scrivere una descrizione per esso.

Il configuratore di temi child estrarrà le informazioni predefinite dal tuo tema parent e le visualizzerà qui. Se stai creando un tema child solo per uso personale, puoi lasciare i dati così come sono.

Tuttavia, se il tuo tema parent sarà la base per un nuovo tema che stai sviluppando, potresti voler aggiungere una breve descrizione e un nome unico.

Passo 6: Copia Le Impostazioni Del Tema Parent Nel Tema Child

Il plugin ti chiederà ora di confermare che può copiare le impostazioni del tema parent nel tuo tema child:

Questo passaggio garantirà che il tuo tema child tragga funzionalità e aspetto dal tema parent. Nota che se stai lavorando con un tema premium o ristretto come parent, potresti non essere in grado di eseguire questo passaggio.

Passaggio 7: Crea Il Tuo Nuovo Tema Child E Anteprimalo

L’ultimo passo è creare il tuo tema child. Clicca sul bottone Crea Nuovo Tema Child e aspetta che il plugin faccia il suo lavoro:

Dovresti ricevere una notifica che il tuo tema child è stato creato con successo:

Visualizza sempre in anteprima il tuo tema child prima di attivarlo sul tuo sito web. Questo passaggio ti aiuterà a verificare che tutto funzioni come dovrebbe. Poi, clicca su Attiva & Pubblica per iniziare con il tuo tema child.

Come Creare Manualmente Un Tema Child Di WordPress

Se preferisci non utilizzare un plugin per creare il tuo tema child, puoi usare il metodo manuale. Potresti preferire questa opzione se stai già utilizzando troppi plugin sul tuo sito web.

Inoltre, creare manualmente un tema child di WordPress ti permette di apportare tutte le modifiche che desideri a un livello granulare. Ricorda solo che ti servirà una conoscenza intermedia del codice CSS.

Ecco una guida passo dopo passo:

Passo 1: Sviluppa Un Piano Per Le Tue Modifiche

Prima, trova un tema parent che ti piace e elenca le modifiche che vuoi apportare. Puoi visualizzare gli strumenti di sviluppo e vedere il codice del tema per apportare le modifiche corrette.

Per visualizzare gli strumenti per sviluppatori, fai clic con il tasto destro in qualsiasi punto del tuo sito mentre esegui il tema e seleziona Ispeziona elemento. Vedrai quindi una pagina di dati che assomiglia a qualcosa del genere:

Qui, puoi cercare colori di sfondo, informazioni sui font, dimensioni dei margini e altro ancora. Poi, puoi fare un elenco di funzionalità che vorresti modificare nel tuo tema child.

Passo 2: Esegui il Backup del Tuo Sito

È essenziale fare il backup del tuo sito attuale prima di apportare modifiche per evitare di perdere le tue impostazioni. Puoi sempre tornare a questo backup se necessario. Potresti anche considerare l’utilizzo di un sito provvisorio nel caso in cui commetti errori critici.

Ci sono un paio di modi diversi per fare il backup del tuo sito. Puoi farlo manualmente utilizzando un plugin di backup, che è probabilmente il metodo più semplice per la maggior parte delle persone.

In alternativa, puoi collaborare con un fornitore di hosting WordPress che si occupa dei backup del sito. I nostri piani di hosting gestito DreamPress includono backup automatici e su richiesta per proteggere i tuoi dati.

Passo 3: Crea Una Cartella Per Il Tuo Tema Child

Dovrai creare una cartella per archiviare i file del tuo tema child. Per fare ciò, accedi prima ai tuoi file tramite un client Protocollo di Trasferimento File Sicuro (SFTP) come Filezilla e naviga fino alla cartella dei temi:

Qui, puoi creare una nuova directory per il tuo tema child. Crea una nuova cartella che porta il nome del tema parent e aggiungi “-child” alla fine.

Ad esempio, se la directory del tuo tema parent è chiamata “twentytwentyfour”, la directory del tuo tema child sarà chiamata “twentytwentyfour-child”.

Passo 4: Crea Un Foglio Di Stile Per Il Tuo Tema Child

Ora devi creare un nuovo file di testo e nominarlo “style.css”. Questo file costituirà la base del tuo tema child. Avrà bisogno di alcune informazioni di base nell’intestazione, incluse il suo nome, URL, descrizione e altro:

Ora salva e aggiungi il file style.css alla cartella che hai appena creato.

Passo 5: Metti In Coda I Fogli Di Stile

In seguito, dovrai mettere in coda i fogli di stile del tema parent e del tema child.

La funzione enqueue garantisce che il tuo tema child prenda i suoi dati di stile dal tema parent. Ti permette anche di modificare il tema child senza influenzare il parent.

Crea un nuovo file di funzioni nella directory del tuo tema child e chiamalo “functions.php”. Puoi poi far riferimento al tema base nel tuo tema child aggiungendo il seguente codice:

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );

}

?>

Salva il file di testo e naviga nella tua dashboard di WordPress per attivare il tema.

Passo 6: Attiva Il Tema Child

Finalmente, è il momento di attivare il tuo tema child. Puoi caricarlo manualmente andando su Aspetto > Temi > Carica. Poi, scegli una versione .zip della directory del tuo tema child:

Attiva il tuo tema child. Dovrebbe essere ora attivo!

Come Personalizzare Il Tuo Tema Child

Una volta attivato il tuo nuovo tema child, è il momento di metterlo alla prova. Ci sono diversi modi in cui puoi personalizzare il design e le funzionalità.

Un principio da tenere presente è che WordPress cerca automaticamente i file nella directory del tema child prima di scandire i file del tema parent. Questo significa che qualsiasi foglio di stile o template che aggiungi al tuo tema child avrà la precedenza sullo stesso file nella cartella parent.

Il sistema child-before-parent ci offre un sacco di opzioni.

Creazione di Stili Personalizzati

Per modifiche di design di base che non sono coperte dal pannello Theme Options, puoi creare i tuoi stili personalizzati. Nella maggior parte dei casi, puoi semplicemente riscrivere le regole di stile del tema parent in un nuovo foglio di stile.

Il modo migliore per trovare il CSS che vuoi modificare è utilizzare gli Inspector Tools del tuo browser. Puoi esaminare il CSS e l’HTML dietro qualsiasi pagina web facendo clic destro su di essa e selezionando Inspect Element.

Alla parte inferiore o sul lato destro dello schermo, troverai il codice per la pagina. Passa il mouse sopra il codice e evidenzia l’HTML in sezioni:

Mentre passi il mouse, verranno visualizzate anche le regole CSS. Puoi modificare direttamente il CSS con gli strumenti per sviluppatori per vedere come appare.

In questo esempio, abbiamo cambiato il colore di sfondo da “#9888fd” a “#9888fe” per vedere come apparirebbe. Il colore di sfondo cambierà istantaneamente, ma non è permanente.

Ora devi copiare la regola CSS e aggiungerla al file style.css del tuo tema child in questo modo:

body {

Background-color: #9888fe;

}

Salva queste modifiche nel file style.css e torna alla tua Dashboard di WordPress per visualizzare l’anteprima del tema. Questo processo potrebbe richiedere tentativi ed errori, quindi prenditi il tempo necessario per perfezionare lo stile.

Sovrascrivi i Template dei Temi Parent

Proprio come possiamo creare un nuovo foglio di stile per CSS personalizzato, è possibile sovrascrivere i template parent con nuovo contenuto. Questo ti permette di apportare modifiche radicali alla struttura di specifiche parti del tuo sito web — come l’intestazione e il menu di navigazione, il piè di pagina o il template dei singoli post.

Immagina di voler cambiare il layout del post nel tuo tema child, in modo che il titolo di ogni post appaia sopra l’immagine in evidenza.

Questa sezione del tuo sito è controllata dal file template content.php. Per iniziare a fare modifiche, scarica una copia di content.php dalla cartella principale tramite SFTP.

Successivamente, apri il template child nel tuo editor di testo. Potresti vedere qualcosa di simile:

twentytwentyfour_post_thumbnail();

<header>
<!-- Titolo e altre informazioni dell'intestazione qui -->
</header>

Per modificare il layout del tuo header, potresti cambiare il codice in modo che sia:

<header>
<!-- Titolo e altre informazioni dell'intestazione qui -->
</header>

// Miniatura del post
twentytwentyfour_post_thumbnail();

Infine, salva il file e caricarlo nella cartella del tema child. Assicurati di mantenere il nome originale del file, altrimenti WordPress non riconoscerà il tuo modello modificato.

Modelli di Pagina Personalizzati

Vuoi qualcosa di completamente diverso? Puoi anche aggiungere nuovi template al tuo tema child.

Il processo è esattamente come sviluppare template per un tema regolare, eccetto il fatto che potresti dover anche creare template personalizzati per l’intestazione e il piè di pagina. Questi file devono essere referenziati nel tuo nuovo template personalizzato — e non dimenticare di aggiungere del nuovo CSS tramite il foglio di stile del child esistente.

Creazione di Nuove Funzioni PHP

Se vuoi introdurre nuove funzionalità nel tuo tema child, puoi creare un file functions.php child. Questo funziona in tandem con il file delle funzioni parent, piuttosto che sostituirlo.

Di conseguenza, non è necessario fare una copia del file originale — basta scrivere gli script aggiuntivi che vuoi aggiungere sopra. Il file delle funzioni child verrà eseguito per primo, seguito dalla versione parent.

Aggiungere un file di funzioni al tuo tema child apre una vasta gamma di possibilità. Per esempio, potresti:

• Registra nuovi widget e shortcode.
• Aggiungi tipi di post personalizzati e tassonomie.
• Crea nuove opzioni del tema.
• Collega fogli di stile esterni e file JavaScript.
• Prepara il terreno per la traduzione e la localizzazione dei contenuti.
• Sovrascrivi alcune funzioni del tema parent.

Puoi scoprire di più sulla creazione di queste funzioni nel nostro guida completa a functions.php.

Utilizzo degli Hook del Tema

Il modo più efficiente di aggiungere funzionalità al tuo nuovo file di funzioni è utilizzando dei hooks.

I ganci fanno parte della funzionalità principale di WordPress. Ti permettono di modificare varie parti del tuo sito web senza dover modificare i template individualmente.

Invece, ti basta assegnare il tuo codice all’hook rilevante nel file delle funzioni. WordPress applicherà automaticamente questo codice agli elementi corrispondenti nel tema parent.

In WordPress, gli hook si presentano in due varianti:

• Action Hooks: Utilizzati per “agganciare” codice personalizzato in parti specifiche del tuo tema WordPress, come una nuova area widget o un messaggio personalizzato da visualizzare dopo ogni post del blog.
• Filter Hooks: Utilizzati per modificare il contenuto generato sia da WordPress che da un tema padre, prima che sia inviato a un browser o salvato nel database. In termini di temi child, sono spesso usati per regolare la lunghezza degli estratti.

La maggior parte dei ganci richiede solo un piccolo frammento di codice. Ad esempio, ecco il codice che ti servirebbe per aggiungere del contenuto al piè di pagina del tuo sito:

function my_custom_footer_content() {
echo '<div>Contenuto personalizzato del footer qui</div>';
}
add_action('wp_footer', 'my_custom_footer_content');

Vedi quella parte di ‘wp_footer’? È l’hook, e indica a WordPress dove deve andare questo codice. In questo caso, la tua funzione personalizzata dovrebbe venire subito dopo il template di footer — ovunque sia invocato all’interno del tuo tema. Interessante, vero?

Domande Frequenti sui Temi Child di WordPress

Ci piacerebbe pensare che questa guida sia stata abbastanza completa fino a ora. Ma se hai ancora domande, noi abbiamo le risposte:

Dovrei attivare un tema parent o un tema child in WordPress?

C’è una regola semplice qui: attiva il tema che vuoi usare.

Se desideri ripristinare il design originale come tema attivo, attiva il tema parent. Ma se vuoi abilitare quelle meravigliose personalizzazioni, assicurati di attivare il tema child.

Quali sono gli svantaggi dell’uso di un tema child?

Non ci sono molti svantaggi nell’utilizzare un tema child. È un po’ più tecnico rispetto alla personalizzazione del tuo sito tramite la Dashboard. Per apportare modifiche più significative, avrai bisogno di almeno alcune conoscenze di base di HTML, CSS e PHP.

È anche importante notare che un tema child scarsamente ottimizzato può rallentare il tuo sito, e sarai sempre dipendente dal tema parent.

Un tema child può esistere senza un tema parent?

No, un tema child non funziona senza un tema parent.

Il concetto di tema child dipende intrinsecamente da un tema parent. Ricorda che il parent fornisce tutto tranne gli stili personalizzati e i template che aggiungi. Inoltre, l’intera struttura delle cartelle del tuo sito sarebbe disordinata se rimuovessi la cartella parent.

Se vuoi separare il tuo design secondario, considera di convertirlo in un tema autonomo.

Puoi avere più temi child per un unico tema parent?

Sì, puoi farlo. Questo significa che puoi creare più versioni dello stesso sito per adattarlo a diversi pubblici. Potresti anche eseguire un test A/B in questo modo.

Quali sono i migliori plugin per la creazione di temi child di WordPress?

Oltre al Child Theme Configurator, con cui abbiamo lavorato in precedenza, dai un’occhiata a WP Child Theme Generator e Child Theme Wizard.

WordPress.org ha anche un suo plugin sperimentale per temi child, chiamato Create Block Theme.

Qual è la differenza tra un tema child e un tema personalizzato?

La dipendenza è probabilmente la differenza più grande. Un tema child si appoggia sui file principali di un tema parent, mentre un tema personalizzato è autonomo.

Quell’indipendenza significa che gli sviluppatori di temi possono introdurre nuove funzionalità principali e più personalizzazioni. D’altra parte, devi essere a tuo agio con il codice per creare e mantenere un tema personalizzato.

Richiede molto più tempo di sviluppo anche per costruire un tema completo da zero.

Proteggi Le Tue Personalizzazioni E Aggiornamenti Del Tema

Utilizzare un tema child ti aiuta ad evitare le complicazioni di modificare direttamente un tema parent. Un tema child è facile da modificare, permettendoti di apportare cambiamenti di design significativi a un sito web esistente. Inoltre, non è influenzato dagli aggiornamenti automatici del tema.

Ecco un rapido riassunto di come creare manualmente un tema child:

• Fai un piano.
• Fai il backup del tuo sito attuale.
• Crea una cartella per il tuo tema child utilizzando un client SFTP.
• Crea un foglio di stile e caricarlo sul tuo sito.
• Accoda i fogli di stile del tema child e del tema parent.
• Attiva e anteprima del tuo tema child.
• Apporta modifiche utilizzando CSS.

Avere un tema accattivante è solo una parte della gestione di un sito web di successo. Avrai anche bisogno di un fornitore di hosting che si adatti alle tue esigenze. Scopri i pacchetti di hosting condiviso di DreamHost per piani convenienti che danno priorità alle prestazioni del sito web, con garanzia di uptime del 100%!