Genesis: costruisci il tuo child theme – seconda parte

Andiamo a creare il nostro child theme per il framework Genesis partendo da zero mantenendo per ora il look base Genesis ed includiamo il supporto per HTML5 un widget per il footer, la possibilità di personalizzare lo sfondo ed abilitiamo le impostazioni viewport per il design responsive del tema.

Installare GENESIS Framework

Per prima cosa abbiamo bisogno di scaricare da Studiopress Genesis e caricarlo nel nostro sito WordPress come fosse un tema, quindi da Aspetto -> Temi -> Aggiungi Nuovo e poi cliccando su “carica tema”.
Ma dopo averlo caricato non è necessario attivarlo, sarà il nostro child theme ad essere attivato e vedremo più avanti come.

Creare il Child Theme

Ora andiamo a creare il child theme di Genesis come si crea qualsiasi altro child theme per WordPress: creiamo una sottodirectory all’interno della directory themes di WordPress (wp-content/themes/) ed andiamo a chiamarla “genesischild” oppure con il nome che più vi piace per definire il vostro tema.
Creiamo per prima cosa il file style.css all’interno di questa directory con il contenuto seguente:

Theme Name – E’ il nome del child theme, ovviamente da personalizzare a piacimento. Theme URI – E’ il collegamento dove questo child theme può essere scaricato. Description – Qui si può inserire una breve descrizione del tema e tutte le caratteristiche per le quali è stato creato. Author – Inserire qui il nome dell’autore o della società che ha sviluppato il tema. Author URI – E’ il collegamento al sito di chi ha sviluppato il tema. Version – Dove si può specificare la versione del tema per tenerlo aggiornato. Tags – Qui si possono specificare certe caratteristiche del tema per individuarlo o cercarlo velocemente Template – Indica che il tema è un child theme e richiede la versione principale del framework Genesis per funzionare correttamente. Template Version – E’ la versione minima di Genesis Framework richiesta per il corretto funzionamento. License – Per specificare il tipo di licenza per il rilascio del tema. License URI – Il collegamento al sito delle specifiche della licenza.

Poi l’unica riga in più che abbiamo dopo le impostazioni di base di WordPress è:
@import url('../genesis/style.css');

che va ad importare le impostazioni di base di stile fornite dal framework Genesis.

Dopo aver fatto queste semplici operazioni si potrà attivare il nuovo child theme dal backend di WordPress in Aspetto > Temi.

Come si può vedere, ovviamente, non compare una immagine per il tema. Questa è una operazione opzionale che possiamo fare anche in un secondo tempo, basta semplicemente crearsi una propria immagine, nominarla  screenshot.png  e caricarla nella directory del child theme che abbiamo creato. Il formato del file consigliato per WordPress è PNG, ma sono estensioni valide anche JPG, JPEG e GIF. La grandezza dell’immagine raccomandata è di 1200px in larghezza e 900px in altezza.

In pratica ora, attivando il child theme, potreste iniziare a lavorare solo che l’aspetto del Vs. sito non sarà quello desiderato dato che il nuovo child theme ancora non ha delle impostazioni di base e non ha praticamente istruzioni per il suo funzionamento.

Differenze tra il tema principale ed il tema child

 

[one-half-first] Genesis Framework Principale

[/one-half-first]
[one-half] Child Theme

[/one-half]

[clearfix]

Genesis di default non viene eseguito come HTML5 e non visualizza lo stesso schema strutturale con le larghezze di pagina pixel anche utilizzando lo stesso CSS del genitore, questo è dovuto al fatto che è necessario abilitare queste funzionalità nel child theme.
C’è anche da dire che noi abbiamo “importato” lo schema base CSS del framework con questa istruzione:
@import url('../genesis/style.css');
ma facendo in questo modo siamo legati a ciò ed al fatto che se cambiasse qualcosa quando il framework viene aggiornato rispetto allo schema base CSS, verrebbe cambiato anche nel nostro child theme.
Ma noi vogliamo che il child theme abbia la nostra struttura, quella che abbiamo ideato e che abbiamo in mente, quindi è opportuno che togliamo questa istruzione e creiamo appositamente le nostre istruzioni CSS.
Per adesso ci accontentiamo di copiare lo stile di base di genesis che poi andremo a modificare, per questo facciamo un copia/incolla dal tema principale (wp-content/themes/genesis/style.css) e copiamo dalla riga:
/* Table of Contents
fino alla fine del file, incollando tutto nel file style.css del nostro child theme.

 

[one-half-first]

<- Torna alla prima parte

[/one-half-first]
[one-half]

Vai alla terza parte ->

[/one-half]

Lascia un commento

it Italian
X