3 modi per creare un Tema Child in WordPress
Creare un Tema Child – Premessa
In questo articolo scoprirai 3 modi per creare un Tema Child in WordPress. Ma che cos’è un Tema Child e a che serve? Devi sapere che qualsiasi Tema Grafico in WordPress (detto anche Template) ha delle funzionalità prestabilite, preimpostate dall’autore del Tema, che non sempre rispondono alle nostre necessità.
Ad esempio può capitare che non ci soddisfi l’impaginazione, o che alcune parti di esso non siano adeguatamente tradotte in italiano, o che un modulo di contatto non abbia l’aspetto che ci eravamo prefissi, etc. I motivi possono essere i più svariati.
Ed è qui che entra in gioco il Tema Child: potrai apportare tutte le personalizzazioni (ultimamente va in voga l’anglicismo “customizzazioni”) che vorrai senza rischiare di perderle non appena aggiornerai il Tema Padre (parent theme, in inglese).
Indice Argomenti
#1 – Creiamo i file style.css e functions.php
La procedura è facilissima e ti assicuro che basteranno pochi minuti. In pratica dovrai creare due semplici file di testo, come ti mostro qui di seguito:
- Crea il file style.css: apri un editor di testo (va benissimo anche il blocconote), vai su File > Salva con nome > Salva come tutti i file > style.css > Salva.
- Crea il file functions.php: stessa procedura di prima, cambiano solo il nome e l’estensione del file.
Per la Codifica, scegli utf-8 anziché ansi o unicode.
Ecco il codice che dovrai inserire nel file style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* Theme Name: Mio Primo Tema Child Theme URI: https://mariorossi.it/wp-content/themes/nome-tema-child/ Description: Questo è il mio primo Tema Child! ;) Author: Mario Rossi Author URI: https://mariorossi.it/ Template: nome-tema-padre Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: nome-tema-padre-child */ /* Inserisci qui in basso le tue modifiche css */ |
Puoi editare ogni riga a tuo piacimento, ma quelle decisamente fondamentali sono:
- Theme URI: inserisci il percorso del tuo Tema Child
- Template: inserisci il nome del tuo Tema Padre. IN MINUSCOLO!
- Version: richiesto da WP 5 in poi
- Text Domain: il nome del Tema Padre seguito dal suffisso -child
Ponendo per esempio che il tuo Tema Child si basi su Twenty Twent-Two, avrai queste impostazioni:
|
1 2 3 4 5 6 7 8 9 10 11 |
/* Theme Name: Twenty Twenty-Two Child Theme URI: https://mariorossi.it/wp-content/themes/twentytwentytwo-child/ Description: Questo è il mio primo Tema Child! ;) Author: Mario Rossi Author URI: https://mariorossi.it/ Template: twentytwentytwo Version: 1.0.0 Text Domain: twentytwentytwo-child */ /* Inserisci qui in basso le tue modifiche css */ |
In basso potrai aggiungere tutte le tue modifiche css, che andranno a eseguire l’override (sovrascrittura) sul Tema Padre anche dopo l’update di quest’ultimo.
Ed ecco il codice che dovrai inserire nel file functions.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php function gowp_child_theme_enqueue_styles() { $parent_style = 'gowp_parent_style'; $parent_base_dir = 'nome-tema'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css', array(), wp_get_theme( $parent_base_dir ) ? wp_get_theme( $parent_base_dir )->get('Version') : '' ); wp_enqueue_style( $parent_style . '_child_style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'gowp_child_theme_enqueue_styles' ); ?> |
Edita solo la terza riga, inserendo tra gli apostrofi il nome del tuo Tema Padre in minuscolo e Salva. Ponendo che il Tema Padre sia twentyseventeen, scriverai twentyseventeen al posto di nome-tema. Salva.
Adesso crea la cartella ove risiederanno i due file style e functions. Per convenzione, si dà alla cartella il nome del Tema Padre col suffisso -child. Ad esempio twentyseventeen-child.
All’interno di questa cartella risiederanno, inoltre, tutti i file a cui hai necessità di apportare modifiche (ad esempio page.php, single.php, header.php etc) e rimarrano invariati anche dopo l’aggiornamento del Tema Padre, preservando così tutte le personalizzazioni da te introdotte.
N.b. per utenti avanzati: Il file style.css va a sovrascrivere il file originale del Tema Padre. Il file functions.php, invece, non sovrascrive il file originale, bensì viene eseguito “in addition“, ossia in aggiunta al primo. Pertanto assicurati di NON definire le stesse funzioni del Tema Padre. Generalmente si usa il prefisso “child-” per non incorrere in errori.
Fonte: https://developer.wordpress.org/themes/advanced-topics/child-themes/#3-enqueue-stylesheet
Adesso Carica il Tema Child via FTP
Ok, il Tema Child è realizzato. Adesso non rimane che eseguire l’Upload del nuovo tema in wp-content/themes/, attraverso il Panello di controllo del tuo Provider di Hosting, oppure tramite un Client FTP. Se non sai che cos’è e vuoi scoprirlo, leggi il nostro articolo sul protocollo FTP.
Prima di procedere, ricorda di inserirvi tutti quei files a cui hai apportato modifiche (single.php, header.php etc). In particolare rispetta l’ordine delle directory: se un file del Tema Padre risiede, ad esempio, in /twentyseventeen/assets/file.php, nel Tema Child avrà il percorso /twentyseventeen-child/assets/file.php
Carica il Tema Child manualmente (senza FTP)
Una valida alternativa, molto più celere, è quella di creare un file zip del tuo Tema Child e caricarlo mediante l’Upload nativo in WordPress. Quindi, se hai già creato il Tema, non rimane che zipparlo (con estensione .zip e NON .rar, .7z etc) e procedere in questo modo:
Menù > Aspetto > Temi > Carica Tema > Sfoglia > Installa ora
Una volta caricato, ti suggerisco di utilizzare lo strumento “Anteprima” prima di attivarlo.
Abbiamo realizzato un Tema Child con alcuni miglioramenti di codice che si adatta a tutti i Temi WordPress. Segui le istruzioni all’interno del file zip (56 kb) e in meno di due minuti avrai il tuo Tema Child operativo e funzionante.
#2 – Funzione @import in style.css
Sebbene sia il più diffuso, questo metodo è ormai considerato “superato” e in genere sconsigliato, in quanto la funzione @import impiega più tempo (parliamo frazioni di secondo o poco più) a caricare tutte le specifiche del file originale style.css. Quindi anche noi suggeriamo sempre il primo metodo, testé descritto.
Ma a scopo puramente informativo, illustreremo il modo con cui poter realizzare un Tema Child altrettanto funzionante per il tuo Sito Web.
In questo caso bisogna creare “solo” un file, cioè style.css, ed aggiungervi le stesse informazioni viste sopra + la funzione @import, in questo modo:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* Theme Name: Tema Child Theme URI: http://www.mio-sito.it/wp-content/themes/nome-tema/ Description: Questo è il mio primo Tema Child! ;) Author: Il mio nome Author URI: http://mio-sito.it/ Template: nome-tema */ @import url("../nome-tema/style.css"); /* Inserisci qui in basso le tue modifiche css */ |
Anche qui stesso discorso di prima: edita Theme URI, Template e sostituisci nome-tema col nome del Tema Padre, sempre scritto in minuscolo.
Esempio: @import url(“../twentyseventeen/style.css”);
Anche in questo caso puoi caricare il Tema Child via FTP o via Upload WordPress (in zip).
#3 – Genera il Tema Child via Plugin
E infine, per chi volesse scegliere la via più comoda e rapida, vi è la possibilità di creare un Tema Child in WordPress con un semplice plugin. Ne esistono di svariati, ognuno con le sue peculiarità.
Noi suggeriamo un plugin facilissimo, alla portata di tutti:
Child Theme Creator by Orbisius
In un solo click creerai il tuo Tema Child. Ecco l’anteprima:
Altri plugin per creare un Tema Child in WordPress
Se per qualche motivo dovessi trovare difficoltà col primo, prova a testarne altri. Questa rimane comunque, a nostro avviso, la scelta “peggiore” per ottenere un Tema Child. I plugin hanno il “vizietto” di caricare funzioni php, file css, file javascript etc, che da un lato risolvono un problema ma dall’altro rallentano il caricamento delle pagine del tuo Sito Web.
Quindi ricorri ai plugin – in generale e non solo in questo caso – quando non puoi proprio farne a meno.
Conclusione
Forse qualcuno potrebbe pensare ad una “soluzione” bizzarra:
«Io non aggiorno il Tema Genitore e così non devo fare tutto ‘sto sbattimento!»
Sarebbe un pessimo errore perchè, così facendo, si perderebbero tutti gli aggiornamenti del Tema, che riguardano più che altro la sicurezza, la stabilità e la conformità del Tema alle nuove versioni di WordPress (oltre che alle nuove versioni del linguaggio php e database MySql, su cui opera WordPress).
Adesso mostraci il Tuo Tema Child! Enjoy! 😉
