Child Theme di WordPress

Approfondimento sui Child Theme di Wordpress

La creazione di un Tema Figlio (o Child Theme) è una procedura che permette di aggiornare e gestire in modo semplice, sicuro e corretto un tema WordPress.

E’ indispensabile in tutte le installazioni e deve essere la prima procedura da realizzare quando si decide di dare inizio alla creazione di un sito.

Perché?
Considera di dover effettuare diverse modifiche, sia sulla struttura (aggiunta e/o customizzazioni dei file di configurazione, creazione di modelli di pagine, etc) sia sul layout (cambiamento file di stile), a un tema che stai utilizzando.

Ovviamente è possibile effettuare tutti questi cambiamenti lavorando direttamente sui file originali ma ciò può comportare problemi nel momento in cui vorrai aggiornare la versione originale del tema.

Capita spessissimo che, caricando un nuovo aggiornamento che periodicamente viene reso disponibile dal team di sviluppo del tema, vengano automaticamente sostituiti/aggiornati anche molti dei file che tu hai cambiato.
Quindi verranno sovrascritte tutte queste modifiche rendendole, pertanto, vane.

Importante: aggiornare periodicamente il tema che stai utilizzando è una procedura necessaria visto che gli sviluppatori aggiungono sempre nuove funzionalità, correggono eventuali bug e migliorano la sicurezza.

Il tema figlio serve a questo: puoi fare tutti i cambiamenti che ritieni indispensabili senza il timore di perderli nel momento nel quale aggiornerai il tema originale.
Un bel vantaggio, non c’è che dire.

Vediamo come funziona.

Dopo aver scaricato, installato e abilitato il tema che hai scelto (a pagamento o gratuito, nessuna differenza)  è necessario creare, all’interno della root che contiene i file del tuo sito, una nuova directory che dovrà contenere il tema figlio.

Di regola è corretto nominare questa cartella con lo stesso nome di quella principale con l’aggiunta di -child.

Esempio di installazione con un tema gratuito (nello specifico Purity Lite sviluppato dalla MH Themes):

Tema padre: httpdocs –> wp-content –> themes –> mh-purity-lite
Tema figlio: httpdocs –> wp-content –> themes–> mh-purity-lite-child

ftp child

Semplice, dunque.

La nuova directory può essere creata in due modi:

  1. utilizzando un client per il download/upload dei file (Filezilla, per esempio);
  2. operando direttamente sul pannello di controllo del server, se sei abilitato.

Dopo aver creato questa nuova directory sei pronto per inserire, all’interno di essa, tutti i file necessari.

Partiamo da quello fondamentale: il foglio di stile (per comodità consideriamo un generico style.css).

Operazione iniziale: in remoto sul tuo PC e con un qualsiasi Editor di testo (Notepad++, per esempio) crea un file vuoto e salvalo con il nome di style.css

All’interno di questo file è obbligatorio inserire la seguente stringa:

/*
Theme Name:
 –
Theme URI: –
Description: –
Author: –
Author URI: –
Template: –
Version: –
License: –
License URI: –
Tags: –
Text Domain: –
*/

Anche se non è obbligatorio completare tutti i campi è bene che siano valorizzati ugualmente.

Analizziamoli ora singolarmente:

Theme Name
Il nome commerciale del tema.
Esempio: MH Purity Lite

Theme URI
URI è l’acronimo di  Uniform Resource Identifier e serve per identificare genericamente una risorsa web e nel nostro caso l’URL (Uniform Resource Locator) del sito del tema padre.
Esempio: http://www.mhthemes.com/themes/mh/purity-lite/

Description
Si tratta di una breve descrizione a corredo dell’installazione del tema figlio.
Esempio: Tema Child realizzato per il tema padre MH Purity Lite

Author
Il tuo nome o quello dello sviluppatore che ha materialmente modificato la struttura.
Esempio: Luciano Vio

Author URI
Come nel caso del campo precedente (Theme URI) contiene l’indirizzo web del sito dello sviluppatore.
Esempio: www.miosito.it

Template
Bisogna ripetere fedelmente il nome della Directory che contiene il tuo tema padre.
Esempio: mh-purity-lite

Version
Rappresenta la versione progressiva del tuo nuovo tema figlio. Ad ogni aggiunta e/o modifica sarebbe corretto aggiornare la numerazione progressiva.
Esempio: Versione 1.0.0 dello 01/01/2015

License
Si tratta della versione progressiva di Licenza Open Source sulla quale si basa il core di WordPress. A questo link potrai trovare gli approfondimenti anche storici.
Esempio: GNU General Public License v2 or later

License URI
Come nei due casi precedenti contiene l’indirizzo originale della versione in utilizzo della Licenza.
Esempio: http://www.gnu.org/licenses/gpl-2.0.html

Tags
Tags caratteristici e specifici del tema originale in uso.
Esempio: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready

Text-Domain
Bisogna ripetere fedelmente il nome della directory che contiene il tuo tema figlio.
Esempio: mh-purity-lite-child

style

Bene, ora che hai completato la creazione del file style.css lo devi caricare (sempre con FileZilla) nella directory del tema figlio precedentemente creata.

All’interno di questo file, pertanto, puoi fare tutte le modifiche utili per personalizzare in modo avanzato e specifico il tuo sito.

Devi, adesso, legare il nuovo foglio di stile con quello del tema padre in modo tale da caricare correttamente le regole in esso contenute.

Puoi utilizzare due sistemi:

Il primo (usato nella maggior parte delle installazioni ma meno corretto)
All’interno del file style.css bisogna inserire una funzione php che richiami il corrispondente style.css del tema padre. Si usa il classico costrutto @import

Vediamo un esempio:

@import url(“../mh-purity-lite/style.css”);

Hai visto? Si richiama il foglio di stile del tema originale.

La logica di WordPress, in questo caso, è questa: viene indicato che lo style.css iniziale è quello del tema padre (/mh-purity-lite/style.css) caricandolo tramite @import

Una bella comodità, quindi.
Tutte le modifiche che farai saranno sempre registrate sul secondo style.css (figlio); se viene modificato (dopo un aggiornamento) lo style.css del tema padre non perderai mai le modifiche che hai fatto perché esse sono registrate in una directory diversa.

Però. C’è sempre un però!

Riferendoci alle indicazioni ufficiali presenti sul Codex di WordPress (tradotto anche in italiano) si è capito che utilizzare @import comporta alcuni problemi di caricamento corretto.
Puoi leggere le relative discussioni (in inglese) collegandoti a questi link: Child theme does not overwrite parent themes style.cssWhy does my child theme CSS get called twice?

import

Allora quale può essere la soluzione più corretta?

Eccola: devi sempre creare il file style.css nel tema figlio (la procedura rimane identica) utilizzandolo per le modifiche/aggiunte ma senza inserire il costrutto @import.

Per legare i vecchi contenuti è necessario operare con una nuova procedura.
Sempre con il programma Notepad++ (o quello che usi normalmente) devi creare un nuovo file functions.php inserendovi la seguente stringa di comandi:

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

functions

Una volta salvato lo devi inserire nella directory del tuo tema figlio e hai completato questa prima parte di procedura.

WordPress gestisce la priorità del file functions.php in modo tale che vengano caricati per primi i comandi e le funzioni di quelli contenuti nel tema figlio e solo successivamente quelli del tema padre.

Importante: differentemente dagli altri file .php di WordPress in functions.php vengono aggiunti e non sovrascritti i comandi e le funzioni. Attento, quindi, a non ripeterle mai!

Comodo anche così, vero?

Vista la logica che utilizza WordPress allora si può operare nello stesso modo anche per altri file .php del tema? Ovviamente si, anzi in questo modo puoi fare anche delle modifiche strutturali al tema quali:

  • creazione di un Header o di un Footer customizzato;
  • inserimento senza plugin del codice di Analytics, del LikeBox di Facebook o il Badge di Google Plus;
  • creazione di un nuovo modello di pagina.

e tutto quello che tu vorrai!

child _struttura

Sarà sufficiente scaricare prima i file dal tema padre, modificarli o integrarli e successivamente caricarli, con la nuova struttura, nella directory del child theme.

Come nel caso precedente tutti i successivi aggiornamenti non avranno influenza sulla modifiche fatte sul tema figlio.

L’ultimo passo, utile anche se non fondamentale, è quello di creare una nuova immagine identificativa del tema figlio appena creato.

Cosa significa?
Se guardi nella sezione Aspetto –> Temi vedrai che è stato installato e attivato il nuovo tema figlio privo, però, di immagine specifica come capita con il tema padre.

Questa cosa non è la miglior soluzione grafica anche in virtù del fatto che altri, in futuro, potrebbero doversi trovare nella condizione di lavorare sul sito creato da te.

Puoi aggiungere un minimo di ordine grafico scaricando dalla cartella del tema padre il file screenshot.png (oppure crearne uno tuo personale con le dimensioni consigliate di 880 x 660 px), fare tutte le modifiche che desideri (aggiunta immagine, aggiunta loghi, testo differente, etc) e poi caricarlo nella directory del tuo tema figlio.

Se ora aggiorni vedrai che l’immagine risulta caricata e che il sito online ha mantenuto le modifiche realizzate.

Backend 4