Andiamo a creare il nostro child theme per il framework WordPress 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 WordPress GENESIS Framework
Per prima cosa abbiamo bisogno di scaricare da Studiopress il framework WordPress Genesis e caricarlo nel nostro sito WordPress proprio come fosse un tema qualsiasi, quindi da Aspetto -> Temi -> Aggiungi Nuovo e poi cliccando su “carica tema”.
Ma dopo averlo caricato non è necessario attivarlo, dovremo invece attivare il nostro child theme e vedremo più avanti come.
Creare il Child Theme
Ora andiamo a creare il child theme di WordPress 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 ad esempio “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 WordPress 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 nessuna istruzione riguardante il suo funzionamento.
Differenze tra il tema principale ed il tema child
WordPress 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 di WordPress Genesis.
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 questa cosa ed al fatto che se cambiasse qualcosa quando il framework WordPress Genesis 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 WordPress 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.
