Personalizzare un tema WordPress esistente è un'esigenza comune, ma la modifica diretta del tema può causare problemi. 

Se il tema viene aggiornato, le modifiche verranno sovrascritte! Un modo migliore è creare un tema figlio ereditato dal tema principale. 

I temi secondari ti consentono di modificare ed estendere un tema in modo sicuro e protetto. 

In questa guida dettagliata, discuteremo della creazione di un tema figlio in WordPress. Imparerai lo scopo dei temi secondari, come configurarne uno e come personalizzarlo per sovrascrivere il design e la funzionalità del tema principale. 

Con alcuni metodi, puoi creare un tema figlio e iniziare ad applicare le modifiche senza toccare i file del tema principale. 

Quindi, senza ulteriori indugi, iniziamo.

1 Che cos'è un tema per bambini?

Un tema figlio è un tema WordPress che eredita funzionalità da un tema principale. Ti consente di modificare o aggiungere nuove funzionalità senza modificare i file del tema principale. 

Ciò è utile perché se modifichi direttamente i file del tema principale, le modifiche andranno perse quando il tema verrà aggiornato. 

Con un tema figlio, puoi apportare modifiche senza influenzare il tema principale e ricevere aggiornamenti senza perdere le modifiche.

In questa sezione noterai che abbiamo menzionato il tema principale, ma di cosa si tratta esattamente?

2 Cos'è un tema principale?

Un tema principale è un tema predefinito che funge da base per un sito Web WordPress. Fornisce il Struttura basilare, layout e funzionalità del sito. 

Un tema principale può essere personalizzato per soddisfare le esigenze di un particolare sito Web aggiungendo o modificando le sue funzionalità. 

L'utilizzo di un tema principale può far risparmiare tempo e fatica durante la creazione di un sito Web, fornendo un punto di partenza per il design e la funzionalità.

A questo punto, possiamo dire che tutti i temi WordPress sono tecnicamente temi parent, a meno che non siano specificatamente progettati per essere temi child.

Ecco un punto chiave da ricordare: Un tema principale può esistere e funzionare in modo indipendente, mentre un tema figlio si basa sempre su un tema principale per fornire le funzionalità e le caratteristiche principali.

3 Perché utilizzare un tema figlio?

Esistono alcuni motivi principali per utilizzare un tema figlio anziché modificare direttamente un tema:

• La creazione di un tema figlio protegge le tue modifiche dalla sovrascrittura quando il file il tema principale viene aggiornato.
• Mantiene separati i file del tema genitore e figlio. Ciò aiuta a evitare confusione poiché i file sono organizzati.
• È possibile utilizzare più temi secondari per scopi diversi, come modificare stili o funzionalità. Tieni presente, tuttavia, che un sito Web può avere un solo tema attivo alla volta.
• È anche un ottimo modo per iniziare a sviluppare un nuovo tema WordPress completo.

Nota: Personalizzazioni estese in un tema figlio possono portare a problemi di gestione. Per progetti più grandi, creare un tema completo/principale basato sul tema originale è spesso meglio che continuare a modificare il tema figlio.

4 Prerequisiti per creare un tema figlio

Prima di creare un tema figlio, è importante avere alcuni requisiti. 

Innanzitutto, hai bisogno di un'installazione WordPress funzionante e di un tema principale per il quale desideri creare un tema figlio. 

È anche utile comprendere HTML, CSS e PHP, poiché modificherai il codice per personalizzare il tema figlio. 

Inoltre, dovresti essere in grado di copiare e incollare frammenti di codice da altre fonti. 

Si consiglia di esercitarsi in un ambiente di sviluppo locale utilizzando contenuto fittizio o spostando un sito WordPress live su un server locale a scopo di test. Ciò ti consente di testare il tema figlio prima di implementarlo su un sito live.

Infine, è importante avere a backup del sito Web nel caso qualcosa vada storto durante il processo.

Quindi, una volta impostati tutti questi requisiti, puoi creare un tema figlio. Tutto quello che devi fare è seguire il processo di configurazione del tema figlio descritto in questa guida.

Ma per questa guida utilizzeremo il tema WordPress predefinito Twenty Twenty-four.

5 Creare un tema figlio in WordPress

Ora che hai compreso il concetto di tema figlio, approfondiamo la creazione di un tema figlio in WordPress. 

Esploreremo due metodi comuni tra cui scegliere, adatti a diversi livelli di comfort:

5.1 Creazione di un tema figlio utilizzando un codice

Innanzitutto, accedi alla tua installazione WordPress tramite FTP o un file manager fornito dal tuo pannello di controllo di hosting. Passare a wp-content/themes directory e crea una nuova cartella con un nome univoco per il tuo tema figlio. 

Per questo tutorial, utilizzeremo il nome "mtschild" per la cartella del tema figlio.

Questa directory funge da spazio di archiviazione principale per i componenti del tema figlio.

All'interno della cartella del tema figlio, crea un nuovo file intitolato style.css. Questo file conterrà i dettagli essenziali per riconoscere e attivare il tuo tema figlio. Apri il file style.css e inserisci il codice successivo:

Theme Name: MTS Child Theme
Theme URI: https://www.mythemeshop.com/
Description: Child theme for the Twenty Twenty-Four Theme
Author: MyThemeShop
Author URI: https://www.mythemeshop.com
Template: twentytwentyfour
Version: 1.0.0
Text Domain: mtschild

Questo codice notifica a WordPress che il tuo tema figlio estende il tema principale specificato. Sostituisci "Tema figlio MTS" con il nome del tema figlio preferito e il campo del modello con il nome della cartella del tema principale.

Il passaggio successivo consiste nel garantire che il tema figlio erediti gli stili dal tema principale. Per raggiungere questo obiettivo, devi accodare il foglio di stile del tema principale.

Per fare ciò, accedi al file Functions.php nella directory del tuo tema figlio (creane uno se è assente) e implementa uno dei seguenti codici.

Se il tuo tema principale non carica alcun foglio di stile, utilizza il seguente codice per caricare style.css tramite Functions.php:

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
wp_enqueue_style( 'mts_child_theme-style', get_stylesheet_uri() );
}

Questo codice può funzionare anche se il tema principale carica esclusivamente il suo foglio di stile. 

Tuttavia, se il tema principale carica esclusivamente il foglio di stile del tema attivo, devi inoltre accodare il foglio di stile del tema principale tramite functions.php utilizzando il codice seguente:

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
	wp_enqueue_style( 'mts-child-theme-parent-style', get_parent_theme_file_uri( 'style.css' ) );
}

Per il tema Twenty Twenty-Four utilizzato in questa guida, applicheremo il primo codice poiché il tema non carica alcun foglio di stile. 

Ricordati di iniziare con il <?php tag quando si aggiunge il codice. Modifica questi codici secondo le tue esigenze, soprattutto dove si trova il nome del tema mts_child_theme è utilizzato.

Una volta completati i passaggi precedenti, accedi nuovamente alla dashboard di WordPress e procedi Aspetto → Temi. Passa il mouse sopra il tema figlio e fai clic su Attivare pulsante.

Dato che non hai ancora apportato alcuna modifica al tema figlio, il tuo sito web manterrà la funzionalità e l'aspetto del tema principale. 

Tuttavia, ti guideremo nella personalizzazione del tema figlio per prepararti a ulteriori modifiche.

Questo è il processo manuale di creazione di un tema figlio utilizzando il codice in WordPress. Se questo metodo sembra complesso, puoi esplorare l'approccio del plug-in che tratteremo nella sezione successiva.

5.2 Creazione di un tema figlio utilizzando un plugin

Creare un tema figlio utilizzando un plugin è semplice e facile. Per prima cosa è necessario installare e attivare il file Configuratore di temi figlio collegare. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress.

Una volta attivato il plugin, vai alla dashboard di WordPress e vai a Strumenti → Temi figlio.

Sulla Seleziona una scheda Tema principale, scegli il tema principale dal menu a discesa per la creazione del tema secondario. In genere, il tema attivo sul tuo sito è preselezionato.

Successivamente, fare clic sul Analizzi i dati pulsante. Il plugin esaminerà attentamente il tema principale selezionato per determinare se può generare un tema figlio e se necessita del suo file style.css per l'aspetto.

Successivamente, assegna un nome al tema figlio. Puoi personalizzare il foglio di stile, le funzioni e altre configurazioni a tuo piacimento. 

Tuttavia, evitate di modificare le impostazioni fino a raggiungere la sezione 7.

Nella sezione 7, fare clic sul pulsante etichettato Fai clic per modificare gli attributi del tema figlio.

Da lì, puoi inserire i dettagli del tuo tema figlio.

Quando crei manualmente un tema figlio, potresti perdere i menu e i widget del tema principale. 

Tuttavia, il plugin Child Theme Configurator può trasferirli dal tema principale al tema secondario. 

Se desideri procedere con questa operazione, seleziona la casella di controllo nella Sezione 8. Infine, fai clic su Crea un nuovo tema figlio pulsante per creare il tema figlio.

Al termine, il plug-in creerà una cartella per il tema figlio contenente i file style.css e Functions.php essenziali per future personalizzazioni.

Prima di attivare il tema, visualizzane l'anteprima facendo clic sul collegamento "Anteprima del tema figlio" nella parte superiore dello schermo per verificarne l'aspetto e assicurarti che non influisca negativamente sul tuo sito.

Dopo aver verificato che tutto funzioni correttamente, fare clic su Attiva e pubblica pulsante. Questo renderà il tuo tema figlio attivo sul tuo sito web.

Una volta attivato il tema figlio sul tuo sito web, è ora di iniziare a personalizzarlo. Tratteremo questo nella prossima sezione.

6 Come personalizzare il tema figlio

Prima di addentrarti nella personalizzazione, identifica gli elementi del tuo sito web che desideri modificare, come stili, modelli, funzioni, aree widget o modelli di pagina personalizzati. 

Avere una visione chiara dei tuoi obiettivi semplificherà il processo di personalizzazione. Esistono vari metodi per personalizzare il tema figlio, tra cui:

6.1 Personalizzazione degli stili con CSS

Il file style.css del tuo tema figlio funge da piattaforma per modificare l'aspetto del tuo sito web. Qui puoi inserire regole CSS personalizzate per modificare o migliorare gli stili del tema principale.

Prima di procedere è necessaria una conoscenza base di HTML e CSS. 

Puoi utilizzare in modo efficace lo strumento Ispeziona del tuo browser o copiare direttamente gli stili dal file style.css del tema principale.

Per accedere ai codici CSS di una pagina web utilizzando il browser, è sufficiente fare clic con il pulsante destro del mouse sulla pagina e selezionare Ispezione dalle opzioni visualizzate. Questo strumento visualizza i codici di stile CSS, permettendoti di individuare gli elementi che desideri modificare.

Quando fai clic con il pulsante destro del mouse e selezioni "Ispeziona", la schermata del browser si biforcherà, visualizzando HTML e CSS per la pagina. 

A seconda delle impostazioni del browser, i dettagli HTML e CSS potrebbero essere visualizzati sul lato destro o nella parte inferiore dello schermo.

Passando il mouse su varie righe HTML, l'ispettore di Chrome le evidenzierà nella scheda Elementi e visualizzerà le regole CSS corrispondenti relative all'elemento evidenziato.

Puoi sperimentare modificando direttamente il CSS per vedere in anteprima come apparirà. Ad esempio, se desideri modificare il colore di sfondo della home page predefinita del tema Twenty Twenty-Four da #f9f9f9 a #6841ea.

Una volta regolato il colore di sfondo nell'ispezione del browser, la modifica è temporanea. Per renderla permanente, devi trasferire questa regola CSS nel file style.css del tuo tema figlio:

body {
background-color: #6841ea;
}

Dopo aver inserito il codice ricordati di salvare le modifiche. Puoi replicare questo processo per qualsiasi altro elemento della pagina web che desideri personalizzare.

Ad esempio, supponiamo che tu voglia modificare i colori sul tuo sito web. Possiamo fornirti alcuni codici CSS che ti permetteranno di farlo.

Per cambiare il colore del testo in grigio scuro, aggiungi il seguente codice al tuo file CSS:

body { color: #3b3b3b; } 

Per cambiare il colore dell'intestazione in blu, utilizzare il seguente codice:

h1, h2, h3 { color: #007bff; }

Per il colore di sfondo dell'intestazione, utilizzare il seguente codice:

#header { background-color: #f5f5f5; } /* Light grey background for header */

E per l'area del contenuto, usa questo codice per impostare il colore di sfondo su bianco:

.site-container { background-color: #fff; } 

Puoi copiare questi stili CSS nel file style.css del tuo tema figlio tramite la directory dei temi figli del tuo sito web o dalla dashboard di WordPress.

Quando aggiungi il codice CSS, assomiglierà a questo formato:

Dopo aver salvato le modifiche, prova ad aggiornare la pagina del tuo sito web. Se le modifiche non vengono visualizzate, svuota la cache del browser per assicurarti di visualizzare la versione più recente del CSS.

6.2 Sovrascrivere i file modello

Mentre la personalizzazione CSS controlla l'aspetto del tuo sito web, i temi secondari offrono una funzionalità più potente: sovrascrivere i file modello.

Questa funzionalità avanzata consente di rimodellare il layout e struttura delle pagine del tuo sito web ed elementi. Tuttavia, fai attenzione poiché richiede una comprensione più approfondita dei modelli WordPress, HTML e PHP.

Per sovrascrivere un modello, copia il file .php originale dalla cartella del tema principale nel tema figlio, mantenendo il nome file esatto. 

Ad esempio, per sovrascrivere header.php, devi copiare il file header.php dalla directory /parent-theme/ e incollarlo come header.php nella directory /child-theme/.

Ora puoi modificare header.php nel tuo tema figlio.

Alcuni modelli comuni da sovrascrivere:

• header.php – Contiene tag e branding del sito, navigazione, ecc.
• footer.php – La chiusura tag e markup.
• page.php - Modello predefinito per le pagine.
• single.php – Modello utilizzato per singoli post.
• index.php – Modello di home page.

Ad esempio, puoi modificare footer.php visualizzando un copyright personalizzato per il tuo sito:

<!-- Modified child footer.php -->

<footer>
  <p>&copy; <?php echo date('Y'); ?> My Company</p>

  <?php if ( is_active_sidebar('footer-1') ) : ?>
    <?php dynamic_sidebar('footer-1'); ?>
  <?php endif; ?>

</footer>

6.3 Funzionalità estese

I functions.php file nel tema figlio ti consente di introdurre nuove funzioni PHP, hook, filtri e codice per espandere le funzionalità predefinite del tema principale.

Questa flessibilità ti consente di registrare tipi di post personalizzati, incorporare widget personalizzati, creare nuovi codici brevi, accodare script aggiuntivi e altro ancora.

Ad esempio, se desideri una sezione dedicata sul tuo sito WordPress per widget personalizzati, utilizza il seguente snippet di codice per creare un'area widget denominata "Area widget personalizzata":

function register_custom_widget() {
    register_sidebar( array(
        'name'          => 'Custom Widget Area',
        'id'            => 'custom_widget_area',
        'description'   => 'Add widgets here to appear in the custom widget area',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'register_custom_widget' );

Dopo aver salvato questo codice nel file Functions.php del tuo tema figlio, torna al tuo sito WordPress e accedi Aspetto → Widget. Noterai il widget "Area widget personalizzata" disponibile per l'uso.

7 Domande frequenti

8 Conclusione

Creare un tema figlio in WordPress è un'abilità preziosa che può aiutarti a personalizzare il tuo sito web senza rischiare la perdita delle modifiche durante gli aggiornamenti del tema. Anche se all'inizio può sembrare scoraggiante, non arrenderti troppo in fretta se commetti degli errori. 

Gli errori più comuni che potresti riscontrare sono errori di sintassi causati dalla mancanza di qualcosa nel codice. Se qualcosa va storto, puoi sempre ricominciare da capo. 

Ad esempio, se elimini accidentalmente qualcosa richiesto dal tema principale, puoi semplicemente eliminare il file dal tema secondario e ricominciare. 

Ricorda, con un po' di perseveranza, la creazione di un tema figlio può darti la flessibilità necessaria per creare un aspetto unico per il tuo sito web mantenendo la stabilità e la sicurezza del tema principale.

Quindi, provalo e scopri la differenza che può apportare al tuo sito Web WordPress.

Ci auguriamo che questa guida ti abbia aiutato a creare un tema figlio per il tuo sito web. Se è così, faccelo sapere Twitter @rankmathseo.

• Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
• PlatoData.Network Generativo verticale Ai. Potenzia te stesso. Accedi qui.
• PlatoAiStream. Intelligenza Web3. Conoscenza amplificata. Accedi qui.
• PlatoneESG. Carbonio, Tecnologia pulita, Energia, Ambiente, Solare, Gestione dei rifiuti. Accedi qui.
• Platone Salute. Intelligence sulle biotecnologie e sulle sperimentazioni cliniche. Accedi qui.
• Fonte: https://rankmath.com/blog/wordpress-child-theme/