Tema Child WordPress: come e perché

Theme Child WordPress: partiamo dalle basi, cosa significa?

Sappiamo benissimo che per utilizzare WordPress la primissima cosa da fare è scegliere, scaricare ed installare un tema, ma una volta trovato il tema perfetto, come modificarlo?

Sicuramente starete pensando alla semplice e assolutamente fantastica sezione Aspetto>Personalizza, da qui si può cambiare il colore del tema, la foto della cover, il font, i widget del footer, etc etc…

Ma, se volessimo modificare ‘profondamente’ il tema scelto, ad esempio implementandolo con nuove funzioni PHP, aggiungendo script JS, fogli di stile personalizzati e tanto tanto altro?

La risposta è semplice: dobbiamo creare un Tema Child WordPress.

Perché si chiama così? Perché è effettivamente il Figlio del tema Genitore, appunto.

Con un tema Child WordPress possiamo avere molti vantaggi:

Avremo tutto quello che c’è nel tema Genitore ma con la possibilità di aggiungere tutto quello che manca come nuove funzionalità e con la possibilità di personalizzarlo al 100% e, ogni qual volta dobbiamo aggiornare il tema genitore, tutte le modifiche che abbiamo fatto sul Child non le perderemo!

Ora che abbiamo capito la necessità di creare un Child, vediamo come crearne uno.

1 La scelta del tema

Per questo esempio sceglieremo il tema per antonomasia di WordPress, Twenty Seventeen

Dopo aver installato WordPress sul tuo dominio, troverai già come tema di default Twenty Seventeen, ma potrai comunque scegliere uno da Aspetto>Temi>Aggiungi nuovo tema.

Adesso dovrai aprire il tuo hosting per accedere ai file del tema genitore.

Se stai usando cPanel (la dashbord che trovi su Siteground o Register ad esempio) dovrai andare su Gestione File -vedi foto sotto-, poi scegliere il dominio da modificare dal menu a tendina e cliccare su Vai.

cpanel come si presenta
Se è la prima volta che apri questa sezione forse ti spaventerai per la lista immensa di cartelle, ma niente paura:

Vai su wpcontent>themes, troverai una cartella che si chiama proprio come il tema che hai scelto, in questo caso Twenty Seventeen.

Ora dovrai creare una nuova cartella e darle un nome di fantasia, per praticità la chiameremo twentyseventeen-child.

A questo punto dovrai aprirla e creare due nuovi file:

  • functions.php
  • style.css

Fatto? Bene allora passiamo alla ciccia:

dobbiamo andare adesso sulla sezione Tema Child WordPress del sito ufficiale di WordPress: https://codex.wordpress.org/it:Temi_Child

Troverai due codici, questo è il primo:

/*
Theme Name:     Twenty Thirteen Child
Theme URI:      http://example.com/
Description:    Tema Child per il tema Twenty Thirteen
Author:         Qui il vostro nome
Author URI:     http://example.com/about/
Template:       twentythirteen
Version:        0.1.0
*/

copialo ed incollalo (selezionando il file e cliccando su editor codice -vedi foto sotto-) nel file style.css, sostituendo i campi con i tuoi:

cpanel barra degli strumenti
/*
Theme Name:     Il nome del tuo tema child (a tua scelta)
Theme URI:      Il tuo sito web
Description:    Descrizione del tuo tema child
Author:         Il tuo nome
Author URI:     Il link alla tua pagina (sul tuo sito web)
Template:       nome del tema padre
Version:        versione del tema child
*/

Questo invece è il secondo codice di cui hai bisogno, copialo così com’è nel file appena creato chiamato functions.php:

<?php

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' );
}

Bene hai fatto il 90% del lavoro, ora dovrai soltanto aprire il tuo back end di WordPress, andare su Aspetto>Temi e vedrai che vicino Twenty Seventeen ci sarà un altro tema: Twenty Seventeen Child.

Clicca ora su Attiva ed il gioco è fatto!

Da ora potrai, accedendo ai file del tema genitore, duplicarli e modificarli direttamente nel Child!

Buona Personalizzazione e se hai ancora altri dubbi lascia un commento o vai alla sezione WordPress Everyday, troverai tanti spunti per l’utilizzo quotidiano di WordPress livello base, intermedio e avanzato!