Nel web, spesso ci imbattiamo in progetti in cui è richiesto l’uso del CMS WordPress. Per gestire la grafica del front-end esistono quindi due possibili strade da percorrere:

1. Creare il tema da zero (custom theme). Questa è la soluzione migliore: potete lavorare senza alcun vincolo di grafica e funzionalità, con l’ulteriore vantaggio di avere un tema unico e su misura per il cliente. Questo approccio però richiede qualche conoscenza di programmazione.
   (Se vi interessa approfondire questo aspetto abbiamo il corso che fa al caso vostro)
2. Affidarsi ai migliaia di temi gratuiti e non che il web mette a disposizione (solo Themeforest ne conta quasi 8 mila). Quest’ultima soluzione ovviamente è la più semplice, perché non richiede grosse conoscenze di programmazione e vi permette in diversi casi di creare un sito senza mettere quasi mai mano al codice.

Chi però ha usato i temi “già pronti” almeno una volta, si sarà trovato di fronte alla necessità di apportare qualche modifica al codice. Parliamo ovviamente di cose semplici e che non stravolgono il tema: cambiare colori, font o in qualche caso cambiare/eliminare pezzi di codice HTML.

In questi casi, la soluzione più veloce e più diffusa (ahimè) sembra essere quella di modificare direttamente i file del tema. Cosa che sconsiglio assolutamente! E vi spiego perché.

Tale pratica infatti vi vincola da eventuali futuri aggiornamenti del tema stesso: ad ogni update rischiate di veder sovrascritte le modifiche che avete eseguito.

La risposta potrebbe essere: “beh, ma allora evito di aggiornare il tema”, ma come già approfondito in un precedente articolo, questa scelta porta a risvolti negativi per quanto concerne la sicurezza dell’intero sito.

Quindi, come potete avere un tema premium (o gratuito) sicuro, aggiornato e allo stesso tempo personalizzato?
Semplice, basta usare i child-theme!

Come creare un child-theme

WordPress mette a dispozione questa tecnica di programmazione per aiutarvi a metter mano ad un tema, senza rischiare di veder perse le modifiche con aggiornamenti futuri.

Oggi giorno quasi tutti i temi premium presentano la versione “child”, ma anche se non fosse presente, possiamo crearcela noi stessi in pochi e semplici passaggi.

Ora vi spiego come fare.

Pre creare un child-theme, dovete prima di tutto creare una cartella all’interno di “/wp-content/themes/”, con il nome che preferite. Pratica comune è quella di scrivere lo stesso nome del tema padre e aggiungere “-child”, come potete vedere in figura qui sotto. Se ad esempio avete il tema padre che si chiama “focux”, il vostro child-theme si chiamerà “focux-child”.

Nella cartella del tema child, create poi un foglio di stile con il nome “style.css”. Questo file è necessario per il funzionamento del child-theme. Il foglio di stile deve iniziare con un commento in cui sono presenti le seguenti righe:

Ovviamente modificate ogni valore secondo le vostre necessità. La sole righe obbligatorie sono il “Theme Name” e soprattutto il “Template”. In quest’ultimo campo dovete indicare il nome della cartella del tema genitore (che in questo caso è appunto “focux”).

Attenzione però, perché così facendo, andate a sovrascrivere il css del padre con il vostro, mentre lo scopo è quello di creare un foglio di stile dove aggiungere ulteriori regole a quelle già presenti nel padre.

Per questo motivo, dovrete creare un ulteriore file nella cartella del child-theme, chiamato “functions.php” e incollare al suo interno il seguente codice:

Questo espediente vi permette di caricare il foglio di stile del padre. Nello “style.css” precedentemente creato invece, limitatevi ad aggiungere nuove regole o a sovrascrivere quelle da modificare rispetto all’originale.

WordPress si occuperà di leggere il tema padre, il suo foglio di stile ed eventuali modifiche apportate nel foglio di stile del tema figlio. In caso di aggiornamenti, il tema child non verrà mai toccato, evitando di perdere le eventuali modifiche fatte. Comodo no?

Modificare i file del template

Fin qui abbiamo visto come modificare il codice CSS di un tema WordPress in tutta sicurezza. Ma se voleste cambiare un file del template, togliendo ad esempio del codice HTML non necessario?

Anche in questo caso possiamo affidarci al nostro tema-child.

Vi basta infatti copiare il file del tema padre che volete modificare ed incollarlo direttamente nella cartella child precedentemente creata. Una volta fatto, potete modificare a piacimento il file presente nel child-theme.

Nell’esempio qui sotto ho modificato il “footer.php” del tema originario.

WordPress infatti, quando deve leggere il file di un template, controlla prima di tutto se è presente nel child-theme: in caso positivo carica quello, altrimenti andrà a cercarlo nel tema padre. Anche qui, in caso di aggiornamenti del tema, non sarà toccato alcun file del tema child.

NOTA PER PROGRAMMATORI: A differenza del foglio di stile e dei file del tema, che vengono sovrascritti quando presenti nel child-theme, il file “functions.php” del tema child NON sovrascrive quello del padre, ma viene incluso prima del functions originale.

Come attivare un tema child

Ok, ora abbiamo creato il nostro tema child, ma come lo usiamo?

Dovete assicurarvi prima di tutto di aver installato tutti e due i temi sul vostro sito WordPress: sia il padre (“focux” nel nostro caso) che il tema figlio (“focux-child”). Fatto questo vi basta attivare il tema “focux-child”.

Mi raccomando, non il padre, ma il figlio, altrimenti WordPress non leggerà le modifiche che avete incluso nel tema child.

Qui sotto potete vedere un esempio per chiarire meglio il concetto:

Conclusioni

Come avete visto, creare un tema child non è assolutamente complicato e soprattutto non richiede particolari conoscenze di programmazione. A suo vantaggio invece avete la libertà di modificare un tema WordPress come più vi comoda, senza l’ansia di non poterlo aggiornare.

Seguite questi semplici passaggi e vedrete che in futuro mi ringrazierete.

Fateci sapere come avete utilizzato il tema child.
Non siate troppo pigri 😉

Per scaricare le slide segui questo link.