Tutorial tema-child2

Sommario
Tutorial per creare un tema child in WordPress Introduzione ......................................................................... 2
Perché utile creare un tema child? ................................................................................................................... 2
La cartella per il nuovo tema child. .................................................................................................................. 2
Il primo file del nuovo tema child. .................................................................................................................... 2
Struttura di base del file style.css nel tema child ............................................................................................. 3
Attivare il nuovo tema ...................................................................................................................................... 4
Modificare un thema child per WordPress! ..................................................................................................... 5
Il tema child ha la priorità! ............................................................................................................................... 7
Proviamo adesso a fare una modifica … ........................................................................................................... 7
1
Tutorial per creare un tema child in WordPress
Introduzione
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.
Perché utile creare un tema child?
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.
La cartella per il nuovo tema child.
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
Il primo file del nuovo tema child.
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.
2
Struttura di base del file style.css nel tema child
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 utilizzareimportante)
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 mio primo esperimento ;)
*/
@import url("../pasw2015/style.css"); (attenzione: digitare i punti e punto e virgola )
Riporto immagine del file .css
3
Ricapitolando: La prima parte commentata ( /* …. */ ) fornisce a WordPress le
informazioni riguardanti il nuovo tema, come la descrizione, l’autore e altre cose.
La riga importante della prima parte è quella che inizia con Template, con la quale si
va ad indicare il tema che vogliamo utilizzare come genitore. Deve corrispondere al
nome della cartella del tema in questione ed è importante rispettare
maiuscole/minuscole del nome della cartella (generalmente tutta in minuscolo).
L’ultima riga è un’istruzione di caricamento CSS vera e propria. È importante, e dice al
tema figlio di caricare tutto il file CSS del tema originale, grazie al percorso indicato
tra le parentesi tonde. 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.
Attivare il nuovo tema
A questo punto possiamo attivare il nuovo tema child, se non abbiamo sbagliato
niente nell’intestazione del file style.css 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.
4
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 presenterebbe
Modificare un thema child per WordPress!
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.
5
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
6
Il tema child ha la priorità!
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.
Proviamo adesso a fare una modifica …
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”)
7
Adesso spostiamoci nell’editor del tema child> foglio di style.css modificato:
Questo il risultato ottenuto ho utilizzato colori di “dubbio” gusto ma semplicemente
per notare la differenza :
Unica eccezione: le funzioni del tema, funcion.php
Questo punto è molto importante: se per quanto riguarda le parti del template vale la
regola che il file del tema child sostituisce quello del tema originale, questo non vale
per il file delle funzioni del tema, il file function.php (da non confondere con l’omonimo
file di WordPress, situato nella cartella wp-includes).
Il file function.php del tema child non si sostituisce ma si aggiunge a quello del file
originale. Nel tema child il file function.php può essere un file vuoto a cui aggiungere
nuove funzioni e modificare alcune di quelle originali, ma tutte le altre funzioni
presenti nel file originale del tema verranno caricate.
8