Come creare un tema child WordPress
Immagina questo scenario: c’è un tema WordPress che ti piace molto ed è quasi perfetto, ma ci sono alcune cose che vuoi cambiare. Sfortunatamente, le opzioni integrate del tema non ti permettono di fare le modifiche che desideri. Potresti modificare il codice del tema direttamente, ma potrebbe causare un problema perché se aggiorni il tema a una versione più recente, tutte le tue modifiche andranno perse. Potresti usare un plugin CSS personalizzato, ma questo non ti permetterà di apportare modifiche ad altro codice, come il template del tema o JavaScript.
Cosa fare, quindi? Come puoi creare personalizzazioni che le opzioni del tema e un plugin CSS personalizzato non possono gestire? La semplice risposta è creare un tema child di WordPress.
Cos’è un tema child WordPress?
Il codex di WordPress fornisce la seguente descrizione per un tema child:
Un tema figlio in WordPress è un tema che eredita le funzionalità di un altro tema, denominato tema genitore e che vi permette di modificare o di aggiungere funzionalità del tema genitore. Un tema Child è il sistema più semplice e sicuro per modificare un tema esistente sia che vogliate apportare delle semplici modifiche sia che vogliate fare dei cambiamenti significativi. Anziché modificare direttamente i file del tema, potete creare un tema Child. Un tema Child eredita tutti i template (modelli) e le funzionalità del suo tema genitore, ma permette di modificare il tema genitore poiché il codice del tema Child sovrascrive quello del tema genitore.
In altre parole, un tema child di WordPress eredita tutto dal “tema padre”, cioè un altro tema che è installato (ma non attivato) sul tuo sito web o blog. Le modifiche dal tema figlio sono applicate al tema genitore. Quando il tema genitore viene aggiornato, il tema figlio eredita quelle modifiche, ma le modifiche del tema figlio non vengono perse.
Come creare un tema child di WordPress
In questo articolo, scopriremo i passaggi chiave per creare un buon un tema child WordPress. Ti indicheremo anche la giusta direzione per ulteriori letture approfondite.
- Sappi quando è il caso di utilizzare un tema child
- Scegli un buon tema genitore
- Imposta un ambiente di sviluppo
- Crea la tua nuova cartella del tema
- Crea il file style.css
- Creare il file functions.php
- Aggiungi il CSS personalizzato
- Usa ganci e filtri
- Sovrascrivi i template
- Testa le modifiche
- Impacchetta il tuo tema
C’è molto da esaminare. Iniziamo subito!
1. Sappi quando è il caso di usare un tema child
I temi child sono fantasticamente convenienti, ma non sono sempre la soluzione giusta. Se stai solo cercando di apportare alcune semplici modifiche visive a un tema, un’opzione migliore potrebbe essere quella di applicare alcuni CSS personalizzati o utilizzare un plugin per creare pagine.
Detto questo, ci sono alcuni scenari in cui i temi child sono utili:
Siti web personalizzati per i clienti
Se stai costruendo un sito web per un cliente, è probabile che voglia un certo livello di personalizzazione al di là di quello che si può fare solo attraverso le opzioni del tema e i plugin. Prova ad usare un tema padre standard per tutti i tuoi siti, poi crea un tema child per ogni cliente. In questo modo, puoi lasciare che il tema padre faccia il lavoro pesante e concentrare il tuo tempo e le tue risorse sulla personalizzazione del tema figlio per soddisfare le esigenze del tuo cliente.
Aggiungere PHP o JavaScript personalizzato
Se stai scrivendo codice in PHP o JavaScript che dipende dal tema (ad esempio, cambiare il tema renderebbe il codice irrilevante/inutile), allora quel codice dovrebbe vivere nel tema child.
Rilasciare variazioni di un tema esistente
È simile al primo scenario, eccetto che invece di creare temi child personalizzati per i clienti, stai creando temi figli come prodotti indipendenti. I temi di StudioPress sono un grande esempio di questo approccio. La loro intera libreria di temi è fatta di temi figli costruiti sopra il tema genitore Genesis.
Quindi, come si sceglie un buon tema genitore? Ottima domanda!
2. Scegliere un buon tema genitore
Quando sai di voler creare un tema child di WordPress, il passo successivo è quello di scegliere un buon tema genitore su cui costruirlo. In generale, dovresti cercare quanto segue:
Design neutro
Un buon tema genitore è come una tela bianca. È inopinabile, con un’estetica pulita e minimalista su cui si può costruire sopra. Ci sono eccezioni a questo, naturalmente. Lavori con un cliente e hai in mente un tema esistente con lo stile perfetto? Procedi con quello. Lo scopo del design neutro è quello di minimizzare la quantità di modifiche che dovrai fare.
HTML pulito
Apri la sorgente della pagina e guarda il codice HTML. Gli ID degli elementi e le classi sono nominati chiaramente? La struttura della pagina ha senso o è confusa? Questi potrebbero sembrare dettagli poco importanti, ma è molto più facile avere a che fare con un tema genitore che usa un HTML pulito.
Correlato: 10 codici HTML da conoscere
Documentazione e supporto
Il tema è ben documentato sia per gli utenti che per gli sviluppatori? Dal lato dell’utente, cerca la documentazione sulle opzioni del tema e sulla compatibilità dei plugin. Dal lato dello sviluppatore, cerca la documentazione sugli hook e sui filtri (ci torneremo più tardi).
E il supporto? C’è un canale di assistenza dedicato, come email o un sistema di ticketing? Cosa dicono le persone sul livello di supporto? Questo aspetto è particolarmente importante se hai intenzione di usare molto il tema genitore.
Là fuori ci sono temi costruiti appositamente, conosciuti come framework di WordPress. Questi temi sono stati progettati specificamente per l’uso come temi genitori. Alcuni esempi di framework popolari includono Genesis, Hybrid Core e GeneratePress (il mio preferito).
Vale la pena notare che questi framework funzionano bene anche come temi autonomi, tra l’altro.
3. Imposta il tuo ambiente di sviluppo
A questo punto dovresti aver scelto un tema genitore ed essere pronto per iniziare a lavorare sul tema child. Ma prima di iniziare, è necessario impostare un ambiente di sviluppo – in altre parole, il sito WordPress dove testare e modificare il tema child.
Se hai intenzione di applicare il tema figlio a un sito web esistente, dovresti fare il tuo sviluppo su una copia del sito. In questo modo vedrai esattamente come tutto apparirà una volta che imposterai le modifiche live sul sito.
Se stai usando un provider di hosting WordPress gestito come Hosting WordPress di GoDaddy, puoi usare il tuo sito di staging one-click come ambiente di sviluppo. Se utilizzi qualcosa come cPanel o VPS per l’hosting, puoi impostare un’installazione separata di WordPress e utilizzare GoDaddy Pro per clonare (copiare) il sito esistente sulla nuova installazione.
Se non stai applicando il tema child a un sito esistente, o se preferisci costruire da zero, puoi creare un ambiente di sviluppo WordPress locale sul tuo computer utilizzando uno strumento come MAMP o DesktopServer di ServerPress.
Quando il tuo ambiente di sviluppo è pronto a partire, è il momento di creare il tema.
4. Crea la nuova cartella del tema
Prima di tutto: installa il tema genitore su cui vuoi costruire il tema child. Poi, utilizzando un client FTP, connettiti al tuo ambiente di sviluppo e naviga fino a dove si trovano i tuoi file WordPress.
Stai cercando la seguente cartella:
/wp-content/themes/
È lì che puoi trovare tutti i tuoi temi WordPress installati. Ogni tema ha una propria cartella (directory) che contiene tutti i file del tema. Aggiungerai una nuova cartella all’elenco, che conterrà il tuo tema child. Quindi ti ritroverai con qualcosa di simile a questo:
/wp-content/themes/nome-del-tuo-tema-child/
All’interno di quella cartella, creerai due nuovi file:
style.css functions.php
Entrambi questi file hanno uno scopo specifico. Il file style.css è usato per fornire a WordPress informazioni sul tema, come il nome, l’autore, i tag e l’ID del tema genitore. Il file functions.php è usato per estrarre i file dal tema genitore, in più possiamo usarlo per applicare nuovo codice a ganci e filtri all’interno del tema genitore (tra poco diremo di più su questo).
5. Crea il file style.css
Il primo passo è aggiungere l’intestazione del tema al foglio di stile. Ecco l’esempio di intestazione fornito nel codex di WordPress:
/* Theme name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http:/esempio.com Template: twentyfifteen Version: 1.0.0 Licence: GNU General Public License v2 or later Licence URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text domain: twenty-fifteen-child */
Il Template name: corrisponde al nome della cartella (directory) del tema genitore su cui si sta costruendo. Il Text Domain è il nome unico per il tuo tema figlio di WordPress.
6. Crea il file functions.php
Dopo che il tuo file style.css è impostato e salvato, hai bisogno di mettere in coda sia lo style.css del tema padre che lo style.css del tema figlio nel tuo tema figlio. Apri il tuo file functions.php e crea una nuova funzione per richiamare i fogli di stile.
Ancora una volta, prendiamo l’esempio dal Codex:
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen Theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
In questo modo stai facendo alcune cose:
- Stai impostando il nome del file style.css del tema genitore
- Stai mettendo in coda lo style.css del tema genitore
- Stai mettendo in coda lo style.css del tema child
Salva il tuo file functions.php, poi vai su Aspetto > Temi nella tua area di amministrazione di WordPress. Ora dovresti essere in grado di attivare il tuo nuovo tema child. Se tutto funziona come previsto, congratulazioni! Ora hai un tema child di WordPress funzionante.
Il prossimo passo è quello di iniziare ad applicare le tue personalizzazioni.
7. Aggiungi il CSS personalizzato
Puoi iniziare ad applicare nuove regole CSS nel file style.css del tuo tema figlio. Controlla il codice sorgente del tuo tema genitore per determinare quali ID e classi hai bisogno di targettizzare.
Hai bisogno di aiuto con i CSS? Controlla queste risorse:
- Introduzione ai CSS dal Mozilla Developer Network
- Guida CSS di base
Una volta che hai una buona base su questo argomento, è il momento di guardare gli hooks e i filtri.
8. Usare ganci e filtri
Puoi iniziare ad aggiungere funzioni personalizzate a functions.php per inserire blocchi di codice personalizzati in aree specifiche del tuo tema principale. Queste “aree specifiche” sono chiamate ganci (hook), e i ganci disponibili dipendono dal tema che si sta utilizzando.
A differenza degli hook, i filtri funzionano elaborando e modificando i dati caricati da WordPress. Anche in questo caso, i filtri disponibili dipendono dal tema che si sta utilizzando.
Vuoi saperne di più sugli hook e i filtri di WordPress?
Guida per principianti alle azioni e ai filtri (Tuts+)
Azioni e filtri: gli hook di WordPress
Ora, diamo un’occhiata agli override dei template per il tuo tema child di WordPress.
9. Sovrascrivere i template
E se si vuole fare di più di quello che permettono gli hook e i filtri? Cosa succede se si vogliono fare cambiamenti drastici ai singoli file di template? È qui che entrano in gioco gli override dei template. All’interno della tua cartella del tema child di WordPress, puoi sovrascrivere qualsiasi file di template usando lo stesso nome di quelli che si trovano nella cartella del tema genitore.
Quindi prendiamo ad esempio il file single.php di un tema genitore:
/wp-content/themes/parent-theme/single.php
Se vuoi sovrascrivere quel file del template, anche il tuo tema child dovrebbe contenere un single.php:
/wp-content/themes/child-theme/single.php
Capire la gerarchia dei template di WordPress è utile. In alcuni casi, potresti anche non aver bisogno di sovrascrivere il template del tema genitore. Invece, potresti riuscire a finire il lavoro integrando i template esistenti con altri nuovi. Se vuoi saperne di più, fai riferimento al Codex di WordPress per ulteriori letture su come lavorare con i file template in un tema child.
10. Testa le tue modifiche
Anche se stai personalizzando un tema esistente, dovresti comunque eseguire un controllo della qualità sul tuo lavoro.
Se stai sviluppando il tuo tema child su una nuova installazione di WordPress, il Theme Unit Test ufficiale o il WP Test non ufficiale ti saranno utili. L’importazione di questi test utilizzando WordPress Importer caricherà il loro contenuto di prova nel tuo sito come post, pagine, categorie e tag.
Il plugin Developer ti sarà utile anche nel tuo ambiente di sviluppo. Dopo aver attivato il plugin, puoi scegliere il tipo di sviluppo che stai facendo. Seleziona “sviluppo del tema”, e il plugin vi consiglierà ulteriori plugin da utilizzare.
Se non hai accesso a un mucchio di dispositivi, un servizio come BrowserStack o Browser Sandbox (solo per Windows) emulerà altri dispositivi all’interno del tuo browser. Gli strumenti per sviluppatori presenti all’interno del tuo browser (Chrome/Edge/Firefox/Safari) offrono una portata limitata di simulazione del dispositivo, soprattutto per testare la responsività.
Hai quasi finito il lavoro col tuo tema child di WordPress. Ora, è il momento di confezionarlo.
11. Impacchetta il tuo tema
Così hai creato il tuo tema figlio e l’hai fatto passare attraverso una serie di test. Congratulazioni! Se stai lavorando su questo tema per un cliente – cioè, il tema non sarà rilasciato per il consumo pubblico – potresti fermarti qui e passare ad altri compiti.
Ma forse vuoi rilasciarlo pubblicamente, cioè come un tema che altre persone possono scaricare e usare. In questo caso, hai ancora un paio di cose da fare.
Assicurati che il tuo tema soddisfi i requisiti del repository
Anche se non hai intenzione di inviare il tuo tema al repository ufficiale di WordPress.org, dovresti comunque rivedere i requisiti di invio. Si tratta di una lista di controllo completa che preparerà il tuo tema per l’uso da parte di altri. Ad esempio, stabilisce i requisiti per la documentazione, la lingua e il supporto alla traduzione, la formattazione del codice, le licenze e molto altro.
Rivedi l’articolo del Codex “Progettare temi per il rilascio pubblico”.
Al di là delle migliori pratiche tecniche, questa guida nel Codex fornisce una serie di raccomandazioni per il successo. Ti guida attraverso l’intero processo, dalla pianificazione iniziale alla promozione del tema.
Metti il tuo codice online per la peer review
La comunità di sviluppatori che si è creata intorno a WordPress è meravigliosamente solidale, quindi una volta che hai fatto tutti i passaggi di cui abbiamo parlato, metti il tuo tema su un repo pubblico (ad esempio, GitHub o BitBucket) in modo che altri possano rivedere, commentare e (in un mondo ideale) fare ulteriori miglioramenti al codice.
Questo è tutto! Spero che questo post ti abbia aiutato a capire come creare un tema child in WordPress.
