Come creare un tema figlio in WordPress: una guida semplice 

Come proprietario di un sito web WordPress , è naturale voler sperimentare con il design e le funzionalità dei temi WordPress. Ma qual è il modo migliore per farlo senza modificare il tema originale? Un tema figlio in WordPress è un ottimo modo per modificare e testare il tuo tema senza il rischio di compromettere il funzionamento del tema originale.

Utilizzare un tema figlio di WordPress è un modo intelligente per personalizzare in sicurezza il codice del tema senza rischiare di compromettere il lavoro svolto. Se hai intenzione di modificare il CSS, l'HTMLo il PHP, un tema figlio è la soluzione ideale. Perché? Perché senza un tema figlio, qualsiasi aggiornamento al tema principale potrebbe cancellare le modifiche apportate.

Per semplificare le cose, abbiamo creato una guida per principianti che spiega come funziona un tema figlio, come configurarlo e come apportare le modifiche desiderate. Immergiti e personalizzalo in tutta sicurezza!

Capire il tema figlio in WordPress

Un tema figlio, come suggerisce il nome, è come un "componente aggiuntivo" al tema, ereditandone caratteristiche e stili. Quando si desidera personalizzare un tema WordPress, intervenire direttamente sui file del tema può essere rischioso, poiché qualsiasi modifica può alterare il tema di base. È qui che entrano in gioco i temi figlio: rappresentano un modo più sicuro per apportare modifiche senza toccare i file originali.

Il tema figlio eredita automaticamente lo stile principale dal file style.css del tema padre, che definisce l'aspetto generale del tema. Con un tema figlio, puoi facilmente modificare o ampliare questo stile aggiungendo i tuoi file o apportando modifiche a quelli esistenti. Questo ti offre la flessibilità di personalizzare il tema senza modificare i file originali.

I temi child sono archiviati in una cartella separata dal tema principale e si basano su quest'ultimo per le funzionalità, a meno che non si decida di apportare modifiche. Quando si attiva un tema child in WordPress, questo viene collegato al tema principale e WordPress controllerà prima i file del tema child. Se un file non è stato modificato, WordPress utilizzerà semplicemente la versione del tema principale.

Ricorda, però, che un tema figlio non può funzionare da solo. Per funzionare correttamente, è necessario che il tema padre sia installato accanto a sé.

Leggi di più su: Sviluppo di plugin e temi WordPress in outsourcing

Vantaggi dell'utilizzo di un tema figlio in WordPress

Creare un tema figlio è un modo intelligente per apportare modifiche al tuo WordPress senza il rischio di perdere tutto il lavoro svolto. Se modificassi direttamente i file del tema principale, ogni aggiornamento del tema cancellerebbe le tue personalizzazioni. Questo ti metterebbe di fronte a una scelta frustrante: o saltare tutti gli aggiornamenti futuri, con possibili problemi di compatibilità e sicurezza, oppure aggiornare e perdere il tempo e l'impegno profuso nella personalizzazione del tuo tema WordPress.

Con un tema figlio, tuttavia, non è necessario fare questa scelta. Tutte le modifiche vengono archiviate in modo sicuro in una cartella separata, il che significa che è possibile conservarle anche durante gli aggiornamenti del tema padre. Inoltre, questa configurazione semplifica lo spostamento delle personalizzazioni da un sito all'altro, se necessario, risparmiando tempo se si lavora su più siti o si migra a uno nuovo.

Un altro grande vantaggio dell'utilizzo di un tema figlio è che rappresenta un ottimo modo per imparare a sviluppare temi personalizzati in un ambiente a basso rischio. Puoi sperimentare modifiche e nuove funzionalità e, se qualcosa non va come previsto, puoi semplicemente disattivare il tema figlio. Il tuo sito tornerà immediatamente all'aspetto e alle funzionalità originali del tema principale, quindi non ci saranno conseguenze negative.

Scopri di più: Come modificare e personalizzare senza problemi le intestazioni in WordPress?

Cose da fare prima di creare un tema figlio in WordPress

Ora, abbiamo visto molti utenti WordPress desiderosi di iniziare a personalizzare i propri siti, solo per poi scontrarsi con un muro quando si presentano errori inaspettati. È del tutto comprensibile: cimentarsi con un tema figlio può sembrare entusiasmante, finché non si presentano le sfide tecniche.

Ecco perché è essenziale prepararsi un po' prima di iniziare, proprio come ci si prepara prima di sostenere un esame. Ecco alcuni suggerimenti che potresti seguire prima di iniziare a creare il tuo tema figlio:

Comprendere le basi del codice

Lavorare con un tema figlio significa avere a che fare con il codice. Come minimo, una conoscenza di base di HTML, CSS e PHP sarà utile (e possibilmente anche di JavaScript, se si desidera approfondire l'argomento). Se non si ha familiarità con la programmazione, il manuale dei temi di WordPress è un ottimo punto di partenza per una guida rapida.

Scopri: come convertire Figma in codice: React, HTML, Vue, JS, CSS

Scegli il tema giusto per i genitori

Scegli un tema principale che si avvicini già all'aspetto e alle funzionalità che desideri. Idealmente, ne troverai uno che richiede solo pochi ritocchi, rendendo il processo di personalizzazione più fluido. Se stai cambiando completamente tema, dai un'occhiata alla nostra checklist di cose da fare prima di cambiare tema WordPress: ti risparmierà potenziali grattacapi!

Utilizzare un sito locale o di staging per i test

È preferibile fare delle prove su un sito locale o su un sito di staging piuttosto che passare direttamente al sito di produzione. In questo modo, se commetti un errore, non influirai sull'aspetto o sulla funzionalità del sito live.

Crea un backup del tuo sito

Prima di apportare qualsiasi modifica, esegui un backup del tuo sito web. Se è la prima volta che lo fai, un plugin come Duplicator può semplificare e velocizzare il processo di backup. In questo modo, potrai ripristinare rapidamente il tuo sito se qualcosa non dovesse andare come previsto.

Una volta apprese queste nozioni di base, sarai pronto a seguire la nostra guida passo passo per creare con sicurezza il tema per il tuo bambino!

Scopri: le migliori soluzioni per eseguire il backup di più siti web WordPress

Come creare manualmente un tema figlio in WordPress: 5 semplici passaggi

Creare un tema figlio in WordPress è più facile di quanto sembri ed è un ottimo modo per capire come funzionano i temi figlio senza mettere a rischio il tema principale.

Vediamo come creare un tema figlio basato sul tema predefinito di WordPress Twenty Fifteen e come apportare alcune modifiche personalizzate per vedere il processo in azione.

Passaggio 1: creare una cartella tematica figlio

Per prima cosa, crea una nuova cartella sul tuo computer in cui archiviare tutti i file del tuo child theme. In seguito, caricherai questa cartella sul tuo sito web.

Puoi assegnare alla cartella il nome del tema principale aggiungendo "-child" alla fine. Ad esempio, se il tema principale si chiama "Twenty Twenty-Two", la cartella del tema secondario si chiamerà twentytwentytwo-child. Questo la rende facile da identificare come tema secondario del tema principale.

Passaggio 2: imposta un foglio di stile per il tuo tema figlio

Successivamente, crea un file style.css all'interno della cartella del tuo nuovo tema figlio. Questo file conterrà tutti gli stili personalizzati per il tuo tema figlio.

Per impostare correttamente il foglio di stile, aggiungi i seguenti commenti di intestazione all'inizio del file style.css. Questo indica a WordPress che il nuovo tema è figlio del tema padre:

Nome del tema: Tema figlio Twenty Twenty-Two URI: https://wordpress.org/themes/twentytwentytwo/ Autore: Team WordPress URI autore: https://wordpress.org/ Template: twentytwentytwo Descrizione: Tema figlio per Twenty Twenty-Two Versione: 1.0 */

Una volta salvato, accedi alla bacheca di WordPress e vai su Aspetto → Temi. Ora dovresti vedere il tuo tema figlio nell'elenco.

Passaggio 3: collegare i fogli di stile del tema padre e figlio

Per assicurarci che gli stili del tema padre vengano applicati, dobbiamo collegare il suo foglio di stile al tema figlio. Per farlo, creiamo un file functions.php nella cartella del tema figlio e aggiungiamo il seguente codice:

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

Questo codice caricherà il foglio di stile del tema padre in modo che il tema figlio ne erediti tutti gli stili.

Scopri: come riparare e sistemare il database di WordPress?

Passaggio 4: modifica il foglio di stile del tema figlio (style.css)

Ora puoi iniziare ad aggiungere i tuoi stili personalizzati direttamente nel file style.css del tema figlio. Ad esempio, per cambiare il colore dei link sul tuo sito, potresti aggiungere:

un {color: #D54E21;text-decoration: none;}

Questa regola sovrascrive lo stile dei link del tema principale senza influenzare il resto del suo design.

Da sapere: dovresti creare il tuo sito web con codice, senza codice o con un Website Builder?

Passaggio 5: modificare un file modello

Con un tema figlio, puoi anche modificare singoli template. Supponiamo che tu voglia cambiare il modo in cui vengono visualizzati i post modificando il file single.php.

• Copia single.php dal tema padre e incollalo nella cartella del tema figlio.
• Apri il file in un editor di testo e apporta le modifiche desiderate.

Ad esempio, se vuoi rimuovere la sezione commenti dalle pagine dei singoli post, individua questa parte del codice:

se (commenti_apri() || ottieni_numero_commenti() ) :commenti_template();endif;

Eliminalo o commentalo per nascondere i commenti. WordPress utilizzerà il file single.php modificato dalla cartella del tema figlio, quindi eventuali aggiornamenti al tema padre non sovrascriveranno la tua personalizzazione.

Scopri: come creare un modello di pagina personalizzato in WordPress?

Come creare un tema figlio con un plugin (nessuna codifica richiesta)

Se non ti appassiona la programmazione ma vuoi comunque creare un tema figlio, sei fortunato! Sebbene esistano diversi plugin che puoi utilizzare per creare un tema figlio in WordPress, useremo il Child Theme Configurator per spiegarti il ​​procedimento.

Questo plugin semplifica notevolmente la configurazione e la personalizzazione di un tema figlio per i temi WordPress classici (non a blocchi). Ecco una semplice guida passo passo per iniziare.

Passaggio 1: installa e attiva il plugin

Innanzitutto, accedi alla bacheca di WordPress, cerca "Child Theme Configurator" nella sezione Plugin e installalo. Una volta attivato, vai su Strumenti → Temi figlio.

Passaggio 2: imposta il tema figlio

Nel configuratore del tema figlio, vai alla Genitore/Figlio . Vedrai un'opzione per scegliere un'azione, seleziona "CREA un nuovo tema figlio" per iniziare.

Passaggio 3: scegli il tema principale

Successivamente, seleziona il tema principale su cui vuoi creare un tema figlio dal menu a discesa. Per questo esempio, supponiamo di utilizzare il tema Hestia. Dopo aver scelto il tema, clicca sul pulsante "Analizza" per assicurarti che sia compatibile con la creazione di un tema figlio.

Passaggio 4: Assegna un nome alla cartella del tema figlio

Ti verrà quindi chiesto di dare un nome alla cartella in cui verrà memorizzato il tema figlio. Puoi dare libero sfogo alla tua creatività o optare per un nome semplice come "Hestia-child" per mantenere tutto in ordine.

Passaggio 5: decidere dove salvare gli stili personalizzati

Ecco una scelta importante: puoi salvare i nuovi stili personalizzati nel foglio di stile principale (style.css) del tuo tema figlio oppure in un file di foglio di stile separato.

• Foglio di stile primario: questo è il file principale in cui vengono salvati gli stili per impostazione predefinita. Qualsiasi modifica apportata sovrascriverà gli stili del tema originale.

• Foglio di stile separato: questa opzione salva i tuoi stili personalizzati in un nuovo file, in modo che gli stili del tema originale rimangano invariati.

Per ora utilizzeremo il foglio di stile principale, ma sentiti libero di provare l'opzione separata se vuoi mantenere interamente l'aspetto del tema principale.

Scopri di più: I migliori strumenti software per la progettazione web per siti web straordinari e semplici da usare

Passaggio 6: impostare la gestione del foglio di stile del tema padre

Scorri verso il basso e scegli come caricare il foglio di stile del tema principale. Noi manterremo l'opzione predefinita "Usa la coda di stile di WordPress", poiché consente al plugin di gestirlo automaticamente.

Passaggio 7: personalizza i dettagli del tema figlio

Una volta raggiunto il passaggio 7, fai clic su "Fai clic per modificare gli attributi del tema figlio". Qui puoi aggiungere dettagli come il nome, la descrizione e la versione del tema figlio.

Passaggio 8: Copia menu e widget

Normalmente, la creazione di un tema figlio reimposta i menu e i widget. Per evitare di reimpostarli, seleziona la casella al passaggio 8 per copiarli dal tema padre al tema figlio.

Crea il tuo tema figlio

Infine, fai clic su "Crea nuovo tema figlio". Il plugin creerà automaticamente una cartella per il tuo tema figlio, completa dei file style.css e functions.php necessari per future personalizzazioni.

Anteprima e attivazione

Prima di attivarlo, clicca sul link di anteprima in alto a destra per assicurarti che tutto sia a posto. Se l'anteprima del tema figlio viene visualizzata correttamente senza alcun elemento danneggiato, clicca su "Attiva e pubblica" per renderlo attivo!

Ed ecco fatto! Il tuo tema figlio è ora attivo. A questo punto, avrà lo stesso aspetto e funzione del tema padre. Ora puoi aggiungere personalizzazioni al tema figlio in tutta sicurezza, senza modificare l'originale. Buona personalizzazione!

Scopri di più: I migliori temi WordPress Studio per le aziende creative

Cosa fare se il tema figlio di WordPress non funziona?

Il tuo tema figlio non mostra le modifiche? Non preoccuparti, ecco alcuni problemi comuni e le relative soluzioni per farlo funzionare come previsto.

Controlla due volte il tuo file functions.php

Per prima cosa, assicurati di aver aggiunto il foglio di stile del tema figlio nel tuo file functions.php. In caso contrario, il tema figlio non verrà caricato correttamente e il sito continuerà a visualizzare il tema padre, dando l'impressione che le modifiche non vengano visualizzate.

Lettura interessante: Laravel contro WordPress: i migliori rivali di PHP si sfidano

Conferma che il tuo foglio di stile si chiama style.css

Controlla di aver chiamato il tuo foglio di stile style.css, non stylesheet.css o altro. WordPress si aspetta che il foglio di stile principale del tema figlio si chiami style.css. Se ha un nome diverso, il tuo file functions.php non lo riconoscerà e i tuoi stili personalizzati non verranno applicati.

Verifica il nome del modello in style.css

Nel file style.css, il campo Template deve corrispondere esattamente al nome della cartella del tema padre. Questo indica a WordPress quale tema utilizzare come padre. Se il nome non è corretto, WordPress non saprà su quale tema basare il tema figlio.

Cancella la cache

A volte, la cache può impedire la visualizzazione degli aggiornamenti. Prova a svuotare la cache, soprattutto se utilizzi un plugin di caching. Può essere utile anche svuotare la cache del browser o aprire il sito in una finestra di navigazione in incognito per verificare se le modifiche vengono visualizzate. Se stai lavorando attivamente sul tema figlio, valuta la possibilità di disabilitare eventuali plugin di caching fino al termine del lavoro.

Usa !important nel tuo codice CSS

Se ti accorgi che gli stili del tema principale continuano a sovrascrivere il tuo CSS personalizzato, prova ad aggiungere !important agli stili a cui vuoi dare priorità. Questo farà sì che gli stili del tema figlio abbiano la precedenza su quelli del tema principale. Ad esempio:

p {background-color: gray !important;}

Questo trucco può essere utile per elementi, ID e classi CSS specifici per garantire che le modifiche vengano applicate.

Contatta il supporto del tema o controlla i forum

Se hai provato tutti questi passaggi e il tuo tema figlio continua a non funzionare, valuta la possibilità di contattare il team di supporto del tema o di consultare il forum del tema su WordPress.org. A volte, i temi hanno configurazioni uniche o codice personalizzato che potrebbero influire sul funzionamento dei temi figlio, e lo sviluppatore potrebbe avere consigli specifici.

Conclusione

E questo è tutto! A questo punto, dovresti avere una solida comprensione di cosa sia un tema figlio di WordPress e di come funzioni insieme a un tema padre. Installare un tema è solo l'inizio nella creazione di un sito WordPress.

Mentre l'editor Gutenberg integrato o il generatore di temi possono aiutarti a modificare il design, creare un tema figlio apre ancora più possibilità. Con un tema figlio, non solo puoi modificare il design, ma anche personalizzarne le funzionalità senza toccare i file principali, dandoti la totale libertà di rendere il tuo sito davvero unico.

Domande frequenti sulla creazione di un tema figlio in WordPress