Tema Child per WordPress: Come crearlo e a cosa serve

Quando si personalizza un template è necessario salvaguardare tali modifiche nel tempo. Il tema child ha il compito di risolvere questo inconveniente.

Il tema child per WordPress ha cosa serve?

Il template child (o figlio) consente di salvaguardare le personalizzazioni quando il produttore aggiorna il tema (parent o genitore). Questo è possibile poiché tutte le modifiche vengono conservate nel tema figlio.

Come creare il template child?

Per creare il tema child sono necessari alcuni passi per procedere in questo senso. La bibbia che ti aiuta a capire cosa fare è il Codex di WordPress che è il supporto tecnico per WordPress.

In questa sezione del sito di WordPress vi è una guida completa di tutte le funzioni che questo CMS per gestire il Core, i plugin e i temi.

Questo significa che bisogna mettere mano al codice del tema usato per creare il tema child o figlio.

WpressPlanet - Come creare un sito Web con Wordpress

Come creare un tema child: i passi da compiere

I passaggi principali sono i seguenti:

  • creare una cartella che deve contenere i file del tema figlio all’interno della cartella “themes”;
  • creare un file style.css all’interno della cartella indicata nel primo punto;
  • copiare un immagine dalle dimensioni di 1200×900 pixel nominandolo screenshot la cui estensione può essere jpg o png;
  • creare una copia del file functions.php all’interno della suddetta cartella.

Il primo passo è creare una cartella che possiamo chiamare ad esempio child_twenty all’interno della cartella themes, che a sua volta è una sotto cartella di wp-content di WordPress.

Il secondo passo è la creazione del file style.css all’interno della cartella child_twenty. Il contenuto del file deve iniziare con “Theme name:” e “Template:”. La prima voce serve a dare il nome al tema child che viene mostrato all’interno di WordPress, in caso di non utilizzo di questa voce il nome del template verrebbe preso dal nome della cartella, in questo caso child_twenty. La secondo voce serve, invece, per indicare il nome del template padre.

Se non si usasse la voce “Template”, WordPress segnalerebbe la mancanza del file index.php del tema all’interno della cartella child_twenty.

Ora per visualizzare la miniatura dell’anteprima del template presente nella pagina “Aspetto>Temi” di WordPress basterà copiare nel folder child_twenty un’immagine dalle dimensioni di 1200×900 pixel e denominare il file “screenshot”. L’estensione del file immagine può essere sia jpg che png. L’immagine sottostante rispecchia il risultato finale che si ottiene con quello spiegato fino adesso.

tema child wordpress
Anteprima WordPress Child Tema

I template child: il file functions.php

Il terzo passo è caricare il resto dei file css e js dal tema parent. Questo passaggio è necessario, altrimenti la template risulterebbe senza formattazione del layout e incompleta.

Per fare questo è necessario creare un file functions.php utilizzando il blocco note di Windows, copiare al suo interno il codice sottostante e salvarlo con l’estensione “.php” nella cartella child_twenty.

<?php
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
function my_theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ ); } ?>

Questo codice è disponibile sul Codex di WordPress. Una volta salvato il contenuto nel file functions.php basterà aggiornare la pagina del sito web per vederne i risultati.

Il file style.css e il file functions.php della cartella child_twenty integrano le modifiche da esse apportate funzionando in simbiosi con il file style.css e file functions.php del tema parent.

Una spiegazione di cosa significano le varie voci di questo codice per renderlo un po’ più comprensibile.

  • add_action() viene definito come un “Hook” (traducibile come uncino o gancio), e rappresenta un’azione che viene attivato ad un specifico evento.
  • wp_enqueue_scripts viene definito come una sorta di registro che ha la funzione di richiamare sia i file css che js in modo da mostrarne il contenuto sul lato front-end del sito.
  • wp_enqueue_style() è anch’esso una sorta di registro per richiamare i file css.
  • get_template_directory_uri() richiama l’url della cartella del tema originale dove vi sono i relativi file. Poiché questa funzione punta alla directory del tema parente, ma non al file style.css, sarà necessario integrare la funzione con il “.” di concatenamento che si usa in PHP per indicare specificamente a quale file deve puntare . In questo caso a style.css.
  • my_theme_enqueue_styles e parent_style sono i nomi o le etichette che devono identificare in modo univoco la funzione, tali nomi sono personalizzabili a piacere. La cosa importante che l’etichetta di add_action() e di function siano identiche.

Posso personalizzare il codice in questa maniera. Continuerà a funzionare.

<?php
add_action(‘wp_enqueue_scripts’, ‘genitore’); function genitore(){wp_enqueue_style(‘stylegenitore’, get_template_directory_uri() . ‘/style.css’; } ?>

Le altre voci del file style.css

Le altre voci aggiuntive che il file style.css contiene a partire dal terzo punto della lista sono le seguenti:

  1. Theme Name: Child Twenty: Assegni un nome al tema.
  2. Template: twentytwenty: fa riferimento al nome della cartella del tema parent.
  3. Author: Wpressplanet team: indica il nome dell’autore.
  4. Author URI: https://wpressplanet.com/: link al sito dell’autore. Rende cliccabile Author.
  5. Version: 1.0: indica la versione del tema
  6. Description: Questo tema è un tema child di twentytwenty: per aggiungere il descrittivo del tema.
  7. Tags: tema, template, child-tema: assegna i tags al tema.

Alla fine non tutti i parametri sono necessari.

child tema wordpress
Schermata Child tema

Per usare il tema child deve essere attivato come un qualsiasi tema andando in Aspetto>tema raggiungibile tramite la barra posizionata sul lato sinistro dello schermo del gestionale di WordPress.

La tua iscrizione non può essere convalidata.
La tua iscrizione è avvenuta correttamente.

Non ti dimenticare di…

scaricare la guida su WordPress per sapere cosa fare dopo l’installazione.

Ti invito a lasciare un tuo commento su questo argomento e a porre domande su WordPress.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *