Tema Child

Dopo aver visto che cos’è un tema WordPress, passiamo a vedere che cos’è e come installare un tema child sul nostro sito targato WordPress.

Che cos’è il Tema Child

Un child theme di WordPress è un tema che funziona in tandem con un altro (chiamato tema principale) dal quale eredita tutte le funzionalità e lo stile. Le migliori prassi di sviluppo raccomandano di utilizzare i child theme per modificare, aggiornare o personalizzare i temi di WordPress come metodo sicuro per mantenerne il design e il codice.

Ma quando dovremmo utilizzare un child theme? Dovremmo utilizzare un tema child se desideriamo eseguire una o più delle seguenti operazioni sul nostro tema:

• Modificare uno o più template file.
• Aggiungere funzioni extra legate alla visualizzazione e non alle funzionalità.
• Sovrascrivere una o più funzioni del tema principale.
• Aggiungere template file extra.

Tra i vantaggi ricordiamo:

• Facile estensione e personalizzazione: come è ovvio, un child theme estende la funzionalità del tema principale. Avete già un template pronto al vostro servizio sotto forma di un tema principale e tutto ciò che dovete fare è creare un file style.css separato per il vostro child theme e aggiungere le modifiche per personalizzarlo secondo le vostre esigenze.
• Aggiornamenti senza problemi: con lo sviluppo di WordPress, i temi e i plugin devono essere aggiornati molto spesso. Se apportate modifiche e personalizzazioni al tema principale, potreste finire per perdere tutto se aggiornate il tema. Pertanto, è consigliabile apportare tali modifiche a un child theme, in modo tale che, anche se vi viene richiesto di aggiornare il tema principale, non dovete temere di perdere le modifiche

L’impostazione di un child theme di base in WordPress richiede la creazione di due file: il foglio di stile e il file functions. Analizziamoli entrambi.

Il Foglio di Stile

Prima di creare il vostro file, dovrete creare una cartella per contenere il tema. Questa va nella cartella wp-content/themes della vostra installazione di WordPress.

Ricordate: non fatelo nel vostro sito live. Aggiungete prima il codice a un sito di sviluppo, quindi testatelo sul sito di staging. Una volta che siete soddisfatti, potete trasferirlo sul vostro sito live. Tutti i piani di hosting di Kinsta includono lo staging.

Nella cartella del nuovo tema, create un file e nominatelo style.css. Aggiungete quanto segue:

/*
Theme Name:  My Child Theme. Child for Twenty Nineteen.
Theme URI:  https://rachelmccollin.com
Description:  Theme to support tutsplus tutorial. Child theme for the Twenty Nineteen theme.
Author:  Rachel McCollin
Textdomain:  mccollin
Author URI:  https://rachelmccollin.com/
Template:  twentynineteen
Version:  1.0
License:  GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html                 
*/

Questo testo è commentato. Non è codice che esegue alcunché sul vostro sito né fornisce alcuna funzionalità. Invece, dà a WordPress informazioni sul tema. Avete bisogno di un testo come questo in ogni tema, altrimenti WordPress non può riconoscerlo come tale.

Analizziamo ognuna di queste righe per capire ciò che fanno:

• Theme Name: il nome univoco del tema.
• Theme URI: dove gli utenti possono trovare il codice o la documentazione del tema.
• Description: testo descrittivo per aiutare gli utenti a capire cosa fa il tema.
• Author: il vostro nome
• Textdomain: utilizzato per l’internazionalizzazione. Utilizzate il text domain come secondo parametro in tutte le funzioni per l’internazionalizzazione.
• Author URI: il sito web dell’autore.
• Template: la cartella in cui è collocato il tema principale. Utilizzate il nome della cartella e non il nome del tema. Senza questa riga, il tema non funzionerà come child theme.
• Version: il numero di versione
• License: la licenza, che deve essere GNU. [Link]
• License URI: il link alle informazioni sulla licenza.

La riga più importante per un child theme è la riga Template. Senza questa riga, il tema non funzionerà come child theme. Solo i child theme avranno questa riga.

Aggiungetela al foglio di stile del vostro tema, modificandolo per aggiungere i vostri dati al posto dei miei. Dovrete modificare la riga Template e inserire la cartella in cui è archiviato il tema esistente, perché sarà il tema principale.

Ora salvate il file. Se doveste guardare la schermata dei dettagli del tema nel vostro sito ora, vedreste questo:

Non sembra brillante perché non c’è immagine di anteprima. Questa è un’immagine che dà un’idea di come appare il tema. A meno che il tema non sia molto diverso dal tema principale, basta copiare il file screenshot.png dal tema principale e incollarlo nel child theme.

Il File functions.php

Il prossimo successivo è aggiungere un file functions al child theme. Ne avete bisogno per accodare il foglio di stile del tema principale. Senza di questo, il vostro sito non avrebbe affatto uno stile e sarebbe simile a questo:

Non va bene, sono sicuro che sarete d’accordo! Quindi aggiungiamo lo stile per dargli l’aspetto che dovrebbe avere. Nella cartella del child theme, aggiungete un file chiamato functions.php. Apritelo e aggiungete questo codice:

<?php
/* enqueue script for parent theme stylesheeet */        
function childtheme_parent_styles() {
 
 // enqueue style
 wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );                       
}
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

Questo utilizza la funzione wp_enqueue_style() per accodare il foglio di stile del tema principale, con la funzione get_template_directory_uri() che individua la location dove è archiviato quel file.

Potrebbe chiedervi perché utilizza una funzione chiamata wp_enqueue_scripts e non wp_enqueue_styles. Questo perché wp_enqueue_scripts è utilizzata sia per gli script che per gli stili e non esiste un hook wp_enqueue_styles.

Modificate pure il mio codice per aggiungere il vostro prefisso al nome della funzione. Io ho utilizzato “childtheme” come prefisso per essere sicura che la mia funzione non andasse in conflitto con altre funzioni del tema principale o di eventuali plugin.

Ora salvate il vostro file.

Attiviamo il child theme

Una volta che il child theme è pronto, è necessario attivarlo. Se vi viene il dubbio che l’attivazione del child theme possa disattivare il tema principale, non preoccupatevi: WordPress saprà di dover usare i file del tema principale a meno che voi non aggiungiate nuovi file al child theme che li sovrascrivano. Finora non avete aggiunto file o funzioni extra al child theme, quindi il vostro sito funzionerà esattamente come farebbe con il tema principale attivo.

Ricordate: eseguite questa operazione prima sul vostro sito di sviluppo o di staging. Non attivate il child theme sul vostro sito live fino a quando non lo avrete testato.

Nel pannello di amministrazione di WordPress, andate su Aspetto > Temi. Tra i temi installati sul vostro sito, troverete anche il vostro child theme.

Passate il mouse sul tema e fate clic sul pulsante Attiva. Questo attiverà il vostro child theme. Ora, quando visitate il ​​vostro sito live, apparirà esattamente lo stesso di prima.