Come Creare un Tema Figlio di WordPress (Guida per Principianti)

I temi figli sono uno di quei termini di WordPress che vengono usati spesso e confondono i principianti. Potresti anche averne sentito parlare e aver deciso di saltare la loro creazione a causa di quanto sembrano complicati.

Lo capiamo. Ma secondo la nostra esperienza, i temi figli possono salvarti un sacco di grattacapi in futuro. Proteggono le tue preziose personalizzazioni, ti permettono di sperimentare senza rompere il tuo sito e rendono l'aggiornamento del tuo tema un gioco da ragazzi.

Se sei interessato, abbiamo spiegato come funziona un tema figlio, come personalizzarlo e come apportare modifiche in questa guida per principianti.

Come Funziona un Tema Figlio e Perché Ne Hai Bisogno?

Un tema figlio eredita tutte le funzionalità, i compiti e gli stili di un altro tema di WordPress. Quando crei un tema figlio, il tema originale viene chiamato tema padre.

L'ereditarietà include il file style.css del tema padre, che definisce lo stile principale del tema. Il tema figlio può sovrascrivere o estendere le sue proprietà ereditate aggiungendo i propri file o modificando quelli esistenti.

Sebbene sia possibile personalizzare il tuo tema WordPress senza installare un tema figlio, ci sono diverse ragioni per cui potresti comunque averne bisogno:

• I temi child proteggono le tue personalizzazioni durante gli aggiornamenti del tema, mantenendole al sicuro dall'essere sovrascritte. Se modifichi direttamente il tema padre, tali modifiche potrebbero scomparire al momento dell'aggiornamento.
• I temi child ti consentono di provare in sicurezza nuovi design o funzionalità senza compromettere il tema originale del sito, in modo simile a un ambiente di staging.
• Se sai come codificare, i temi child possono rendere il processo di sviluppo più efficiente. I file di un tema child sono molto più semplici di quelli di un tema padre. Puoi concentrarti sulla modifica solo delle parti del tema padre che desideri cambiare o espandere.

Cosa fare prima di creare un tema child per WordPress

Abbiamo visto molti utenti WordPress entusiasti di immergersi negli aspetti tecnici, solo per scoraggiarsi quando compaiono errori. Lo capiamo. Ecco perché è importante sapere in cosa ci si sta imbarcando prima di creare un tema child.

Ecco alcune cose che ti consigliamo di fare prima di proseguire con questa guida passo passo:

1. Sii consapevole che lavorerai con il codice. Come minimo, avrai bisogno di una comprensione di base di HTML, CSS, PHP e, opzionalmente, JavaScript per capire quali modifiche devi apportare. Puoi leggere di più a riguardo nel manuale dei temi WordPress.
2. Scegli un tema padre che abbia il design e le funzionalità del tuo sito web desiderati. Se possibile, trovane uno in cui devi apportare solo poche modifiche. Puoi seguire la nostra lista di controllo delle cose da fare prima di cambiare temi WordPress se necessario.
3. Usa un sito locale o un sito di staging per lo sviluppo del tema. Non vuoi creare errori involontari sul tuo sito live.
4. Esegui il backup del tuo sito web prima. Ti consigliamo di utilizzare un plugin di backup come Duplicator se è la prima volta.

Ci sono diversi modi per creare un tema figlio dal tuo tema esistente. Uno è con codice manuale, mentre altri richiedono un plugin, che è molto più adatto ai principianti.

Il primo metodo può sembrare intimidatorio se ti manca esperienza tecnica. Detto questo, anche se scegli uno dei metodi con plugin, ti consigliamo comunque di leggere il metodo manuale per familiarizzare con il processo e i file coinvolti.

Tenendo tutto questo a mente, passiamo a come creare un tema figlio in WordPress. Puoi saltare al metodo che preferisci usando i link qui sotto:

• Metodo 1: Creare manualmente un tema figlio di WordPress
• Metodo 2: Creare un tema figlio classico con un plugin
• Metodo 3: Creare un tema figlio a blocchi con un plugin
• Suggerimento bonus: scopri se il tuo tema ha un generatore di temi figli
• Come personalizzare il tuo tema figlio classico
• Come personalizzare il tuo tema figlio a blocchi
• Come modificare i file di template di un tema figlio
• Come aggiungere nuove funzionalità al tuo tema figlio
• Come risolvere i problemi del tuo tema figlio di WordPress

Metodo 1: Creare manualmente un tema figlio di WordPress

Innanzitutto, devi aprire /wp-content/themes/ nella cartella di installazione di WordPress.

Puoi farlo utilizzando il file manager del tuo hosting WordPress o un client FTP. Troviamo la prima opzione molto più semplice, quindi la useremo.

Se sei un cliente Bluehost, puoi accedere alla dashboard del tuo account di hosting e navigare nella scheda ‘Siti Web’. Successivamente, fai clic su ‘Impostazioni’.

Nella scheda Panoramica, scorri verso il basso fino alla sezione ‘Link rapidi’.

Quindi, seleziona ‘File Manager’.

A questo punto, devi accedere alla cartella public_html del tuo sito web e aprire il percorso /wp-content/themes/.

Qui, fai semplicemente clic sul pulsante ‘+ Cartella’ nell’angolo in alto a sinistra per creare una nuova cartella per il tuo tema figlio.

Puoi nominare la cartella come preferisci.

Per questo tutorial, useremo semplicemente il nome della cartella twentytwentyone-child poiché utilizzeremo Twenty Twenty-One come tema padre. Una volta fatto, fai clic su ‘Crea nuova cartella’.

Successivamente, devi aprire la cartella che hai appena creato e fare clic su ‘+ File’ per creare il primo file per il tuo tema figlio.

Se utilizzi un client FTP, puoi usare un editor di testo come Blocco note e caricare il file in seguito.

Procedi e nomina questo file ‘style.css’, poiché è il foglio di stile principale del tuo tema figlio e conterrà informazioni sul tema figlio.

Quindi, fai clic su ‘Crea nuovo file’.

Ora, fai semplicemente clic con il pulsante destro del mouse sul file style.css.

Successivamente, fai clic su ‘Modifica’ per aprire una nuova scheda come nello screenshot qui sotto.

In questa nuova scheda, puoi incollare il seguente testo e modificarlo in base alle tue esigenze:

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

Una volta fatto, fai semplicemente clic su ‘Salva modifiche’.

La prossima cosa da fare è creare un secondo file e chiamarlo functions.php. Questo file importerà o accoderà i fogli di stile dai file del tema padre.

Una volta creato il documento, aggiungi il seguente codice wp_enqueue:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'twenty-twenty-one-style'; // This is 'twenty-twenty-one-style' for the Twenty Twenty-one theme.
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(), // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'custom-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}

Una volta fatto, salva semplicemente il file come nel passaggio precedente.

Ora hai creato un tema figlio molto basilare. Quando vai su Aspetto » Temi nel tuo pannello di amministrazione di WordPress, dovresti vedere l'opzione Twenty Twenty-One Child.

Fai clic sul pulsante 'Attiva' per iniziare a utilizzare il tema figlio sul tuo sito.

Metodo 2: Creare un tema figlio classico con un plugin

Questo metodo successivo utilizza il plugin Child Theme Configurator. Questo plugin WordPress facile da usare ti consente di creare e personalizzare rapidamente temi figli WordPress senza usare codice, ma funziona bene solo con un tema classico (non a blocchi).

La prima cosa da fare è installare e attivare il plugin WordPress. Dopo l'attivazione, devi navigare su Strumenti » Temi Figli nella tua bacheca di WordPress.

Nella scheda Genitore/Figlio, ti verrà chiesto di scegliere un'azione. Seleziona semplicemente 'CREA un nuovo Tema Figlio' per iniziare.

Quindi, seleziona un tema padre da un menu a discesa. Selezioneremo il tema Hestia.

Dopodiché, fai semplicemente clic sul pulsante ‘Analizza’ per assicurarti che il tema sia adatto all'uso come tema padre.

Successivamente, ti verrà chiesto di nominare la cartella in cui verrà salvato il tema figlio. Puoi usare qualsiasi nome di cartella desideri.

Sotto, devi selezionare dove salvare i nuovi stili: nel foglio di stile principale o in uno separato.

Il foglio di stile principale è il foglio di stile predefinito che viene fornito con il tuo tema figlio. Quando salvi nuovi stili personalizzati in questo file, stai modificando direttamente gli stili principali del tuo tema figlio. Ogni modifica sovrascriverà lo stile del tema originale.

L'opzione separata ti consente di salvare un nuovo stile personalizzato in un file foglio di stile separato. Questo è utile se desideri preservare lo stile del tema originale e non sovrascriverlo.

A scopo dimostrativo, sceglieremo la prima opzione. Ma man mano che diventi più creativo con le personalizzazioni del tuo tema figlio, puoi sempre ripetere questo processo e selezionare la seconda opzione.

Scendendo, devi scegliere come verrà acceduto al foglio di stile del tema padre.

Useremo semplicemente l'opzione predefinita ‘Usa la coda degli stili di WordPress’ poiché consentirà al plugin di determinare automaticamente le azioni appropriate.

Quando arrivi al passaggio 7, dovrai fare clic sul pulsante etichettato ‘Fai clic per modificare gli attributi del tema figlio’.

Puoi quindi compilare i dettagli del tuo tema figlio.

Quando crei un tema figlio manualmente, perderai i menu e i widget del tema padre. Child Theme Configurator può copiarli dal tema padre al tema figlio. Seleziona la casella nel passaggio 8 se desideri farlo.

Infine, fai clic sul pulsante ‘Crea nuovo tema figlio’ per creare il tuo nuovo tema figlio.

Il plugin creerà una cartella per il tuo tema figlio e aggiungerà i file style.css e functions.php che utilizzerai per personalizzare il tema in seguito.

Prima di attivare il tema, dovresti fare clic sul link in alto nella schermata per visualizzarlo in anteprima e assicurarti che abbia un bell'aspetto e non comprometta il tuo sito.

Se tutto sembra funzionare, fai clic sul pulsante ‘Attiva e pubblica’.

Ora, il tuo tema child sarà attivo.

A questo punto, il tema child avrà lo stesso aspetto e si comporterà esattamente come il tema padre.

Metodo 3: Creare un tema figlio a blocchi con un plugin

Se utilizzi un tema a blocchi, WordPress offre un modo semplice per creare un tema child con il plugin Create Block Theme.

Innanzitutto, dovrai installare e attivare il plugin di WordPress. Dopodiché, vai su Aspetto » Crea tema a blocchi.

Qui, seleziona semplicemente ‘Crea un figlio di [nome tema corrente].’

Successivamente, compila le informazioni del tuo tema figlio. In questo esempio stiamo usando Twenty Twenty-Four, quindi lo chiameremo Twenty Twenty-Four Child.

Abbiamo anche fornito una descrizione e un autore per il tema figlio. Una volta fatto, fai clic sul pulsante ‘Crea tema figlio’.

Il plugin creerà e installerà il file zip del tema WordPress nella tua area di amministrazione.

Una volta fatto, il tuo sito web attiverà automaticamente questo tema figlio appena creato. Puoi confermarlo andando su Aspetto » Temi.

Suggerimento bonus: scopri se il tuo tema ha un generatore di temi figli

Se sei fortunato, il tuo tema WordPress potrebbe già avere una funzionalità esistente per creare un tema figlio.

Ad esempio, se usi Astra, puoi andare sul sito web Astra Child Theme Generator. Dopodiché, compila il nome del tuo tema figlio e fai clic sul pulsante ‘Genera’.

Il tuo browser scaricherà quindi automaticamente il tuo tema figlio sul tuo computer, che potrai poi installare tu stesso su WordPress.

Abbiamo anche trovato altri temi WordPress popolari che hanno un generatore di temi figli:

• OceanWP
• Ultra
• Nozama
• Eclipse

Come personalizzare il tuo tema figlio classico

Tecnicamente, puoi personalizzare il tuo tema figlio senza codice utilizzando il Personalizzatore del tema. Le modifiche che apporti lì non influenzeranno il tuo tema padre. Se non ti senti ancora a tuo agio con la codifica, sentiti libero di usare il Personalizzatore.

Detto questo, consigliamo anche di personalizzare il tema figlio con il codice.

Oltre ad apprendere di più sullo sviluppo di temi WordPress, la personalizzazione del codice consente di documentare le modifiche nei file del tema figlio, rendendo più facile tracciarle.

Ora, il modo più basilare per personalizzare un tema figlio è aggiungendo CSS personalizzato al file style.css. Per farlo, devi sapere quale codice devi personalizzare.

Puoi semplificare il processo copiando e modificando il codice esistente dal tema padre. Puoi trovare quel codice utilizzando lo strumento di ispezione di Chrome o Firefox o copiandolo direttamente dal file CSS del tema padre.

Metodo 1: Copiare il codice dall'ispettore di Chrome o Firefox

Il modo più semplice per scoprire il codice CSS che devi modificare è utilizzare gli strumenti di ispezione inclusi in Google Chrome e Firefox. Questi strumenti ti consentono di visualizzare l'HTML e il CSS dietro qualsiasi elemento di una pagina web.

Puoi leggere di più sullo strumento di ispezione nella nostra guida sui fondamenti dell'ispezione degli elementi: personalizzare WordPress per utenti fai-da-te.

Quando fai clic con il pulsante destro del mouse sulla tua pagina web e utilizzi l'ispezione degli elementi, vedrai l'HTML e il CSS della pagina.

Mentre sposti il mouse su diverse righe HTML, l'ispettore le evidenzierà nella finestra in alto. Ti mostrerà anche le regole CSS relative all'elemento evidenziato, in questo modo:

Puoi provare a modificare il CSS direttamente lì per vedere come apparirebbe. Ad esempio, proviamo a cambiare il colore di sfondo del corpo del tema in #fdf8ef. Trova la riga di codice che dice body { e al suo interno, il codice che dice color: .

Basta fare clic sull'icona del selettore di colore accanto a color: e incollare il codice HEX nel campo appropriato, in questo modo:

Ora, sai come cambiare il colore di sfondo usando CSS. Per rendere le modifiche permanenti, puoi aprire il tuo file style.css nella directory del tema figlio (usando il file manager o FTP).

Quindi, incolla il seguente codice sotto le informazioni del tema figlio, così:

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

body {
    background-color: #fdf8ef
}

Ecco come apparirà se vai nell'area di amministrazione di WordPress e apri Aspetto » Editor dei file del tema:

Se sei un principiante e vuoi apportare altre modifiche, ti consigliamo di familiarizzare con HTML e CSS in modo da sapere esattamente a quale elemento si riferisce ogni codice. Ci sono molti fogli di riferimento per HTML e CSS online a cui puoi fare riferimento.

Ecco il foglio di stile completo che abbiamo creato per il tema figlio. Sentiti libero di sperimentare e modificarlo:

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}

Metodo 2: Copiare il codice dal file style.css del tema padre

Forse ci sono molte cose nel tuo tema figlio che vuoi personalizzare. In tal caso, potrebbe essere più veloce copiare del codice direttamente dal file style.css del tema padre, incollarlo nel file CSS del tuo tema figlio e poi modificarlo.

La parte difficile è che il file del foglio di stile di un tema può sembrare davvero lungo e opprimente per i principianti. Tuttavia, una volta comprese le basi, non è poi così difficile.

Usiamo un esempio reale dal foglio di stile del tema padre Twenty Twenty-One. Devi navigare in /wp-content/themes/twentytwentyone nella cartella della tua installazione di WordPress e quindi aprire il file style.css nel tuo file manager, FTP o Editor dei file del tema.

Vedrai le seguenti righe di codice:

:root {
/* Colors */
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5);
--global--color-white-90: rgba(255, 255, 255, 0.9);
--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray); /* Headings */
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green); /* Mint, default body background */
--global--color-border: var(--global--color-primary); /* Used for borders (separators) */
}

Le righe da 3 a 15 controllano il tipo di colori (come giallo, verde, viola) che l'intero tema utilizzerà nei loro specifici codici HEX. E poi, per righe come ‘global-color-primary’ o ‘global-color-secondary,’ ciò significa che quelli sono i colori primari e secondari di quel tema.

Puoi copiare queste righe di codice nel foglio di stile del tuo child theme e quindi modificare i codici HEX per creare il tuo schema di colori perfetto.

Scorrendo verso il basso nel foglio di stile del tema padre, noterai che anche altre variabili potrebbero avere queste variabili di colore, come qui:

/* Buttons */
--button--color-text: var(--global--color-background);

Questo significa fondamentalmente che tutti i testi dei pulsanti utilizzeranno lo stesso colore dichiarato in --global--color-background:, che è verde menta (--global--color-green: #d1e4dd). Se cambi l'HEX in --global--color-green:, anche il testo del pulsante avrà un aspetto diverso.

Puoi anche seguire questi tutorial per sperimentare con le personalizzazioni del tuo child theme:

• Come cambiare il colore del testo in WordPress
• Come cambiare la dimensione del logo di WordPress (funziona con qualsiasi tema)
• Come personalizzare lo stile dei blockquote nei temi WordPress
• WordPress Body Class 101: Suggerimenti e trucchi per i designer di temi
• Come aggiungere un effetto parallasse a qualsiasi tema WordPress

Come personalizzare il tuo tema figlio a blocchi

Se utilizzi un child block theme, la maggior parte delle tue personalizzazioni verrà apportata al tuo file theme.json, non a style.css.

Tuttavia, durante i nostri test, abbiamo trovato il processo complicato. A differenza dei temi child classici, c'è un divario di conoscenza maggiore che devi colmare (soprattutto riguardo a JSON e a come viene gestito il CSS) se sei nuovo allo sviluppo di temi WordPress.

Detto questo, abbiamo trovato un'alternativa molto più semplice utilizzando il plugin Create Block Theme. Questo strumento può registrare qualsiasi modifica apportata nell'Editor del Sito Completo di WordPress nel file child theme.json. Quindi, non dovrai toccare alcun codice perché il plugin se ne occuperà per te.

Ti mostriamo un esempio. Per prima cosa, apri l'Editor del Sito Completo di WordPress andando su Aspetto » Editor.

Vedrai diversi menu tra cui scegliere.

Qui, seleziona semplicemente 'Stili'.

Nella pagina successiva, vedrai diverse combinazioni di stili predefinite tra cui scegliere.

Ai fini del nostro esempio, puoi semplicemente saltare tutto questo e fare clic sull'icona della matita.

Ora, proviamo a cambiare alcune parti del tuo child theme, come i font.

Per questo esempio, fai clic su ‘Tipografia’ nella barra laterale destra.

Successivamente, vedrai alcune opzioni per cambiare i font globali del tema per testo, link, intestazioni, didascalie e pulsanti.

Clicchiamo su ‘Intestazioni’ per scopi dimostrativi.

Nel menu a discesa Font, cambia la selezione originale con qualsiasi font disponibile.

Sentiti libero di cambiare l'aspetto, l'altezza della linea, lo spazio tra le lettere e la capitalizzazione delle lettere, se necessario.

Una volta terminato, fai semplicemente clic su ‘Salva’. Dopodiché, puoi fare clic sul pulsante Crea tema a blocchi (l'icona della chiave inglese) accanto a ‘Salva’.

Quindi, fai clic su ‘Salva modifiche al tema’.

Successivamente, seleziona quali modifiche salvare nel child theme.

Gli esempi includono font, stili personalizzati, modifiche ai template e altro ancora.

Una volta fatto, scorri fino in fondo alla barra laterale.

Quindi, fai clic su ‘Salva modifiche’.

Ora, visualizziamo il tuo file theme.json in modo da poter vedere le modifiche riflesse nel codice.

Per fare ciò, fai di nuovo clic sul pulsante Crea tema a blocchi e seleziona ‘Visualizza theme.json’.

Dopo aver fatto clic su di esso, vedrai che il file include alcune nuove aggiunte di codice.

Nel nostro caso, il file include codice che indica che i tag di intestazione utilizzeranno il font Inter con aspetto semi-grassetto, altezza della linea 1,2, spaziatura tra le lettere di 1 pixel e in minuscolo.

Quindi, ogni volta che modifichi il tuo child block theme, assicurati di fare clic sull'icona della chiave inglese e salvare le modifiche in modo che siano ben documentate.

Come modificare i file di template di un child theme

La maggior parte dei temi di WordPress ha template, che sono file del tema che controllano il design e il layout di un'area specifica all'interno di un tema. Ad esempio, la sezione del footer è solitamente gestita dal file footer.php e l'header è gestito dal file header.php.

Ogni tema di WordPress ha anche un layout diverso. Ad esempio, il tema Twenty Twenty-One ha un'intestazione, un loop di contenuti, un'area widget nel piè di pagina e un piè di pagina.

Se desideri modificare un modello, devi trovare il file nella cartella del tema padre e copiarlo nella cartella del tema figlio. Dopodiché, dovresti aprire il file ed effettuare le modifiche desiderate.

Ad esempio, se utilizzi Bluehost e il tuo tema padre è Twenty Twenty-One, puoi andare su /wp-content/themes/twentytwentyone nel tuo file manager. Quindi, fai clic destro su un file modello come footer.php e seleziona 'Copia'.

Successivamente, inserisci il percorso del file del tuo tema figlio.

Una volta terminato, fai semplicemente clic su 'Copia file'.

Verrai quindi reindirizzato al percorso del file.

Per modificare il file footer.php, fai semplicemente clic destro su di esso e seleziona 'Modifica'.

Come esempio, rimuoveremo il link 'Orgogliosamente alimentato da WordPress' dall'area del piè di pagina e aggiungeremo un avviso di copyright.

Per fare ciò, dovresti eliminare tutto ciò che si trova tra i tag <div class= "powered-by">:

<div class="powered-by">
				<?php
				printf(
					/* translators: %s: WordPress. */
					esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
					'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
				);
				?>
			</div><!-- .powered-by -->

Quindi devi incollare il codice che trovi sotto quei tag nell'esempio seguente:

<div class="powered-by">
<p>© Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
</div><!-- .powered-by -->

Ecco cosa dovresti avere ora nell'editor di testo:

Procedi e salva il file per rendere ufficiali le modifiche.

Dopo di che, visita il tuo sito web per vedere il nuovo avviso di copyright.

Come aggiungere nuove funzionalità al tuo tema figlio

Il file functions.php in un tema utilizza codice PHP per aggiungere funzionalità o modificare funzionalità predefinite su un sito WordPress. Funziona come un plugin per il tuo sito WordPress che viene attivato automaticamente con il tuo tema corrente.

Troverai molti tutorial di WordPress che ti chiedono di copiare e incollare snippet di codice in functions.php. Ma se aggiungi le tue modifiche al tema padre, queste verranno sovrascritte ogni volta che installerai un nuovo aggiornamento del tema.

Ecco perché consigliamo di utilizzare un tema figlio quando si aggiungono snippet di codice personalizzati. In questo tutorial, aggiungeremo una nuova area widget al nostro tema.

Possiamo farlo aggiungendo questo snippet di codice al file functions.php del nostro tema figlio. Per rendere il processo ancora più sicuro, consigliamo di utilizzare il plugin WPCode in modo da non modificare direttamente il file functions.php, riducendo il rischio di errori.

Puoi leggere la nostra guida su come aggiungere snippet di codice personalizzati per maggiori informazioni.

Ecco il codice che devi aggiungere al tuo file functions.php:

// Register Sidebars
function custom_sidebars() {

$args = array(
'id'            => 'custom_sidebar',
'name'          => __( 'Custom Widget Area', 'text_domain' ),
'description'   => __( 'A custom widget area', 'text_domain' ),
'before_title'  => '<h3 class="widget-title">',
'after_title'   => '</h3>',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget'  => '</aside>',
);
register_sidebar( $args );

}
add_action( 'widgets_init', 'custom_sidebars' );

Una volta salvato il file, puoi visitare la pagina Aspetto » Widget della tua bacheca di WordPress.

Qui vedrai la tua nuova area widget personalizzata a cui puoi aggiungere widget.

Ci sono molte altre funzionalità che puoi aggiungere al tuo tema utilizzando snippet di codice personalizzati. Dai un'occhiata a questi trucchi estremamente utili per il file functions.php di WordPress e snippet di codice WordPress utili per principianti.

Come risolvere i problemi del tuo tema figlio di WordPress

Se non hai mai creato un tema figlio prima, è molto probabile che commetterai alcuni errori, ed è normale. Ecco perché ti consigliamo di utilizzare un plugin di backup, creare un sito locale o un ambiente di staging e utilizzare contenuti fittizi per il tuo sito demo.

Detto questo, non arrenderti troppo presto. La community di WordPress è molto intraprendente, quindi qualunque problema tu stia riscontrando, una soluzione probabilmente esiste già.

Per cominciare, puoi consultare i nostri errori più comuni di WordPress per trovare una soluzione.

Gli errori più comuni che probabilmente vedrai sono errori di sintassi causati da qualcosa che hai trascurato nel codice. Troverai aiuto per risolvere questi problemi nella nostra guida rapida su come trovare e correggere l'errore di sintassi in WordPress.

Inoltre, puoi sempre ricominciare se qualcosa va molto storto. Ad esempio, se hai accidentalmente eliminato qualcosa di cui il tuo tema padre aveva bisogno, puoi semplicemente eliminare il file dal tuo tema figlio e ricominciare.

Speriamo che questo articolo ti abbia aiutato a imparare come creare un tema figlio di WordPress. Potresti anche voler consultare la nostra guida definitiva su come testare il tuo tema WordPress rispetto agli standard più recenti e il nostro articolo di confronto su temi WordPress gratuiti vs premium.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.