Ciao! In questo articolo troverai tutte le informazioni che ti servono per capire come funziona un tema WordPress e imparare a creare un tema child, manualmente oppure in automatico con un prompt per ChatGPT.
Partiamo dalle basi: cos’è un tema (o template) e perché è importante, per poi arrivare a spiegare come creare un tema Child.
Ptsss… lo sai già? Non perdere tempo!
Vai direttamente a come creare un tema Child oppure vedi subito il prompt per ChatGPT.
Che cos’è un tema WordPress
Voglio spiegarti brevemente cosa sono i temi nel contesto di WordPress.
Quando installi WordPress, tra le cose già incluse nel pacchetto ci sono anche temi pronti all’uso, come “Twenty Twenty-Five”, che puoi trovare in Aspetto -> Temi.
Non a caso ci sono questi temi preinstallati: WordPress non può funzionare senza un template attivo.
I temi controllano l’aspetto visivo del sito: tutto quello che vedi e con cui interagisci: se non ci fosse un tema attivo, vedresti solo una schermata bianca!
Che sia un template gratuito preinstallato o premium con licenza, la sua responsabilità principale è gestire l’aspetto grafico, ovvero l’insieme delle impostazioni che vanno a creare la facciata del sito.
Alcuni esempi?
- il font del sito
- le dimensioni e lo spessore dei testi
- i bordi arrotondati delle immagini
- il colore dei pulsanti
- … e molto altro
Tutte queste regole presenti in ogni tema vengono automaticamente applicate a ogni pagina, così il sito mantiene un aspetto coerente e gradevole.
Come funziona un tema WordPress?
I temi moderni, realizzati per funzionare con l’editor a blocchi di WordPress (Gutenberg), hanno bisogno solo di due file principali per funzionare ed essere validi:
- templates/index.html
Contiene una struttura a blocchi di base per mostrare il contenuto della pagina. - style.css
Contiene le istruzioni sui colori, la dimensione dei caratteri, e via dicendo.
I temi classici invece, che rappresentano la stragrande maggioranza dei template in circolazione, hanno bisogno anche loro di due file specifici:
- functions.php
Contiene le istruzioni per interagire con le funzionalità di WordPress. - style.css
Contiene le istruzioni sui colori, la dimensione dei caratteri, e via dicendo.
Questi due file sono presenti in praticamente tutti i temi, con pochissime eccezioni.
Come puoi vedere, temi classici e moderni hanno una struttura leggermente diversa ma sono accomunati dall’utilizzo di un file “style.css”.
Saper riconoscere a quale categoria appartiene il template che stai usando è fondamentale per poter creare in modo corretto un tema child che funzioni.
Come distinguere un tema moderno da uno classico
So che te lo stai chiedendo e voglio darti un metodo semplice e infallibile per capire se il tema che stai usando è stato sviluppato per l’editor a blocchi oppure si tratta di un tema classico.
Iniziamo con il mettere a confronto la struttura di un tema moderno con quella di un tema classico.
Struttura di un tema moderno
- parts/
- footer.html
- header.html
- patterns/
- example.php
- styles/
- example.json
- templates/
- 404.html
- archive.html
- index.html (obbligatorio)
- singular.html
- README.txt
- functions.php
- screenshot.png
- style.css (obbligatorio)
- theme.json
Struttura di un tema classico
- assets/
- css/
- main.css
- js/
- main.js
- css/
- inc/
- plugins.php
- template-parts/
- header.php
- footer.php
- 404.php
- archive.php
- comments.php
- footer.php
- front-page.php
- functions.php (obbligatorio)
- header.php
- index.php (obbligatorio)
- page.php
- README.txt
- screenshot.png
- search.php
- single.php
- style.css (obbligatorio)
Hai trovato le differenze? Io ti descrivo le due principali.
La prima differenza:
Un tema moderno utilizza la cartella “templates” per contenere i modelli delle varie pagine con estensione .html (es. templates/index.html) mentre un tema classico usa dei file con estensione .php (es. index.php).
La seconda differenza:
I template moderni includono sempre un file “theme.json” che contiene istruzioni sulle funzionalità del tema e sui blocchi supportati, mentre i temi classici non includono questo file specifico.
Un’ultima cosa da sapere è che i temi moderni possono avere un file “functions.php” anche se non è obbligatorio, mentre i temi classici includono sempre questo file che rappresenta il cuore delle funzionalità del template.
Come capire se stai usando un tema moderno in breve?
Se dentro la cartella del tema c’è un file “theme.json”, allora stai usando un tema sviluppato per l’editor a blocchi.
Se invece il file “theme.json” non c’è e noti maggioranza di file con estensione .php, stai sicuramente usando un tema classico.
Tema Parent e Tema Child
Ci stiamo avvicinando al nocciolo della questione!
Approfondiamo un pochino il concetto di tema “Parent” e tema “Child”.
Cos’è un tema Parent?
Quando installi un tema per la prima volta, questo è da considerare un tema “Parent” (o genitore, se preferisci dirlo in italiano).
Se vuoi una definizione più da manuale possiamo dire che: un tema Parent è un tema che non ha dipendenze. Capirai meglio cosa significa continuando a leggere.
Abbiamo già detto che il template gestisce le regole grafiche del sito, giusto?
Pensa quindi a uno scenario pratico, cosa succede quando una di queste regole non è esattamente come vuoi tu: hai bisogno di modificare le istruzioni del tema.
Per farlo puoi cercare la regola nel file style.css, cancellarla e riscriverla, certo… ma tieni a mente che quando aggiornerai il tema questo tipo di modifiche verranno “annullate”.
Modificare i file originali del tema è sconsigliato: chi sviluppa il tema non può prevedere o conservare le modifiche personalizzate che ognuno di noi realizza.
Ed è proprio per evitare questo tipo di problema che esistono i temi Child.
Cos’è un tema Child?
Riprendendo la nozione del tema Parent, possiamo dire che un tema Child è un tema che dipende da un altro.
Il tema Child (o figlio) ti dà infatti la possibilità di sovrascrivere le regole e lo stile del tema parent e anche di espanderne le funzionalità.
Un template Child si crea e si installa in modo indipendente, ma la sua particolarità è il potersi collegare ai file originali del tema genitore, senza modificarli, diventando quindi una sua estensione a tutti gli effetti.
Tutto questo grazie al fatto che WordPress è stato sviluppato tenendo a mente una chiara struttura gerarchica Parent/Child.
A cosa serve un tema Child?
Come ti dicevo, un tema Child ha come scopo principale quello di mantenere intatto il codice del tema Parent e allo stesso tempo modificarne le regole oppure aggiungere funzionalità specifiche.
In questo modo tutte le regole di base del tema Parent vengono ereditate dal tema Child e inoltre ad ogni aggiornamento del Parent, il Child conserverà tutte le modifiche al suo interno.
Un dettaglio tecnico: di norma la “relazione” tra tema Parent e Child è unilaterale. Il tema Child può attingere ai file del tema Parent, mentre il tema Parent non può attingere al suo Child. Questo significa che il Parent non potrà eliminare o sovrascrivere a sua volta le regole definite nel Child.
Quando serve un tema Child e quando non serve
Magari ti stai chiedendo quali sono alcuni casi reali in cui serve creare un tema Child e perché.
In base alla mia esperienza posso dirti questo.
Serve quando:
- Vuoi sovrascrivere le regole stilistiche del tema Parent in modo corretto senza usare il famoso “Personalizza”
- Devi modificare o correggere le funzionalità esistenti integrate nel tema Parent senza però toccare i file originali
- Devi aggiungere del codice per la compatibilità con plugins che non sono ancora compatibili con il tema Parent
- Vuoi sviluppare un sito ottimizzato al massimo partendo da un solida base che è il tema Parent scelto
Non serve quando:
- Il tema che hai acquistato o scaricato è perfetto così e non richiede nessuna modifica
- Non devi aggiungere o modificare nessuna funzionalità integrata
- Stai realizzando un sito in cui userai solo ed esclusivamente un builder come Elementor o WP Bakery (per esempio)
Come linea guida generale, io consiglio di creare sempre un tema Child.
All’inizio di ogni progetto il tema acquistato o scaricato può apparire perfetto, ma con il tempo può sorgere l’esigenza di effettuare modifiche o aggiustamenti e non c’è cosa peggiore che essere impreparati quando questo succede.
Spesso per fare in fretta si utilizza del codice CSS inserito nel “Personalizza” oppure si installano plugin su plugin, solo per aggiungere poche linee di codice nella <head> o nel <footer>.
Includere lo script di Iubenda nel codice del sito oppure il codice di tracciamento per Google Tag Manager, sono i primi esempi che mi vengono in mente.
Ad ogni modo, il succo del discorso è: usare il “Personalizza” o installare plugin per ogni aggiustamento da fare al sito, porta inevitabilmente nel tempo a subire le conseguenze di un lavoro frettoloso e poco organizzato.
Usare un tema Child per mantenere le modifiche sicure e organizzate è infatti un passo fondamentale per realizzare un progetto web di qualità, sicuro e anche duraturo.
Com’è fatto un tema Child?
Un tema child moderno ha bisogno di un singolo file per funzionare: style.css.
Il file “style.css” va creato e inserito nella cartella del tema child e, al suo interno, ci dovrà essere un blocco di codice specifico chiamato “intestazione” che ne definisce alcuni parametri come:
- Nome del tema Child
- Template Parent collegato
- Nome dello sviluppatore
- …e molto altro ancora
Come si crea un tema Child (manualmente)
Creare un tema Child è molto semplice e richiede poco codice.
Per iniziare, crea una cartella e dalle il nome che vuoi attribuire al tema Child: deve essere tutto minuscolo e senza spazi, se vuoi usare due parole dovrai separarle con un trattino alto.
All’interno della cartella, crea un nuovo file e nominalo come “style.css”.
“style” è il nome del file (tutto minuscolo, mi raccomando!) mentre “css” è l’estensione del file.
Un veloce nota su come modificare l’estensione del file.
Se stai usando Windows, puoi modificare l’estensione del file cliccando con il tasto destro del mouse sul file stesso e poi su “Rinomina”. A quel punto il nome del file diventerà scrivibile e dovrai solo aggiungere .css dopo il nome. Windows ti avviserà con un alert a schermo, ma non preoccuparti, clicca su “OK” ed è fatta.
Su MacOS invece per modificare l’estensione dovrai cliccare con il tasto destro del touchpad sul file e poi su “Ottieni informazioni”. Dalla finestra che si apre potrai modificare l’estensione andando a scrivere .css nel campo “Nome ed estensione”.
Adesso che il file è stato creato e nominato correttamente bisogna scriverci dentro le regole di intestazione.
Il contenuto del file style.css
Puoi aprire il file style.css con un qualsiasi editor di testo, anche Microsoft Word o Fogli Google, ma io ti consiglio di scaricare un editor di codice come Sublime Text o VS Code.
Sublime Text è ottimo se vuoi un programma leggero e affidabile, ma soprattutto se non sei uno sviluppatore o una sviluppatrice e vuoi scrivere codice da subito senza configurare nulla.
Se invece sei uno sviluppatore o una sviluppatrice sono certo che hai già installato e configurato VS Code!
Torniamo subito a all’intestazione del tema Child.
Qui sotto trovi un esempio di codice di intestazione da copiare, incollare nel tuo file style.css e modificare in base alle tue preferenze:
/**
* Theme Name: <Il nome del tuo tema child>
* Template: <Il nome della cartella del tema parent>
*/Copia e incolla il codice nel tuo file style.css, poi modifica i valori come da programma. Nel frattempo io ti do qualche consiglio:
- Le scritte “Theme Name:” e “Template:” devono rimanere così come sono e in inglese. WordPress le userà come parole chiave per leggere le informazioni sul tema Child
- “Theme Name:” deve contenere il nome che vuoi dare al tuo tema Child. Puoi scegliere il nome che preferisci, l’unica regola da rispettare è evitare di dare lo stesso nome del tema Parent o di un altro tema. Quando si realizza un Child per un tema specifico di solito si usa inserire il nome del Parent seguito dalla parola “Child”, ma non è obbligatorio
- “Template:” deve contenere il nome esatto della cartella del tema Parent. Fai attenzione: inserire il nome del tema Parent non funzionerà, devi copiare e incollare il nome della cartella del tema Parent
Qui sotto trovi un esempio reale. Ho creato l’intestazione per il tema Child del tema Parent, Hello Elementor:
/**
* Theme Name: Hello Elementor Child
* Template: hello-elementor
*/Questo è tutto ciò che serve per avere un tema Child funzionante!
Per installarlo su WordPress, carica la cartella dentro “wp-content/themes”, oppure comprimi la cartella in formato .zip per poi installarlo da “Aspetto > Temi > Aggiungi tema > Carica tema” direttamente dal pannello di WordPress.
Un volta installato, potrai attivarlo e iniziare subito a trarne vantaggio.
La procedura che ti ho descritto vale sia per i temi moderni che per i temi classici, quindi non dovrai preoccuparti di distinguere la tipologia di tema in questa fase.
In seguito, quando dovrai sovrascrivere le regole del tema Parent avrai bisogno di aggiungere un file “functions.php” al tuo Child, nel caso si tratti di un tema classico.
Altri modi per creare un tema Child
La procedura che ti ho descritto è quella che seguo io personalmente ogni volta che devo creare un tema Child per me stesso o per un mio cliente.
Esistono però anche altri modi per ottenere un tema Child. Ti descrivo i più comuni:
- Tema Child incluso nel pacchetto acquistato
Alcuni dei template a pagamento più famosi in circolazione forniscono già un tema child nel loro pacchetto di installazione, quindi verifica sempre questa possibilità. Un tema child fornito dallo stesso sviluppatore del tema Parent sarà chiaramente già ottimizzato e predisposto per funzionare al meglio. - Usare un generatore di tema Child online
Questa è una soluzione facile e veloce se non sei una figura tecnica o vuoi comunque risparmiare del tempo prezioso. Online ci sono tanti generatori gratuiti, tutti abbastanza validi. Ti basta cercare su Google “generatore tema child” e cliccare sui primi risultati. - Usare un plugin per generare il tema Child in tempo reale
Questa è la soluzione perfetta se vuoi fare tutto in pochi clic direttamente dal pannello di WordPress. Ti basta installare un plugin, attivarlo e seguire le istruzioni: alla fine ti ritroverai con un tema Child creato e installato automaticamente, pronto da usare.
Ecco un plugin che ti permette di generare il tema Child:
Creare un tema child con ChatGPT
Se nessuno dei metodi che ho elencato finora fa al caso tuo o se semplicemente vuoi fare una prova, puoi anche creare un tema Child usando l’intelligenza artificiale.
Ormai l’intelligenza artificiale ha raggiunto dei buoni livelli di ottimizzazione e dato che la creazione di un tema Child per WordPress è un’operazione molto semplice, difficilmente otterrai del codice non funzionante.
Puoi usare questo prompt per far lavorare ChatGPT al tuo posto:
Forniscimi il codice da includere nel file style.css per creare un tema Child del tema <nome_del_tema>.
Ti basta sostituire <nome_del_tema> con il nome reale del tema Parent e attendere la risposta di ChatGPT.
Se sai già che nome dare al tuo tema Child puoi anche andare oltre e usare un prompt più specifico:
Forniscimi il codice da includere nel file style.css per creare un tema Child chiamato <nome_tema_child> per il tema <nome_del_tema>.
In questo caso, ChatGPT ti fornirà il codice di intestazione che potrai copiare e incollare senza dover modificare il parametro “Theme Name:”.
Una raccomandazione: ricontrolla sempre il codice che scrive ChatGPT o fallo controllare a uno sviluppatore. Può infatti succedere che, per eccesso di zelo, l’intelligenza artificiale scriva decine di righe di codice non utile per il tuo caso e dannose in altri casi.
Come puoi vedere dalla schermata ChatGPT ha aggiunto altre righe di codice che non sono necessarie nella maggior parte dei casi più semplici.
Eccoci arrivati alla fine!
Se sei arrivato/a fin qui con dei dubbi oppure vuoi il mio supporto per creare un tema Child per il tuo progetto WordPress, scrivimi una mail e ti risponderò il prima possibile.
Qui sotto trovi dei link per approfondire gli argomenti trattati in questo articolo: