Creare un Child Theme per WordPress

Creare un “Child Theme” per WordPress è utile per sovrascrivere le regole di stile CSS ad un tema che state utilizzando lasciando intatto il file originale del tema. Riportando la definizione dal sito di WordPress:

Un “Child Theme” di WordPress è un tema che eredita le funzionalità di un altro tema, chiamato tema principale o genitore, e consente di modificare, o di aggiungere, nuove funzionalità senza intaccare le caratteristiche del tema sorgente. 

In questa guida ci cimenteremo sulla creazione di un “Child Theme” del tema twentytwelve
messo a disposizione da WordPress ( la stessa guida può essere applicata ovviamente senza problemi a qualsiasi altro tema voi vogliate modificare).
Andiamo nel dettaglio:

1. Creare la cartella del tema e inserire i file necessari al funzionamento: Per fare ciò, create una nuova cartella e inserite un file css rinominandolo in style.css cartella-child-theme 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: http://www.salvatoremezzatesta.com  <- Author: Salvatore Mezzatesta Author URI: http://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 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. Prima di proseguire inserendo il vostro css assicuratevi che la parte iniziale del file sia uguale a quella sottostante:

/* Theme Name: Twentytwelve Child Description: Tema figlio di twentytwelve Theme URI: http://www.salvatoremezzatesta.com  <- Author: Salvatore Mezzatesta Author URI: http://salvatoremezzatesta.com Template: twentytwelve_child Version: 1.0.0 */ @import url(../twentytwelve/style.css);

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 tema figlio nello spazio Hosting Siamo pronti ad attivare il nostro tema ma prima dobbiamo caricarlo nello spazio hosting che ospita il sito. Prima di caricare il vostro tema 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:

root_del_sito/wp-content/themes/

Dopo aver caricato la cartella nello spazio hosting dovreste avere delle cartelle in questo modo: cartella-child-theme-hosting 5. Attivare il tema figlio in WordPress A questo punto non ci rimane che attivare il nostro tema. 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 per il tema child ( 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!

Recommended Posts

Leave a Comment