5 tecniche per modificare un tema nel modo corretto

Quante volte vi sarà capitato di dover aggiornare il tema modificato per un cliente e all'improvviso temere di perdere tutto il lavoro fatto?

Vediamo insieme una serie di tecniche e regole d’oro per personalizzare un tema e adattarlo alle richieste del cliente senza perdere la compatibilità con gli aggiornamenti.

1 - Child theme

Ebbene si, la prima e imprescindibile regola è anche la più banale probabilmente per molti di voi, ovvero usare un child theme.

L’importanza cruciale nell’usare un child theme risiede nel fatto che ci permette di mantenere intatto e aggiornabile il tema parent, che sia stato acquistato su un marketplace o scaricato da WordPress.org non fa alcuna differenza.

Attivare il child theme ci permetterà di affrontare tutte le personalizzazioni con le tecniche che saranno illustrate nei punti seguenti garantendoci la possibilità di aggiornare il tema principale senza problemi.

E se il tema che abbiamo scaricato non ha un child theme incluso?

Niente paura, creare un child theme è molto semplice, può essere fatto a mano se si ha un minimo di dimestichezza con il codice oppure usare uno dei tanti plugin che si trovano sulla repository di WordPress.org che ci consentiranno di crearlo con un click.

2 - Sovrascrittura di template

Questa regola vale per temi e plugin, la sovrascrittura di un template, qualora dobbiate modificare larghe porzioni di codice e non sia presente un action o un filtro, è una pratica molto comune.

Sfruttando la gerarchia dei template di WordPress saremo in grado di sovrascrivere un template semplicemente copiando il file, se necessario con il suo percorso, all’interno del nostro child theme, un esempio?

Se volessimo modificare il template della pagina 404 ci basterà copiare il file 404.php dal tema parent nel tema child.

Questo vale per tutti i template di elencati nella pagina di gerarchia dei template, chiaramente se state utilizzando un tema custom che definisce una propria struttura di inclusione dei template questa regola non è applicabile.

3 - Usare i filtri

I filtri in WordPress fanno parte, insieme alle action, di quelli che sono chiamati “hooks”, ovvero degli agganci al codice che ci permettono di modificare dei comportamenti di un tema o plugin tramite una funzione.

I filtri, come dice il loro nome, filtrano del contenuto, quindi hanno bisogno a differenza delle azioni di ritornare sempre un valore.

Come possono tornarci utili nella personalizzazione di un tema?

Innanzitutto potremmo iniziare cercando tutti i filtri dichiarati nel nostro tema parent cercando apply_filters all’interno dei file php della cartella in modo da capire se il tema dichiara qualche filtro giusto per farci un’idea sul cosa possiamo modificare.

Se ad esempio facciamo questa ricerca all’interno del tema Twenty Nineteen troveremo diversi filtri definiti.

Prendiamone in esame uno molto semplice per capirne bene il funzionamento, il filtro dichiarato in image.php chiamato twentynineteen_attachment_size.

Il suo compito è quello di filtrare il valore dell’image size utilizzata per mostrare l’immagine nella pagina dedicata ad ogni singolo attachment.In questo modo sarà possibile tramite child theme definire una nuova dimensione da utilizzare senza toccare il template originale.

Andiamo quindi nel nostro child theme, in functions.php e creiamo la seguente funzione:

function child_theme_attachment_size( $image_size ) {
    return $image_size;
} 

Questa funzione per il momento non fa altro che accettare un valore in ingresso e ritornarlo senza modificarlo, nel pieno spirito dei filtri come abbiamo nella precedente spiegazione.A questo punto ci inseriamo nel filtro con il nostro nuovo valore per la dimensione dell’immagine, diciamo che useremo ‘thumbnail’ come esempio:

function child_theme_attachment_size( $image_size ) {
    $image_size = 'thumbnail';
    return $image_size;
} 

Ora non ci resta che associare questa nuova funzione al filtro che ci siamo segnati prima:

add_filter( 'twentynineteen_attachment_size', 'child_theme_attachment_size' ); 

4 - Usare le action

Le action a differenza dei filtri non necessitano di ritornare un valore e possono essere considerati dei veri e propri agganci per aggiungere contenuto come meglio crediamo, queste sono molto usate sopratutto nei plugin e un ottimo esempio a livello di organizzazione è sicuramente WooCommerce.

Come visto prima per i filtri, come facciamo a capire se un tema sta dichiarando qualche action da sfruttare a nostro vantaggio?

Ci basterà cercare nei file php nel tema do_action.

Un esempio di action possiamo trovarlo nel vecchio Twenty Sixteen che dichiara nel file footer.php chiamato twentysixteen_credits.

Come possiamo vedere dalla descrizione nel codice, questo action è lanciato subito dopo l’apertura del div con classe site-info e ci permette in questo modo di aggiungere del testo o del markup e personalizzare in questo modo il footer del tema senza necessariamente sovrascrivere il template footer.php.

Prepariamo quindi la nostra funzione per aggiungere un paragrafo con un testo:

function twentysixteen_custom_credits() {
    echo 'Testo che verrà inserito nel footer';
} 

e andiamo a collegarla all’action che ci siamo segnati:

add_action( 'twentysixteen_credits', 'twentysixteen_custom_credits' ); 

5 - Scrivere il CSS in un punto solo

Quest'ultima non è veramente una tecnica ma più buon senso direi.

Per colpa di WordPress che mette a disposizione due modi per modificare il CSS, uno nel customizer e uno attraverso l'editor di codice modificando direttamente il file style.css del child theme, oltre ai vari temi e plugin che aggiungono una loro textarea per aggiungere CSS o peggio ancora JavaScript custom, l'utente meno esperto si trova gioco forza a sparpagliare CSS un po' ovunque, perdendo di vista tutto quello che è stato aggiunto al tema. 

Il consiglio che mi sento di dare è di utilizzare sempre il file style.css perché in questo modo sarà più semplice tenere sotto controllo tutte le modifiche.