Come creare un Child Theme WordPress

30 Apr

In questa guida vedremo come creare un Child Theme Wordpress utilizzando il tema twentytwelve ( ovviamente la guida può essere applicata senza problemi a qualsiasi altro tema voi vogliate modificare). Creare un Child Theme per WordPress è utile per sovrascrivere le regole di stile CSS e la struttura delle pagine di un tema, lasciandone così intatti i file originali. Andiamo subito nel dettaglio della guida, composta da pochi passaggi.

1. Creare la cartella del Child Theme e inserire i file necessari al funzionamento

Per fare ciò, create una nuova cartella e inserite un file css rinominandolo in style.css

Iniziate a modificare il style.css e aggiungete in cima al documento le seguenti righe di codice necessarie a WordPress per sapere i dati relativi al tema:

/*
Theme Name: Twentytwelve Child
Description: Tema figlio di twentytwelve
Theme URI: https://www.salvatoremezzatesta.com
Author: Salvatore Mezzatesta
Author URI: https://www.salvatoremezzatesta.com
Template: twentytwelve_child
Version: 1.0.0
*/

Ecco spiegato il significato dei vari termini:

• Theme Name: Il nome del child theme
• Description: La descrizione del child theme
• Theme URI: L’ indirizzo al quale si può trovare il child theme
• Author: Il nome dell’ autore del child theme
• Author URI: Indirizzo del sito web dell’ autore
• Template: Nome della cartella del tema genitore
• Version: La versione del child theme

Gli unici campi necessari per far funzionare correttamente il tema figlio sono Theme Name e Template. Il resto delle voci sono facoltative.

2. Inserire l’ import dello style del tema genitore

Per fare ciò non dovrete fare nient’altro che inserire la seguente riga al di sotto di quelle scritte in precedenza:

@import url(../twentytwelve/style.css);

In questo modo verrà inizialmente caricato il file css del tema padre ( in questo caso twentytwelve ) per poi essere sovrascritto con il vostro css personalizzato.

3. Aggiungere il CSS personalizzato

Arrivati a questo punto potrete inserire tutte le regole css in modo tale da sovrascrivere quelle del tema padre. Proviamo a sovrascrivere lo stile del body e salviamo il file:

body { background: #000000; color: #fff; }

4. Caricare il Child Theme nello spazio Hosting

Siamo pronti ad attivare il nostro Child Theme WordPress ma prima dobbiamo caricarlo nello spazio hosting che ospita il sito. Prima di caricare il vostro Child Theme assicuratevi di aver inserito correttamente tutte le voci nel file style.css . La cartella dovrà essere caricata nella directory dei temi temi di WordPress ovvero localhost/wordpress/wp-content/themes/

Dopo aver caricato la cartella nello spazio hosting dovreste avere delle cartelle in questo modo:

5. Attivare il Child Theme in WordPress

A questo punto non ci rimane che attivare il nostro Child Theme. Andiamo nella sezione “Temi” sotto la voce “Aspetto” del pannello di sinistra nel nostro pannello di WordPress. Tra i vari temi dovreste caricare anche il tema figlio creato ovvero twentytwelve_child. Per assicurarci che il tema funzioni correttamente cliccate su “Anteprima” per visualizzare il child theme e vedere le nostre modifiche allo stile. Se tutto funziona correttamente potrete attivare il tema oppure aggiungere tutte le modifiche che volete e aggiornare il file style.css che avete inserito sul vostro spazio hosting con quello aggiornato.

6. Impostare una copertina del tema ( facoltativo )

Come avrete notato, ogni tema di wordpress dispone di una copertina visualizzabile nella finestra di scelta dei temi. Se volete aggiungere anche voi la vostra copertina personalizzata dovrete creare un file con estensione .JPG delle dimensioni 300×250 e chiamarlo screenshot avendo quindi poi un file chiamato “screenshot.jpg”. Dopodichè caricate l’ immagine all’ interno della cartella del Child Theme per visualizzarlo correttamente nella finestra dei temi!