Tema child WordPress [GUIDA]

Uno dei vantaggi che favorisce la scelta del CMS WordPress rispetto ad altri cms, è la possibilità di utilizzare un Tema child. In questo tutorial apprenderai di cosa si tratta, come crearlo ed editarlo e tutto il resto sul tema child.

Cos’e un Tema child

Dando per scontato che sappiate cos’è un CMS e conosciate già WordPress (guide e tutorial per WordPress), avrete sicuramente iniziato ad approfondire l’utilizzo e la personalizzazione del cms. Uno degli aspetti che hanno reso WordPress così famoso è la gestione dei temi child.

Un Tema child è come una pellicola che ti permette di modificare il risultato finale (css, struttura, ecc..) che il tema principale produce. Quindi è evidente che non può funzionare senza un tema principale (padre) che contiene tutto il core delle varie funzionalità da utilizzare.

Perché usare un Tema child

Utilizzare un tema child è tra le cose fondamentali per un progetto a lungo temine. Così facendo sarà possibile mantenere aggiornato l’intero cms, garantendo sempre la massima affidabilità e standard altissimi in termini di sicurezza e compatibilità dei vari componenti del nostro sito web.

Ad esempio, abbiamo acquistato (su qualsiasi marketplace) o scaricato gratuitamente da WordPress.org un tema. Decidiamo di personalizzarne la struttura cambiando ad esempio l’impostazione del layout della testata (wp-content/themes/CARTELLA-TEMA/header.php), l’impostazione del layout delle tassonomie (wp-content/themes/CARTELLA-TEMA/archive.php) ed alcuni stili CSS (wp-content/themes/CARTELLA-TEMA/style.css).

Ci ritroviamo quindi con i file del tema (wp-content/themes/CARTELLA-TEMA/) modificati rispetto agli originali.

Se il provider del vostro servizio hosting, aggiorna la versione di PHP del server o se alcuni plugin diventano incompatibili con la versione obsoleta del vostro CMS, sarete obbligati ad aggiornare WordPress (potrebbe anche aggiornarsi automaticamente per questioni di sicurezza).

Aggiornando WordPress spesso (ma non per forza) si riscontrano problemi di incompatibilità con i temi e plugin installati (se non aggiornati). Questo potrebbe restituire errori o addirittura schermata bianca e malfunzionamento del sito web.

Per causa maggiore sarete costretti ad aggiornare pure i plugin e il tema attivo (che avevamo personalizzato editando i file in precedenza).

Quando si effettuano aggiornamenti del CMS o dei suoi componenti (temi e plugin), questo scarica dalla rete le versioni aggiornate dei file. Una volta scaricati li sostituisce fisicamente con quelli presenti nelle cartelle del vostro CMS. Andando così a sostituire i file che avevamo editato e personalizzato secondo le nostre esigenze perdendo tutte le modifiche.

Per evitare di perdere queste personalizzazioni, è sempre consigliato creare, attivare e personalizzare il Tema child spesso fornito col tema (che non verrà sostituito durante un’aggiornamento).

Il Tema child eredita tutte le caratteristiche (funzioni e stili) del tema genitore (tema principale) e quindi eventuali personalizzazioni andranno a sovrascrivere quelle presenti nel tema genitore.

Come creare un Tema child

Abbiamo capito l’importanza di avere un Tema child per personalizzare l’aspetto e le funzionalità del nostro tema.

Spesso all’interno dell’archivio fornito col tema è presente il tema child da installare ed attivare dopo aver installato ed attivato il tema genitore.

Se nel vostro tema non è presente, è possibile crearlo seguendo questa semplice procedura.

Per prima cosa rechiamoci tramite FTP o file manager sulla cartella “wp-content/themes/” del vostro cms, qui risiedono tutti i temi installati sul nostro WordPress.

Tra queste cartelle troveremo quella del nostro tema (solitamente riconoscibile dal nome della cartella), appuntiamo il nome di questa cartella (ad esempio: CARTELLA-TEMA).

Adesso creiamo all’interno della cartella “wp-content/themes/” del vostro cms una cartella nominandola ad esempio TEMA-CHILD.

Nella cartella appena creata creiamo il file style.css incollando questo codice:

/*
Theme Name: Tema child
Theme URL: https://www.andreadegiovine.it
Description: Tema child creato seguendo la guida https://www.andreadegiovine.it/1554/tema-child.html
Author: Andrea De Giovine
Author URL: https://www.andreadegiovine.it
Template: CARTELLA-TEMA
Version: 1.0.0
Text Domain: TEMA-CHILD
*/ /* Gli stili personalizzati andranno sotto questa riga */

modificando in questa riga “Template: CARTELLA-TEMA” CARTELLA-TEMA con il nome della cartella del tema principale (genitore) che avevamo appuntato prima e modificando in questa riga “Text Domain: TEMA-CHILD” TEMA-CHILD con il nome della cartella che avete creato per il vostro tema child.

Nella cartella del vostro tema child adesso creiamo il file functions.php ed inseriamo la funzione che includerà gli stili del tema genitore (principale). Copiamo ed incolliamo questo codice dentro il file functions.php appena creato:

<?php
// Tema child realizzato seguendo la guida https://www.andreadegiovine.it/1554/tema-child.html
add_action( 'wp_enqueue_scripts', 'innesto_stile_genitore' );
function innesto_stile_genitore() {
   wp_enqueue_style( 'stile-tema-genitore', get_template_directory_uri().'/style.css' );
}

Perfetto! Il nostro tema child è praticamente pronto!

Come personalizzare il Tema child

Se tutto è stato fatto nel modo corretto, andando su “Aspetto > Temi” ci ritroveremo (oltre il tema genitore) anche il tema child appena creato, possiamo attivarlo. Recandoci sul sito web, dovreste avere esattamente lo stesso output del tema genitore, se riscontrate problemi rifate la procedura facendo attenzione a tutti i passaggi.

Adesso possiamo personalizzare il nostro tema child, aggiungendo quindi tutti gli stili CSS al file style.css contenuto nella cartella del nostro tema child. Possiamo inoltre aggiungere funzioni personalizzate o sovrascrivere (non in tutti i temi) le funzioni del tema genitore aggiungendo del codice al file functions.php contenuto nella cartella del nostro tema child.

Per gli utenti più esperti è possibile sovrascrivere anche i file di template del tema principale (genitore), copiando il file che si vuole personalizzare nella cartella del child (ad esempio copiando header.php dalla cartella del tema genitore a quella del tema child). Procedendo poi alla modifica e cambiando l’output come meglio si desidera.