Creare un Tema Child
Riportiamo l'ottimo lavoro che Caterina Toccafondi ha pubblicato nel gruppo Facebook "Siti scolastici" per la creazione del tema child. Un grazie quindi per il prezioso contributo che per maggior fruibilità viene ripreso in questo spazio.
I temi child permettono di personalizzare un tema senza dover modificare il tema
originale.
Il tema child deve contenere tutti i file che andremo a copiare dal tema originale e che
abbiamo intenzione di modificare: WordPress darà priorità di caricamento ai file del
tema child presenti, ignorando quelli del tema parent (genitore). I file che invece non
saranno stati copiati dal tema parent al tema child, verranno comunque letti da
WordPress dalla cartella del tema originario. Per chiarire meglio la questione,
immaginiamo di creare un tema child con il solo file style.css (unico file richiesto
necessariamente affichè il tema child possa esistere): attivando questo tema child,
WordPress leggerà il contenuto del file style.css dal nuovo tema appunto, ma
continuerà a leggere le altre pagine (come ad esempio 404.php o header.php ecc) dal
tema orginario.
Se invece volessimo apportare modifiche ad altri file dobbiamo copiare nella cartella i
file che ci interessano.
In caso di aggiornamento del tema originario, non perderemo le modifiche fatte sul file style.css del tema child. È consigliabile ricreare il tema child con i nuovi file copiandoli dal tema originale aggiornato e riapplicando quindi le modifiche. Lavorando su un tema child inoltre, in caso di errore nei file è sufficiente riattivare il tema originario per ripristinare l’operatività del sito, non compromettendone quindi l’efficienza.
Personalmente preferisco creare la cartella in locale e poi trasferirla via ftp dove solitamente ci sono i temi di WordPress, ossia wp-content/themes, per comodità dare un nome alla cartella che riporti al nome del tema che vogliamo utilizzare come tema genitore più il suffisso -child, quindi nel nostro caso pasw2015-child senza aggiungere altro (in caso di versioni rinominare la cartella)
La prima cosa da fare nella cartella del nuovo tema è la creazione del file style.css. Si potrebbe tranquillamente fare una copia dello stesso file del tema genitore, oppure potrebbe essere più comodo partire da un file vuoto e riportare solo la modifica.
Il file style.css è fondamentale, oltre a definire i CSS del nuovo tema, fornisce a WordPress tutte le informazioni necessarie per fargli capire che il tema che stiamo realizzando è figlio legittimo di cotanto padre. Tutto avviene nella prime righe commentate del file:
/*
Theme Name: Pasw2015 Child (scrivere il nome del tema che si vuole utilizzare-importante)
Description: Tema Child per il tema pasw2015(a piacere)
Author: Cate (a piacere :) )
Author URL: http://catewp2.altervista.org/ (URL:del sito)
Template: pasw2015 (importante)
Version: 0.1
*/
Il foglio di stile del tema child sovrascriverà il foglio stile del tema genitore, ma è probabile che vorrete includere il foglio stile del tema genitore. Per fare ciò non si dovrebbe usare la funzione @import (come in precedenza) nel foglio di stile del tema child, ma la funzione
wp_enqueue_style() nel file "functions.php"
Dovremmo, quindi, creare questo file nella cartella principale del vostro tema child, ed inserirvi il seguente codice:
<?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' );
}
?>
Riporto immagine del file .css e del file funtions.php (fare attenzione al salvataggio dei file devono avere la corretta estensione il primo in *css, cioè Cascade Style Sheets; il secondo php, Hypertext Preprocessor)
Questo percorso è valido per qualsiasi installazione di WordPress, ovviamente riferita al tema, indicato, originale. In caso di altri temi, basta solo sostituire, in questo caso Pasw2015, con il nome della cartella del tema.
A questo punto possiamo attivare il nuovo tema child, se non abbiamo sbagliato niente nell’intestazione del file style.css e nel codice del file functions.php, ce lo troveremo tra i temi disponibili, con il nome e la descrizione che abbiamo indicato. Non ci sarà nessuna immagine di anteprima, ma è normale e non è un problema funzionale.
Se proprio volessimo, per averla occorre mettere un file immagine chiamato screenshot.png (una immagine di dimensioni 300 x 250 pixel) nella cartella del tema child. È possibile copiare quella del tema originale, o farne una personalizzata.
Ecco come si presenterà in remoto la nostra cartella con il tema-child
...e con lo screenshot nei temi
Così com’è, il nuovo tema è una copia precisa del tema genitore. Se così non fosse abbiamo sbagliato qualcosa nelle poche istruzioni precedenti, oppure il tema originale richiede istruzioni particolari per la realizzazione di un tema child. Ora occorre iniziare con la personalizzazione che, ricordiamocelo, va fatta tutta nella cartella del tema Child e non nel tema genitore, altrimenti vanifichiamo tutto il lavoro fin qui eseguito. La regola di base è: il nuovo tema child carica prima tutti i CSS ed i template che sono nella sua cartella. Se lo stesso file è presente sia nella cartella del tema child che in quella del tema originale, il primo viene utilizzato al posto del secondo. I file mancanti nella cartella del tema child, WordPress, li va a prendere nella cartella del tema genitore. Se volessimo modificare anche i files di template, sarà sufficiente di volta in volta copiare (copiare mi raccomando non spostare, è diverso, il tema genitore deve rimanere integro) nella directory “child” il file che vogliamo modificare, il quale verrà utilizzato in sostituzione di quello originale. Quindi, immaginando di voler personalizzare header e footer non faremo altro che copiare header.php e footer.php del template genitore ed inserire i due files nella cartella “child”.
Vedi immagini
Se scriviamo una istruzione CSS nel foglio di stile del tema child, questa sovrascrive l’eventuale istruzione analoga presente nel foglio di stile originale. Lo stesso per i file del template. Quindi, come detto prima, se nel nostro tema child ci mettiamo dei file presi dal tema originale e li modifichiamo, esempio header.php, index.php, footer.php etc, questi vengono caricati al posto degli stessi file del tema originale. Invece per tutti i file mancanti nel tema child, vengono utilizzati i file del tema originale. Se vogliamo appunto modificare il piè di pagina del sito, prendiamo il file footer.php del tema originale, lo copiamo nel tema child, e qui lo modifichiamo. Qualcosa va storto? Nessun problema, cancelliamo il file dal tema child e immediatamente caricato quello del tema originale.
Per modificare il nostro tema dobbiamo capire dove intervenire e qui ci viene in aiuto, il componente Firebug, se utilizziamo Firefox (altrimenti in GoogleChrome “Strumenti per sviluppatori”)
Adesso spostiamoci nell’editor del tema child> foglio di style.css modificato:
Le modifiche riportate servono per personalizzare il logo nel footer, in modo tale che non sia lo stesso dell’header e la non ripetizione dell’intestazione dell’istituto.
A differenza di style.css, il functions.php di un tema child non sovrascrive il file corrispondente nel tema genitore. Viene invece caricato in aggiunta al functions.php del genitore. (Più in dettaglio, viene caricato subito prima del file del genitore.) In questo modo il functions.php del tema child fornisce un metodo semplice e poco problematico per modificare le funzionalità del tema genitore. Si immagini di voler aggiungere una funzione PHP al proprio tema. Il metodo più rapido è di aprire il file functions.php ed inserirvi la funzione, ma in questo modo la prossima volta che il tema verrà aggiornato la funzione sparirà. Esiste un'alternativa: aggiungere nel tema-child creato un file functions.php e inserire una funzione a questo file. La funzione svolgerà esattamente lo stesso lavoro, con il vantaggio di non venir influenzata da futuri aggiornamenti del tema genitore. Non va copiato l'intero contenuto del functions.php del tema genitore all'interno del functions.php del tema child, ma solo la funzione desiderata. La struttura di functions.php è: un tag di apertura PHP in cima, un tag di chiusura PHP alla fine ed in mezzo i pezzi di codice PHP a piacimento. Dentro questo file potete inserire quante funzioni desiderate.