Come proteggere il tema di WordPress dagli aggiornamenti: il Child Theme

Hai finalmente trovato un tema che ti piace ma desideri modificarlo. Le modifiche sono piuttosto semplici sì, ma cosa succede quando vuoi aggiornare il tema? Vuoi davvero far passare tutti i file di nuovo  a caccia delle modifiche? Non desidereresti semplicemente aggiornare con un semplice click e non pensarci più?

WordPress: il Child Theme e il Theme originale Arras

WordPress: il Child Theme e il Theme originale Arras

Ecco il modo giusto per modificare il tema e proteggerlo contro eventuali futuri aggiornamenti. E non preoccupatevi, è davvero semplice. Sì, perché ci ha pensato WordPress creando il sistema del Child Theme.

Cos’è un Child Theme

Un WordPress Child Theme è un tema che eredita le funzionalità di un altro tema, chiamato tema principale, e consente di modificarne, o aggiungere, le funzionalità o i fogli di stile.

Come creare un Child Theme personalizzato

1. Creare la struttura

All’interno della cartella wp-content/themes create una nuova directory, nominatela con il nome che volete dare al vostro nuovo tema (per es. noi l’abbiamo chiamata girlgeeklife), create all’interno un file css dal nome style.css, al momento vuoto.

  • \
    • wp-content
      • themes
        • arras (la directory del tema principale del nostro esempio, Arras. Deve essere sempre presente, anche se non utilizzata)
        • girlgeeklife(la directory del nostro tema figlio; può avere qualsiasi nome)
          • style.css (file obbligatorio in un child theme; deve assolutamente chiamarsi style.css)

Nella cartella del vostro child theme possono essere presenti altri file, nel caso non vi limitiate a modificare il solo foglio di stile:

  1. style.css (obbligatorio)
  2. functions.php (facoltativo)
  3. file legati al Template (facoltativo)
  4. altri file (facoltativo)

2. Il contenuto del file style.css

style.css è l’unico file richiesto in un child theme.  Fornisce tutte le informazioni utili a WordPress a riconoscerlo come child theme, e in questo modo va a sostituire il file style.css del tema principale.

Ecco un esempio di informazioni da inserire nell’intestazione del file style.css di un child theme:

/*
Theme Name:     Girl Geek Life
Theme URI:      http: //www.girlgeeklife.com/
Description:    Child theme del tema Arras
Author:         Nome Cognome
Author URI:     http: //nomecognome.com/about/
Template:       arras
Version:        0.1.0
*/

Dove:

  • Theme Name. (obbligatorio) Il nome del nuovo tema, qualsiasi.
  • Theme URI. (facoltativo) L’home page del nuovo tema.
  • Description. (facoltativo) La descrizione del nuovo tema, alcune note da aggiungere.!
  • Author URI. (facoltativo) Sito web dell’autore.
  • Author. (facoltativo) Il nome dell’autore.
  • Template. (obbligatorio) il nome della directory del tema principale, case-sensitive.
  • Version. (facoltativo) la versione del nuovo tema.

Questa intestazione all’inizio del nuovo stylesheet è obbligatoria. Tenete poi in considerazione che lo stylesheet del nuovo tema sostituisce completamente il foglio di stile del tema principale. Così se vuoi solo modificare alcune piccole cose è meglio importare il foglio di stile del tema principale e poi aggiungere le tue modifiche.  Ecco un esempio:

@import url("../arras/style.css");

Esempio

Il nostro tema principale è Arras. Ci piace tutto di lui tranne il colore del titolo del blog, che vogliamo cambiare da nero a verde. Usando il sistema del child theme lo possiamo fare in tre semplici passaggi (attenzione: il tema Arras, o il tema principale che hai scelto, deve essere già installato, come già scritto sopra):

  1. Crea una nuova directory in wp-content/themes e chiamala girlgeeklife (o in qualsiasi altra maniera)
  2. Salva il codice qui sotto in un file dal nome style.css e trascinalo nella nuova directory
  3. Vai nella Dashboard di WordPress entra nella sezione Themes e attiva il tuo nuovo tema, il Girl Geek Life.
/*
Theme Name:     Girl Geek Life
Description:    Child theme del tema Arras
Author:         Nome Cognome
Template:       arras
*/
@import url("../arras/style.css");
#site-title a {     color: #009900; }

Il file functions.php

Contrariamente al style.css, il file functions.php di un child theme non sovrascrive il suo corrispondente nel tema principale. Viene caricato in aggiunta al functions.php del tema principale, viene caricato esattamente prima per la precisione.

File legati al Template

I file del template in un tema child si comportano proprio come il file style.css, nel senso che sovrascrivono i loro omonimi del tema principale. Un tema child può ignorare qualsiasi template del tema principale, semplicemente utilizzando un file con lo stesso nome (Nota: index.php può essere sovrascritto solo in WordPress 3.0 e versioni successive).

WordPress: il Child Theme impostato

WordPress: il Child Theme impostato

Altri file

Un child theme può usare qualsiasi tipo di file nello stesso modo in cui lo fanno abitualmente tutti i temi, a condizione che il file sia correttamente collegato. Ad esempio, un tema child può usare le icone e le immagini che sono richiamate dal suo foglio di stile.

Risorse

In questo post ho voluto solo brevemente descrivere i passaggi principali, se hai bisogno di ulteriori informazioni prova a leggere i seguenti post:

E voi, avete mai utilizzato questo sistema? Avete qualche consiglio da aggiungere?

Autrice: Luigina Foggetti

Appassionata di tecnologia e computer per proprietà transitiva (due fratelli nerd) da oltre dieci anni lavora nel Web. Professione Online manager, geek curiosa nella vita di tutti i giorni.
Website: http://www.luiginafoggetti.com
Twitter: lalui