Realizzare un “Child Theme” WordPress

I “Child Theme” di WordPress (letteralmente ‘Temi figli’) sono un’ottimo strumento a disposizione degli sviluppatori per personalizzare, in maniera anche profonda, i temi utilizzati e garantire l’integrità del tema “padre” preservandolo da modifiche ( grafiche e funzionali)  delle quali si porrebbe perdere il controllo.

In questa piccola guida intendiamo fornire le indicazioni di base per comprendere come creare e utilizzare i Child Theme, e definirne le peculiarità.


Come costruire un “tema figlio” WP

treeLa realizzazione di un tema figlio in worpdress è in realtà molto semplice. Innanzitutto occorre disporre di un account FTP per accedere ai files sul server; una volta effettuato l’accesso bisogna entrare nelle cartella wp-content/themes e creare una nuova cartella nominandola a piacimento, di solito si utilizza il nome “nometemapadre_child” dove “nometemapadre” è ovviamente la cartella che contiene i files del tema che vogliamo utilizzare  e personalizzare.
Un tema figlio ha bisogno di un unico file per esere definito e utilizzato: un foglio di stile chiamato obbligatoriamente “style.css” da creare all’interno della nostra nuova cartella nometemapadre_child.

Per funzionare correttamente il file style.css deve iniziare con queste righe:


/*
Theme Name:  nometemafiglio
Template:  nometemapadre
*/

dove “nometemafiglio” è il nome della cartella che abbiamo creato ( nel nostro esempio ‘nometemapadre_child’) e “nometemapadre” è il nome della cartella del tema principale che vogliamo modificare. Di fatto il Child Theme a questo punto è già configurato e lo troviamo disponibile nell’elenco dei temi nella nostra bacheca wordpress:
temi

Possiamo aggiungere uno “screenshot” del nostro tema figlio da nominare “screenshot.png” nella nuova cartella ma questo è del tutto superfluo. Ciò che invece non è superfluo è l’inclusione nel file “style.css” del ( o dei) fogli di stile del tema padre, con l’istruzione “@import” esempio:

@import url("../nometemapadre/css/main.css.php");
@import url("../nometemapadre/css/layout.css");

il percorso (path) da indicare è quello relativo alla cartella del tema padre. Queste inclusioni  consentono di disporre di tutte le regole dei fogli di stile del tema padre e di poterle modificare o aggiungerne all’interno di quest’unico file “nometemapadre_child/style.css“.

Le funzionalità dei Child Theme sono solo all’inizio, la parte più importante riguarda la modifica dei files che costituiscono l’architettura del tema. Un tema tipico contiene senz’altro i files “header.php, footer.php, sidebar.php, page.php…“; nello sviluppo di un sito potremmo avere la necessità di modificarne uno o più di uno per aggiungere funzionalità e modificare il layout della pagine. Possiamo copiare il file che dobbiamo modificare nella cartella del tema figlio e apportare le modifiche necessarie, tenendo conto che dal momento in cui nella cartella del tema figlio esiste un file utilizzato nella struttura del template questo prevale su quello originale contenuto nella dir “nometemapadre” e lo sostituisce completamente.

Anche il file “functions.php” può essere copiato nella directory del tema figlio, in questo caso il suo comportamento è diverso da quello degli altri files: esso infatti non sostituisce il file “functions.php” della directory del tema padre ma  “appende” ad esso le funzioni che vi definiamo.

Un’annotazione riguarda i “path” di richiamo di risorse contenute nelle cartelle dei temi.
La funzione WP  "get_template_directory_uri()" restituisce il nome della directory del tema padre e può quindi essere utilizzata per chiamare files contenuti in essa es:

wp_register_script('lib', get_template_directory_uri() . '/js/lib.js', '1.0', true);//restituisce la dir. del tema padre

mentre per richiamare risorse contenute nella dir. del child theme occorre utilizzare la funzione get_stylesheet_directory_uri().
Per le inclusioni di risorse php usare la funzione get_stylesheet_directory() Es:

include( get_stylesheet_directory() . '/includes/myfile.php');

I vantaggi nell’utilizzo dei temi figli” WP

I vantaggi derivanti dall’utilizzo dei “Child Theme” sono sostanzialmente quelli di non ” sporcare” i files del tema principale apportandovi modifiche sostanziali delle quali si potrebbe, col tempo, perdere il pieno controllo e continuare a  disporre dei files originali per confrontare e verificare funzionalità varie.  Tutto ciò assume grande importanza nel caso in cui il tema utilizzato venga aggiornato dai suoi sviluppatori e che l’aggiornamento (magari inavvertitamente) venga installato dal BackOffice sovrascrivendo tutte le nostre modifiche. L’utilizzo dei “temi figli” ci mette al riparo da tutto ciò  mantenendo separati i files oggetto delle nostre modifiche.

(3435)

Articoli correlati:

Tagged under:

2 Commenti

  1. alessandro Rispondi

    Buongiorno,
    complimenti per la chiarezza dell’articolo che mi è servito essendo alle prime armi con WP.
    Vi chiedo aiuto per un problema: ho creato il css per il tema child con le istruzioni per controllare 2 css del tema padre
    e ho scritto
    @import url(“../sixteen/style.css”);
    @import url(“../sixteen/css/main.css”);
    mentre funziona benissimo per modificare il css principale, quello nella sottocartella “main.css” non lo considera.
    è dovuto al fatto che si trova in una sottocartella?
    L’url è corretto.
    Grazie mille.
    Alessandro.

    1. admin Rispondi

      non vedo problemi particolari a questa sintassi, sei sicuro che il file main.css contenga istruzioni attive?
      P.S. ( scusa per il ritardo, non mi ero accorto del messaggio pending)

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

× Supporto Live

Al momento siamo offline. Potete contattarci via email..