Come creare un tema Child per WordPress

tema child WordPress

Il primo passo per personalizzare la nostra sezione CONVERSAZIONI, che come dicevo abbiamo creato con WordPress, è stato addentrarci nella costruzione di un tema CHILD ( un tema figlio), per poter produrre testata, footer e pagine in linea con il nostro template originario.

Ma cos’è un tema child?

Come sempre consiglio per prima cosa di guardare il Codex di WordPress, una miniera di informazioni spesso molto chiare.
Per riassumere in poche righe, un tema child è un nuovo tema che eredita dal tema padre tutto tranne quello che noi creiamo nella cartella del tema figlio.

Si realizza in maniera piuttosto veloce, intervenendo sulle cartelle e sui file del server su cui è installato WordPress, e si attiva dalla bacheca nella sezione Aspetto/Temi. Tutto quello che bisogna fare per costruire un tema child e lavorare su quello è creare una nuova cartella, due piccoli file e attivarlo.

Una volta attivato, si può iniziare a modificare il nostro tema senza paura: resterà sempre il tema padre come ancora di salvezza se qualcosa dovesse andare storto e soprattutto gli aggiornamenti del tema padre non incideranno sulle personalizzazioni che avrete effettuato sul tema figlio.
Nel dettaglio, le caratteristiche principali delle relazioni fra tema padre e tema figlio sono:
-se nella cartella del tema figlio non metto nient’altro che i file necessari alla sua creazione, il nostro sito si comporta esattamente come si comporterebbe con il tema padre;
-se modifico regole di stile nel css del tema figlio, queste sovrascrivono quelle del tema padre; se aggiungo regole di stile si sommano a quelle del tema padre;
-se nella cartella del tema figlio inserisco nuovi template (di pagina, una nuova testata, un nuovo footer…) il nostro sito sostituisce i template del tema padre con quelli del tema figlio;
-se creo nuove funzioni nella cartella del tema figlio, queste si aggiungono a quelle presenti nella cartella del tema padre.
È come se io avessi una replica del mio tema padre IN POTENZA, che mantiene la stessa struttura e la stessa gerarchia fra file del tema padre, in modo tale che si possano modificare i template a patto che abbiano lo stesso nome e che siano nella stessa posizione gerarchica della cartella del tema padre.

Sembra complicato? Nella pratica lo è molto meno.

Prendiamo ad esempio (come sempre) il nostro sito.
Il nostro tema di partenza è ZERIF LITE, che è racchiuso nella sua cartella all’interno dei temi disponibili del nostro sito sul nostro server: nella cartella /wp-content/themes/zerif-lite/ ci sono una serie di template ed alcune sottocartelle, che rappresentano l’ossatura del nostro tema di partenza.
Condizione indispensabile, o meglio, PREcondizione, per creare un tema figlio è che esista la cartella del tema padre, altrimenti il nostro tema figlio non saprebbe dove andare a pescare i file che non ha! (Se li avesse tutti, sarebbe funzionante in maniera autonoma e sarebbe lui stesso un tema padre! ;-)) .
Creiamo una nuova cartella in . /wp-content/themes/ e la chiamiamo ZerifChild (o qualsiasi altro nome, anche tema pippo), che quindi sia allo stesso livello del nostro tema padre:

  • wp-content
    • themes
      • zerif-lite
      • ZeriChild

Creiamo un nuovo file, dal nome style.css, che conterrà almeno due righe di codice:

 /*
 Theme Name: ZerifChild
 Template: zerif-lite
 */

Queste due righe sono obbligatorie,e specificano rispettivamente il nome del nostro tema figlio e il nome della cartella del tema padre.

È possibile indicare anche:

 /*
 Theme URI: http://example.com/ Il sito di riferimento del tema figlio creato, se esiste, nel formato indicato
 Description: Tema Child per il tema Twenty Thirteen La descrizione del tema figlio
 Author: Autore Il nome dell'autore del tema figlio
 Author URI: http://example.com/about/  Il link alla pagina dell'autore
 Version: 0.1.0  La versione del tema figlio creato
 */

Il tema figlio funzionerà comunque anche senza queste righe di codice, l’importante, ribadisco, sono le prime due.
Salviamo il nostro file style.css nella cartella ZerifChild.
Questo piccolo file costituisce il contenitore necessario per la creazione del nostro tema figlio.
A cosa serve? A nominare il nostro tema figlio ZerifChild, ad assegnare il riferimento del tema padre ed a raccogliere tutte le regole di stile del tema figlio, che verranno scritte di seguito alle righe appena inserite.

Ma noi vogliamo mantenere anche il foglio di stile del genitore, per poter intervenire solo sulle regole css che vogliamo modificare o aggiungere e non su tutto il css. Il modo corretto per farlo è creare nella nostra cartella del tema figlio un secondo file, dal nome functions.php, che conterrà al suo interno:

 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' );}

Ovvero, in linguaggio php, stiamo dicendo:
quando carichi il tema figlio, prima di tutto esegui la funzione che accoda il css del tema padre!
Salviamo anche questo file functions.php nella cartella del tema figlio.

Quindi ricapitolando abbiamo creato una cartella dal nome ZerifChild, al cui interno ci sono due file:
style.css che è definisce il tema figlio, al cui interno ci sarà il css specifico del tema figlio (che sovrascriverà quello del tema padre)
functions.php che è il file in cui verranno indicate tutte le funzioni specifiche del tema figlio, che si aggiungeranno a quelle del tema padre. La prima e fondamentale funzione che abbiamo aggiunto permette di accodare il css del padre al css figlio, quindi di recuperare le regole di stile che non sono state modificate dal figlio.

Ok, e adesso?

Adesso siamo finalmente pronti per lavorare sul serio :-).

Possiamo modificare le regole css, aggiungerne di nuove, creare nuove funzioni e soprattutto intervenire sui template file. Ma lo vedremo più avanti.

Tutto quello che deve restare oggi è che:

  • abbiamo creato una nuova cartella (ZerifChild) nella cartella dei temi di WordPress, che contiene due file:
  • style.css
    • questo file inizia così:
       /*
       Theme Name: ZerifChild
       Template: zerif-lite
       */
    • e prosegue con il mio css personalizzato
  • functions.php
    • questo file inizia così:
       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' );} ?>

Buon divertimento!;-)

Ciao! Questo è il posto giusto per opinioni, domande, chiacchiere in libertà...