Come creare un tema child su WordPress
WordPress si è evoluto nel corso degli anni da un semplice sistema di blogging a un CMS per tutti gli usi ed è ormai diventato parte integrante del World Wide Web. Con la sua crescente popolarità, molti professionisti WordPress si sono specializzati nel fornire temi WordPress da usare come modelli nella creazione di siti web. Questi temi includono praticamente tutte le funzionalità e corrispondono anche visivamente alle aspettative approssimative degli operatori di siti Internet. Sarà comunque necessario apportare qualche modifica al codice o alla struttura per adattare il sito al design aziendale. Ma cosa succede a questi cambiamenti quando il tema viene aggiornato? È qui che entrano in gioco i temi child WordPress.
Che cos’è un tema child di WordPress?
Per evitare che un aggiornamento del vostro tema di WordPress sovrascriva le vostre modifiche, è importante creare un tema child. Un tema child è, come suggerisce il nome, il “figlio” di un tema genitore (parent) al quale è collegato in modo che ne assuma l’aspetto e le funzioni. Quando personalizzate il tema child, vengono automaticamente sovrascritte le istruzioni del tema parent. Le modifiche non influiscono quindi sul tema parent. Quando deve essere eseguito un aggiornamento del tema parent, le modifiche al tema child rimarranno invariate.
Durante l’esecuzione di importanti modifiche o aggiornamenti, è possibile che sul sito web appaiano dei messaggi di errore. Per evitare malcontento tra gli utenti, vi consigliamo di attivare la modalità di manutenzione di WordPress.
Da cosa è composto un tema child?
Un tema child può avere diversi componenti. Gli elementi decisivi sono le modifiche apportate e i file in cui vengono eseguite. Ci sono, tuttavia, alcuni file che è necessario creare per ogni tema child per garantirne un funzionamento impeccabile:
- Il file del foglio di stile CSS style.css
- function.php
- screenshot.png (opzionale)
Ma perché un tema child ha bisogno di questi tre file?
Come funzionano i temi child di WordPress
Come accennato, un tema child non può funzionare senza i file menzionati sopra. I file hanno le seguenti funzioni:
- style.css contiene tutte le regole CSS e le dichiarazioni che controllano l’aspetto del tema. La parte più importante è l’area dell’intestazione. Qui, il file CSS comunica a WordPress che si tratta di un tema child con un determinato tema parent, oltre a fornire altre informazioni di base.
- function.php determina l’ordine in cui vengono caricati i fogli di stile del tema parent e di quello child. Affinché le modifiche del tema child sovrascrivano le istruzioni del tema parent, il browser deve caricare il foglio di stile del tema child dopo quello del tema parent.
- screenshot.png è un file facoltativo, ma è comunque utile perché permette di riconoscere direttamente il tema child nella bacheca WordPress. Il CMS visualizza automaticamente i file screenshot.png nel menu del tema vicino al modello corrispondente.
Per apportare modifiche piccole al tema ci sono anche soluzioni più semplici come il Simple Custom CSS Plugin o il Customizer integrato dalla versione 4.7 di WordPress.
Vantaggi e svantaggi dei temi child
Un tema child apporta diversi vantaggi ma al tempo stesso comporta anche alcuni svantaggi, motivo per cui si dovrebbe valutare se abbia senso crearne uno per attuare solo modifiche minori al CSS:
| Vantaggi | Svantaggi |
|---|---|
| Le modifiche non vengono sovrascritte quando si aggiorna il tema parent. | L’aggiornamento del modello originale colma soltanto le lacune di sicurezza dei file dei modelli che si trovano nella cartella del tema parent. Le lacune nei file del tema child, invece, non vengono risolte. |
| Un tema child offre più libertà rispetto alle opzioni della bacheca di WordPress. È possibile, ad esempio, adattare la struttura del sito web o aggiungere altre funzioni al tema. | Il caricamento di due fogli di stile da parte del browser può influire negativamente sulle prestazioni. |
| Le personalizzazioni del CSS in style.css sono più chiare rispetto a quelle del Customizer di WordPress. | |
| I temi child di WordPress sono ideali per principianti che vogliono conoscere meglio il CMS. Se si verifica un errore, è sempre possibile tornare al tema parent. | |
| I temi child possono accorciare i tempi di sviluppo del sito web. |
Come creare un tema child su WordPress: tutorial
Ora che abbiamo approfondito le caratteristiche di un tema child, vediamo come crearne uno funzionante.
Passaggio 1: creare una cartella per il tema child
Connettetevi al vostro server tramite un client FTP (come FileZilla) e navigate nell’installazione di WordPress alla seguente cartella:
il-vostro-percorso-all-installazione-wordpress/wp-content/themes/A questo punto create una cartella per il tema child. Usate il nome del tema parent e aggiungete “-child” alla fine.
Passaggio 2: creare un foglio di stile per il tema child
Create un file style.css e copiate le seguenti informazioni nell’intestazione con un editor di testo:
/*
Theme Name: [Nome del tema parent] child
Theme URI: [http://example.it/parent-theme/]
Description: [Nome del tema parent] Child Theme
Author: [Il vostro nome]
Author URI: [L’URL del vostro sito]
Template: [Nome della cartella del tema parent]
Version: 1.0.0
Text Domain: [Nome del tema parent] -child
*/Sostituite i segnaposto tra parentesi quadre con le vostre informazioni. Non è necessario integrare tutti i punti; le uniche informazioni indispensabili per il corretto funzionamento del tema child sono:
- Theme Name: ogni tema deve avere un nome, compreso il tema child. Questo nome deve essere univoco e non deve essere utilizzato da un altro tema nella vostra installazione di WordPress.
- Template: grazie a questa informazione, WordPress riconosce che si tratta di un tema child WordPress del tema parent specificato.
Quando il file è pronto, caricatelo nella cartella del tema child tramite il client FTP.
Passaggio 3: caricare correttamente il foglio di stile nel file function.php
Nel migliore dei casi, il tema parent contiene già l’istruzione per caricare il foglio di stile del tema child WordPress, ma non è così per tutti i modelli. Ecco perché è importante verificare il comportamento del tema parent. Gli scenari possibili sono tre:
- Il tema parent carica entrambi i fogli di stile. In questo caso, non è richiesta alcuna azione da parte del tema child.
- Se il tema parent carica il proprio foglio di stile tramite get_template_directory() o get_template_directory_uri(), il tema child deve caricare nel file function.php soltanto il proprio foglio di stile con il nome corrispondente del foglio di stile del tema parent come parametro.
- Se il tema parent carica il proprio foglio di stile tramite get_stylesheet_directory() o get_stylesheet_directory_uri(), il tema child deve caricare entrambi i fogli di stile nel file function.php. Assicuratevi di riprendere esattamente il nome del foglio di stile del tema parent.
Se si verifica il secondo caso, il function.php apparirà come segue:
<!--?php</codesnippet-->
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'Nome del foglio di stile del tema parent'),
wp_get_theme()->get('Versione') // Funziona solo se la versione è specificata anche nell’intestazione del foglio di stile
);
}
?>Se il tema child deve caricare entrambi i fogli di stile tramite function.php, il codice appare così:
<!--?php</codesnippet-->
function child_theme_styles() {
wp_enqueue_style( 'Nome del foglio di stile del tema parent', get_template_directory_uri() . '/style.css');
wp_enqueue_style( 'css tema child', get_stylesheet_directory_uri() .'/style.css' , array('Handle Nome del foglio di stile del tema parent'));
}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );
?>Inserite il file function.php insieme al file style.css nella cartella del tema child.
Facoltativamente, è possibile salvare un file di immagine con il nome screenshot.png nella cartella del tema child. WordPress visualizza questa immagine nella bacheca del tema per facilitarne il riconoscimento.
Passaggio 4: attivare il tema child
Una volta creato il tema child, è possibile attivarlo come qualsiasi altro tema nella bacheca di WordPress. Accedete alla bacheca e selezionate il tema child sotto “Aspetto” > “Temi”.
Se avete già effettuato delle personalizzazioni nel tema parent utilizzando il Customizer di WordPress, le modifiche andranno perse quando attiverete il tema child. Il plugin Customizer Export/Import consente di esportare e quindi reimportare le impostazioni del Customizer.
Adesso il tema child è pienamente operativo. Se desiderate apportare modifiche ad altri file del modello, copiate il file dal tema parent e inseritelo nella cartella del tema child. Il percorso deve corrispondere esattamente a quello del tema parent. Il file del tema parent viene automaticamente sovrascritto dal file nella cartella del tema child WordPress.
Con il Hosting per WordPress di IONOS ottenete una piattaforma di hosting specificamente ottimizzata che semplifica il vostro percorso di creazione di un sito web WordPress.