Perché Hai Bisogno di un Tema Child e Come Crearne Uno Tuo

Immagina questo: hai trovato il tema perfetto per il tuo blog WordPress. Beh, quasi perfetto. Dopo aver modificato il font del menu da Times New Roman a Open Sans e cambiato il colore di sfondo della barra laterale da verde a blu celeste, si adatta esattamente alla tua visione. Fino a due settimane dopo, quando il creatore del tema rilascia una nuova versione con un aggiornamento di sicurezza essenziale. Aggiorni il tuo tema solo per notare che — puff! — le tue modifiche personalizzate sono tutte scomparse.

Fortunatamente, non devi passare le tue giornate a reimplementare le tue modifiche e a temere i nuovi aggiornamenti. C’è un modo più semplice per personalizzare il tuo blog mantenendo gran parte dell’aspetto e della sensazione che ami: puoi creare un tema “child”, che eredita la funzionalità del tema “parent” aggiungendo quelle modifiche di stile che sono uniche per te. Anche se aggiorni il tema parent, il tema child mantiene le tue modifiche per tutto il tempo che desideri.

È sufficiente un file .css per trasformare un tema WordPress regolare in un tema child personalizzato, e serve meno codice di quanto pensi. Di seguito trovi una guida passo passo per creare un tema child partendo da qualsiasi tema WordPress regolare che hai già in mente.

Nota: Questo è un tutorial intermedio che presume che tu conosca almeno un po’ di HTML e CSS. Non è necessario essere un esperto, ma modificheremo il codice di un tema. Se non ti senti ancora a tuo agio con questo, potresti voler consultare il tutorial gratuito di CSS di W3Schools o iscriverti al percorso web gratuito di HTML/CSS di Codecademy.

1. Inizia Con Un Tema Parent E Pianifica Le Tue Modifiche

Questo è Twenty Sixteen, il tema che WordPress.org ha creato e rilasciato per quest’anno. Se stai cercando un tema base su cui apportare modifiche, considera sicuramente di dare un’occhiata alle loro uscite annuali, come Twenty Fifteen, Twenty Fourteen, e così via.

Per la maggior parte mi piace, ma voglio apportare alcune modifiche. Quel bordo nero è troppo forte per me, e vorrei che fosse blu. Vorrei anche cambiare il carattere.

Per prima cosa, apro gli Strumenti per Sviluppatori di Chrome andando su Visualizza → Sviluppatore → Strumenti per Sviluppatori nel menu del browser Chrome. (Se preferisci Firefox, puoi andare su Strumenti → Sviluppatore Web → Ispettore nel menu di Firefox.)

Gli strumenti per sviluppatori mi permettono di ispezionare il tema e vedere da dove provengono le “regole”. Manipolando la giusta classe CSS, posso capire cosa dovrò inserire nel mio tema child per apportare le mie modifiche. Ad esempio, puoi vedere che modificando il colore di sfondo in #0099ff, posso cambiare il bordo da nero a blu. Ovviamente, gli strumenti per sviluppatori sono solo per giocare temporaneamente, e quando aggiorno questa pagina, il bordo tornerà nero.

2. Crea La Cartella E I File Del Tuo Tema Child

È importante etichettare con attenzione il tuo tema child, cominciando dal nome della cartella in cui lo inserisci. In questo modo, WordPress sa come identificarlo automaticamente. Aggiungere “-child” alla fine del nome del tema originale è la prassi migliore. Quindi nel mio caso, dato che Twenty Sixteen si trova dentro una cartella chiamata “twentysixteen”, io chiamo la mia cartella “twentysixteen-child”.

Il primo file che devo creare è style.css, un file css che include informazioni rilevanti sul mio tema e lo stile personalizzato che voglio aggiungere al suo aspetto.

/*
Theme Name: Twenty Sixteen Child
Theme URI: http://example.com/twentysixteen-child/
Description: Il mio primo tema child, basato su Twenty Sixteen
Author: Lauren Orsini
Author URI: http://lorsini.com
Template: twentysixteen
Version: 1.0.0
Tags: due-colonne, blu, barra-laterale-destra
Text Domain: twentysixteen-child
*/

Inizio compilando i dettagli necessari. Sono richiesti solo il “Nome del Tema” e il “Template”. WordPress deve conoscere il nome del tema e deve anche sapere quale tema considerare come genitore di questo tema, in questo caso, Twenty Sixteen. Il resto puoi compilarlo con le tue informazioni personalizzate, o lasciarlo in bianco. Infatti, questa struttura è diventata standard per le persone interessate a pubblicare i loro temi su WordPress.org. Se stai solo costruendo il tuo tema child per uso personale, tutto ciò di cui hai bisogno è il nome del tema, la descrizione, l’autore, il template e la versione.

Ora, devo aggiungere gli stili che voglio modificare. Voglio cambiare il bordo nero in blu e voglio cambiare il font dell’intestazione in Georgia. Il font dell’intestazione è visualizzato in tre posti nel tema—titolo del sito, titolo dell’articolo e titolo del widget, quindi devo assicurarmi di includere tutte e tre le classi CSS nel mio stile per influenzare tutte e tre le posizioni.

Dopo aver completato questo, il mio tema child è funzionante. Potrei installarlo a questo punto, ma avrebbe solo due stili e il resto sarebbe predefinito. Non è quello che voglio; desidero che il tema erediti gli stili di Twenty Sixteen. Quindi, ho bisogno di un secondo file, intitolato functions.php.

Copia e incolla semplicemente il seguente codice nel file functions.php:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Questa è una funzione che metterà in coda i file style.css del tema parent e del tema child. Mettere in coda qualcosa significa aggiungerlo alla coda di elementi simili da elaborare dal browser. Questa funzione si assicura che entrambi i set di stili vengano caricati nell’ordine corretto sullo schermo del visitatore.

Un ultimo passaggio facoltativo è creare un’immagine di 880×660 (si raccomanda il formato file PNG) da uno screenshot del tuo tema child. In questo modo, se hai molti temi installati, potrai vedere come appare questo a colpo d’occhio.

3. Carica Il Tuo Tema Child Su WordPress

Ora ho una cartella, intitolata twentysixteen-child, che contiene due file — style.css e functions.php. È ora di comprimere quella cartella in un file zip e caricarla sul mio sito.

Naviga su Aspetto → Temi e seleziona “Aggiungi Nuovo”, il che ti permetterà di caricare un file zip. WordPress prima verificherà che il tema parent sia installato e, se lo è, dovresti essere autorizzato a caricare il tuo tema. Se il tema parent non viene trovato, non funzionerà.

Ora dovresti essere in grado di vedere il tuo tema nell’elenco dei temi caricati. Ecco come appare il mio quando ci clicco sopra. Nota che non ho aggiunto un’immagine di anteprima al mio tema, ma ha comunque funzionato. Ma vedi come include tutte le informazioni che ho inserito nel passaggio 2?

Attiva il tuo tema e, se tutto è andato bene, dovresti essere in grado di vedere le tue modifiche completate dal vivo. Ecco fatto! Ho il nuovo colore del bordo e i font dell’intestazione che desideravo. Ancora meglio, anche se WordPress aggiorna il tema Twenty Sixteen, le mie modifiche non si sposteranno.

Spero che questa guida ti abbia aiutato a capire quanto possa essere facile e utile avere un tema child sul tuo blog WordPress. È un ottimo modo per proteggere il tuo tema per il futuro, così che rimanga bello e personalizzato, indipendentemente da ciò che ti capita.