Per quanto il tema attivo sul nostro sito possa essere personalizzato a volte si rende necessario intervenire sugli script che lo compongono e modificare il codice per adattarlo alle nostre esigenze. Come è stato accennato in altri articoli presenti su andrearonchetti.it, le modifiche di questo tipo vengono cancellate dall’aggiornamento del tema, fase in cui vengono sovrascritti tutti gli script.
Per questa ragione WordPress prevede un meccanismo che consente di non perdere le modifiche fatte, senza dover fare il backup dei file in questione: la creazione di un tema Child.
Come dice la parola stessa, si tratta di un tema che eredita dal genitore tutti gli script che non si trovano all’interno della sua cartella principale e delle sue sottocartelle.
Se, per esempio, modifichiamo il file archive.php, per dare una struttura diversa alle pagine di categoria, dobbiamo ricreare il file nel tema child, nella stessa posizione di quello del tema genitore, così WordPress caricherà archive.php del tema child, mentre cercherà gli altri script nel tema genitore. L’unica eccezione è costituita dai functions.php, situati nelle cartelle root dei rispettivi temi, che vengono caricati entrambi.
In questo articolo vediamo brevemente come si crea un tema child partendo da un esempio in cui faremo una modifica semplicissima a scopo puramente illustrativo. Una volta capito il concetto ognuno farà le personalizzazioni che ritiene sul proprio progetto.
Su un sito c’è attivo il tema Twenty Seventeen di WordPress. Lo scopo della personalizzazione è che i titoli dei post abbiano delle classi, che corrispondano agli slug delle categorie associate, quando vengono caricati in Home page, nel singolo post e nelle pagine archivio.
Come si crea un tema child
Anzitutto occorre una premessa: non tutti i temi funzionano bene con le versioni child. Può capitare, alla loro attivazione, che le impostazioni del tema genitore non abbiano effetto. Intanto è necessario scegliere bene il tema, poiché uno buono non dovrebbe creare questo tipo di problemi o, altrimenti, dovrebbe prevedere un sistema di esportazione e importazione delle impostazioni generali; comunque è buona abitudine crearlo subito, in fase di realizzazione del progetto, piuttosto che quando il sito è online e servono delle personalizzazioni ulteriori in tempi successivi. Nel dubbio lo si crea subito, senza modificare alcuno script.
Creazione della cartella del tema e del file style.css
Per prima cosa creiamo la cartella del tema child all’interno della wp-content/themes/, dando il nome della cartella del genitore, seguito da -child. Pertanto, se la cartella del nostro tema è twentyseventeen, quella del tema child sarà twentyseventeen-child.
All’interno della cartella creiamo il file style.css, che contiene, oltre agli stili generali del tema, le intestazioni che WordPress usa per la pagina Gestione dei temi e per cercare i file di traduzione. Possiamo copiarle dal .css del tema genitore e sostituire le parti che ci interessano; in particolare:
- Theme Name sarà [nome del tema genitore] Child
- Template prenderà il nome della cartella del tema genitore
Le altre voci non sono fondamentali.
/* Theme Name: Twenty Seventeen Child Theme URI: http://example.com/ Description: Tema Child per il tema Twenty Seventeen Author: Qui il vostro nome Author URI: http://example.com/about/ Template: twentyseventeen Version: 0.1.0 */
Importazione delle regole contenute nel .css del tema genitore
Qualora attivassimo, a questo punto, il nostro tema child, ci accorgeremmo che le regole stilistiche previste per il tema genitore non verrebbero applicate; questo perché l’attivazione di un tema child non comporta l’importazione automatica del css del tema genitore, quindi dobbiamo pensarci noi con uno dei metodi qui descritti:
- utilizzando la rule @import nel css del tema figlio, fortemente sconsigliato poiché così facendo tale css viene caricato due volte;
- accodare il file tra quelli da caricare nella head, agganciando una funzione, che esegua wp_enqueue_style(‘parent-style’, get_template_directory_uri().’/style.css’), all’action hook wp_enqueue_scripts, come da esempio.
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'); }
Utilizzare uno screenshot per la pagina Gestione dei temi
Questa fase non è assolutamente necessaria per il buon funzionamento del tema figlio; tuttavia ne consente un riconoscimento più immediato all’interno della pagina Gestione dei temi. Per l’anteprima WordPress cerca il file screenshot.png, situato nella cartella principale del tema.
Dato che serve solo a noi e non dobbiamo distribuire questa versione possiamo prendere lo screenshot usato nel tema genitore e aggiungere, con Photoshop o Gimp, da qualche parte nell’immagine, la scritta Child, come si vede sotto.
Se è stato fatto tutto correttamente dovremmo vedere, nella pagina Gestione dei temi, il nostro tema Child con l’anteprima da noi creata.
Attivazione del tema child
A questo punto il nostro tema è presente tra quelli disponibili: possiamo quindi attivarlo e, se tutto è andato bene, dovremmo vedere il sito esattamente come prima. In caso contrario non c’è da spaventarsi: alcuni temi memorizzano delle opzioni su server diversi oppure prevedono una procedura particolare per importare le impostazioni fatte su un’altra installazione. In questi casi è bene controllare che il tema abbia una propria procedura di esportazione e importazione delle impostazioni tramite file .json o .xml. È chiaro, quindi, che è bene iniziare subito un progetto col tema Child, così che le impostazioni vengano fatte già su questo tema.
Facciamo le modifiche agli script
Adesso che il nostro tema child funziona possiamo intervenire per fare le modifiche che ci interessano.
Come accennato all’inizio dell’articolo, vogliamo che i titoli dei post abbiano le classi corrispondenti agli slug delle categorie. Nel nostro caso c’è da agire sul file template-parts/post/content.php, partendo dalla cartella principale. Lo copiamo dalla cartella del tema genitore, ricreiamo le sottodirectory in cui si trova all’interno della root del child, e lo incolliamo dentro /post/, pertanto se il file originale si trova in /wp-content/themes/twentyseventeen/template-parts/post/, la copia si troverà dentro /wp-content/themes/twentyseventeen-child/template-parts/post/.
Vediamo ora la parte di codice interessata.
<header class="entry-header"> <?php if ( 'post' === get_post_type() ) { echo '<div class="entry-meta">'; if ( is_single() ) { twentyseventeen_posted_on(); } else { echo twentyseventeen_time_link(); twentyseventeen_edit_link(); }; echo '</div><!-- .entry-meta -->'; }; if ( is_single() ) { the_title( '<h1 class="entry-title">', '</h1>' ); } elseif ( is_front_page() && is_home() ) { the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' ); } else { the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); } ?> </header><!-- .entry-header -->
Per farla breve il codice genera il titolo in modo differente a seconda che si tratti del singolo post, della home page (qualora non sia impostata una pagina statica), oppure delle pagine di archivio o di categoria. In tutti e tre i casi dobbiamo aggiungere le classi corrispondenti agli slug delle categorie. Così sarà il codice modificato (leggere i commenti per capire la logica).
<header class="entry-header"> <?php if ( 'post' === get_post_type() ) { echo '<div class="entry-meta">'; if ( is_single() ) { twentyseventeen_posted_on(); } else { echo twentyseventeen_time_link(); twentyseventeen_edit_link(); }; echo '</div><!-- .entry-meta -->'; }; //array di oggetti WP_Terms; ogni oggetto ha la prorprietà slug $categories=get_the_category(); //stringa delle classi da aggiungere $class_to_add=""; //ciclo su array di oggetti WP_Terms; da ciascuno si ricava lo slug, che viene agganciato alle classi da aggiungere foreach($categories as $cat){ $class_to_add.=" ".$cat->slug; } //in tutti i casi le classi vengono aggiunte al titolo del post if ( is_single() ) { the_title( '<h1 class="entry-title '.$class_to_add.'">', '</h1>' ); } elseif ( is_front_page() && is_home() ) { the_title( '<h3 class="entry-title '.$class_to_add.'"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' ); } else { the_title( '<h2 class="entry-title '.$class_to_add.'"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); } ?> </header><!-- .entry-header -->
A questo punto carichiamo una pagina del sito che contenga un post e assicuriamoci che la modifica abbia effetto; se è così <h1>, <h2> o <h3>, a seconda di cosa visualizziamo, ossia singolo post, pagina di categoria o Home Page, avrà come classe “entry-title [cat1] [cat2]...”.
Creare un tema child conviene: più difficile è iniziare ma più facile è continuare
Creare un tema child non è complesso, è questione di esperienza; poi, come abbiamo detto, dipende tutto da come è stato scritto il tema. All’inizio ci si imbatterà in qualche difficoltà ma poi il progetto sarà più gestibile, specie in fase di aggiornamento del tema.