I temi child permettono di personalizzare un tema senza dover modificare il tema originale.

Transcript

1 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 Il primo file del nuovo tema child 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

2 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

3 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: (URL:del sito) Template: pasw2015 (importante) Version: 0.1 (è il mio primo esperimento ;) url("../pasw2015/style.css"); (attenzione: digitare i punti e punto e virgola ) Riporto immagine del file.css 3

4 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

5 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

6 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

7 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

8 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