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 WordPress Hosting di IONOS ottenete una piattaforma di hosting specificamente ottimizzata che semplifica il vostro percorso di creazione di un sito web WordPress.
Articoli simili
Il framework Genesis: la struttura orientata verso la performance per i temi di WordPress
Forse avrete già sentito parlare del framework per WordPress chiamato “Genesis”. Il tema di base del servizio web StudioPress è tra le soluzioni più richieste per quanto riguarda la progettazione di template, e anche i temi figlio di Genesis vantano una quantità piuttosto considerevole di download. Il motivo di questa popolarità e quali costi sono collegati all’uso di questo servizio, verranno…
Temi di WordPress: componenti e struttura
Un punto di forza di WordPress è la separazione di design e layout da una parte e delle funzionalità del programma dall’altra. Questo permette agli utenti di adattare la visualizzazione dei contenuti di un sito con i temi, senza dover intervenire nel codice del software vero proprio. Vi illustriamo le funzionalità dei temi di WordPress, le loro componenti e la loro struttura.
vectorfusionartShutterstock Creare una propria pagina con WordPress: facile!
Volete creare un vostro sito, ma avete pochissime conoscenze di programmazione? Con un CMS potete creare un sito per voi o per la vostra azienda anche senza disporre di conoscenze HTML. La nostra guida di WordPress vi guida passo per passo nella creazione del vostro sito: a partire dall’installazione e dalla configurazione di WordPress, passando per la creazione dei contenuti, fino ad arrivare…
Robert KneschkeShutterstock Integrare Google Analytics in un sito WordPress: possibilità e misure per la protezione dei dati
L’integrazione di Google Analitics in WordPress aiuta a ottenere informazioni sui visitatori della vostra pagina. In questo modo sarete in grado di valutare meglio il vostro pubblico e stabilire così le misure di marketing più adatte. Vi mostriamo come integrare Google Analytics in WordPress e tutto ciò a cui prestare attenzione relativamente alla protezione dei dati.
Come modificare un header su WordPress
Siete alle prese con la gestione del vostro sito su WordPress? Probabilmente siete già degli esperti per ciò che riguarda l’aggiunta di script o fogli di stile al vostro progetto. In questa guida passo dopo passo, vi mostreremo come modificare un’header WordPress, cosa bisogna tenere in considerazione nel farlo e come trovare l’approccio più adatto alle vostre esigenze.
CSS di WordPress: modificare il design del vostro sito web
Se desiderate progettare o personalizzare il vostro sito web secondo le vostre idee, potete anche lavorare direttamente nel codice di WordPress. In questo articolo vi spieghiamo quali strumenti potete utilizzare per modificare, adattare e salvare i CSS su WordPress. Grazie alle nostre semplici istruzioni, potrete facilmente apportare le modifiche autonomamente.
