Inizia lo Sviluppo Genesis con questi Essenziali Strumenti

Ebbene si, non è un segreto: recentemente abbiamo fatto un passo molto importante, abbiamo acquistato la Pro Plus di Genesis e siamo incredibilmente soddisfatti per questa scelta. Sia per la sua semplicità d'uso che per la sua elasticità nello sviluppo!

Contenuti Extra

Alla Scoperta di Genesis

Inizia a conoscere questo potente framework per velocizzare il tuo lavoro e accrescere la qualità dei temi che rilasci per i tuoi clienti. In questa serie ci muoveremo per scoprire il ragionamento e le funzionalità di questa soluzione!

  1. Perché Dovresti prendere in Considerazione Genesis
  2. Crea un Child Theme e Scopri come ti sarà Utile
  3. Inizia lo Sviluppo Genesis con questi Essenziali Strumenti

Con Genesis è possibile sviluppare dei siti ad una velocità incredibile e con questo articolo voglio introdurti alcuni strumenti che sicuramente aiuteranno il tuo sviluppo e che ti permetteranno di migliorare rapidamente le sue personalizzazioni.

Se poi desideri conoscere nel dettaglio questa piattaforma, collegati su skillsAndMore perché a breve apparirà un corso interamente dedicato a Genesis.

C’è una cosa che desidero fare prima di parlarti di come sviluppare al meglio con questo framework, voglio condividere un piccolo segreto…

Benché creda moltissimo all’utilità di questo articolo voglio anche essere onesto con te e confessarti che non sto scrivendo questo articolo soltanto per questo motivo. Lo sto facendo perché vorrei un po’ emulare il mio collega Eugenio che con il suo ultimo articolo ha riscosso moltissimo successo.

Quindi se troverai questo articolo utile… Mi raccomando, condividi a più nn posso 😀

Alla Scoperta di questo Genesis…

Passiamo subito alle cose serie e facciamo qualche dichiarazione veloce. Abbiamo già parlato del fatto che la potenza di questo framework risiede all’interno dei suoi child theme. Se, come noi, hai acquistato un piano Pro Plus, avrai anche a disposizione più di 50 child theme facilmente personalizzabili.

Ma in fin dei conti siamo sviluppatori e ci piace fare le nostre creazioni. In questo non c’è assolutamente niente di male e ti stimo per la tua scelta, quello che sto cercando di farti capire è che è possibile lavorare ancor più velocemente se usiamo gli strumenti giusti.

A differenza di quanto ti mostrerò in questo articolo, questo framework può essere personalizzato lato codice in modi incredibili! Io, Eugenio e Daniele ne siamo diretti testimoni (così come migliaia di sviluppatori sparsi per il globo); al tempo stesso desideriamo un jump start nel nostro sviluppo…

Per questo, se vuoi conoscere da vicino Genesis ti consiglio di scaricare il loro Sample Child Theme gratuito (ovviamente ti servirà il tema parente installato per farlo funzionare) ed iniziare a sviluppare con quello.

Personalmente ho preferito spostare la mia attenzione immediatamente su un child theme più orientato allo sviluppo, dato che mi permette di usare SASS e molte altre comodità di Grunt; ma ti parlerò di queste cose successivamente, per gli scopi di questo articolo il Sample Child Theme è più che sufficiente.

Se hai letto l’articolo sulla struttura gerarchica dei file di un tema WordPress, dovresti sapere che se crei un file dal nome single.php la struttura che creerai al suo interno verrà usata per mostrare le pagine front end degli articoli e delle Pagine di questo CMS. Ebbene, proviamo a fare lo stesso esercizio e inseriamo all’interno del file quanto segue:

Ebbene si… Una sola funzione: genesis(). Questo è tutto quello che serve per poter mostrare una di queste pagine; ma sono sicuro che adesso ti è sorta una domanda: come faccio a modificare la pagine?

Non devi assolutamente stupirti perché questo framework usa al 100% la WordPress Way permettendoci di modificare la struttura base facendo leva sul concetto di Hook; ovvero la possibilità di agganciarsi ad un determinato “evento” che avviene in quella specifica parte del nostro CMS.

Quindi, se voglio spostare la sezione delle info sopra al posto che sotto del titolo, lo posso fare grazie al seguente codice:

Tutto quello che ho dovuto fare è stato rimuovere le info dalla propria funzione sfruttando un Hook genesis_entry_header dalla priorità di 12 e riaggiungerlo ad una priorità inferiore e quindi più importante.

Molto probabilmente adesso è nata in te una seconda domanda: ma come hai fatto a conoscere l’Hook giusto?

Ebbene i motivi sono due:

  1. una volta acquistato Genesis puoi accedere ad un area dedicata agli sviluppatori incredibilmente ricca di informazioni utili;
  2. e poi perché sto utilizzando il primo strumento che voglio presentarti in questo articolo 😉

Visual Hook Guide

Come dicevo prima, Genesis rispecchia completamente la logica WordPress: se devi modificare qualcosa, esiste un Hook!

Questo è un concetto da tenere sempre bene a mente, ma mettersi a leggere paginate di documentazione non è la cosa più immediata e non ci permette di vedere dal vivo quando un determinato Hook viene richiamato o eseguito. Ecco quindi che un plugin come Visual Hook Guide può tornarci veramente utile!

Visual Hook Guide

Una volta installato questo plugin sarai in grado di attivare e disattivare la visualizzazione (separata) degli Action e Filter Hook. Questa è una funzionalità comodissima anche se non si conosce da vicino il framework perché in fin dei conti stiamo vedendo quando e cosa accade all’interno delle nostre pagine.

Sono sicuro che apprezzerai moltissimo questa funzionalità e non vedo l’ora di sapere che ne pensi all’interno dei commenti!

Se vuoi un consiglio spassionato, quando trovi l’hook sul quale devi agire, cercalo sempre all’interno della cartella principale di Genesis. In questo modo potrai scoprire qual è stata la priorità utilizzata per richiamare quel dato elemento e sfruttarla a tuo vantaggio andando a conoscere anche tutti gli altri elementi 😉

Genesis Simple Hook

Si parla ancora di hook ma solo perché sono incredibilmente utili! Se hai provato altri framework WordPress avrai notato che tendenzialmente vengono offerte fin troppe personalizzazioni e dei pannelli di configurazioni da punta-e-clicca molto lontana dalla logica di un vero sviluppatore.

Ma, se per qualche motivo, non hai voglia di usare un editor di testo o vuoi un metodo più diretto per agganciarti ai vari Hook sono convinto che troverai questo plugin veramente comodo.

Genesis Simple Hook

Se non puoi utilizzare il tuo editor preferito o semplicemente non hai tempo per scrivere tutto il codice, grazie a questo pannello aggiuntivo nel backend sarai in grado di accedere velocemente all’Hook che desideri modificare e aggiungere o rimuovere tutto quello che desideri.

Il plugin permette di inserire codice HTML, shortcode e addirittura intere funzioni PHP che possono essere lanciate nel momento del bisogno, ovvero quello dell’esecuzione di un Hook selezionato. Dall’immagine si intuisce anche che grazie alle Impostazioni schermata è possibile mantenere attivi solo quelli che andremo a modificare in modo da semplificarci la navigazione.

Mi sembra abbastanza chiaro quanto la collaborazione tra questo e il precedente plugin possa essere utile per veloci modifiche.

Genesis Taxonomy Images

Hai mai avuto un cliente, magari proprietario di un eCommerce, che ti ha chiesto di poter inserire delle immagini all’interno delle proprie categorie?

Oppure ti è stato chiesto di aggiungere questa funzionalità e tu non hai il tempo di metterti a studiare come sia possibile:

  • agganciarsi al media uploader di WordPress;
  • salvare un’immagine caricata e collegarla alla tassonomia selezionata;
  • richiamarla all’interno della pagina archivio.

Ebbene, questi sono gli step minimi che ti richiederebbe una funzionalità del genere. Se sei serio riguardo allo sviluppo WordPress dovresti sapere che queste funzionalità si devono aggiungere attraverso un plugin e che applicare tutte queste modifiche all’interno del file functions.php sarebbe un grosso errore.

Ma purtroppo non sempre si ha il tempo di fare tutte queste cose.

Sarebbe bello avere il tempo di studiare tutte queste cose; e infatti un sito come wpAndMore mira proprio a fornirti tutte le conoscenze in grado di farti diventare un vero sviluppatore WordPress ma talvolta capita accettare dei progetti che hanno dei bassi budget e non siamo in grado di coprire un tale investimento di tempo e conoscenze.

Ecco perché, proprio come succede in questo articolo o nel precedente scritto da Eugenio, abbiamo iniziato a parlare di plugin che ti possono dare una mano. Plugin scritti bene non appesantiscono WordPress e quello che ti sto presentando aggiunge proprio una funzionalità molto interessante.

genesis-taxonomy-images

Come puoi notare tu stesso, grazie a questo plugin potrai fare in modo di collegare delle immagini alle tassionomie che tu o il tuo cliente andrete a creare all’interno della nuova installazione WordPress, all’interno del suo nuovo portale.

La possibilità di aggiungere le immagini all’interno delle pagine archivio di una tassonomia è veramente interessante perché ti permetterà di creare un sito più accattivante per il visitatore e tu sarai in grado di salvare tempo prezioso da spendere su un altro progetto.

Genesis Responsive Slider

Gli slider sono stata la passione del web per diverso tempo. Onestamente ad oggi sono contento che sempre meno siti li utilizzino perché, al posto di permettere la presentazione di un numero maggiore di informazioni, questi elementi distraggono il nostro visitatore da CTA che potrebbero invece portare a qualche considerazione.

Ma talvolta è difficile cambiare la mentalità del proprio cliente; è un compito veramente arduo…

Per questo motivo, nonostante i tuoi sforzi, magari ti trovi costretto a dover inserire uno slider. Ebbene con questo plugin potrai fare proprio questo e sarai in grado di inserire non soltanto uno slider, bensì uno slider che sarà in grado di adattarsi alle diverse dimensioni dei dispositivi che verranno a visitare il tuo sito web; uno slider responsive!

Ebbene si con la stessa comodità che ti permette di gestire le widget in homepage di un qualsiasi tema Genesis potrai inserire una lista di immagini che si scambieranno posto all’interno delle tue pagine comodamente. Ovviamente questo plugin non permette di avere molteplici slider ma ci offre un gran numero di operazioni che ci aiutano a personalizzarne il comportamento.

Come puoi notare tu stesso dalle schermate che ti ho riportato, come spesso accade il plugin dedicato a Genesis ci offre la sua completa configurazione all’interno di un singolo pannello e ci permette di avere un posto unico dove delineare il comportamento come la velocità e le dimensioni massime del nostro slider, ma possiamo anche andare a selezionare effetti più contenutistici che ci permettono di selezionare con estrema precisione le Pagine o Articoli che vogliamo mostrare all’interno dello slider.

Come c’è da aspettarsi, questo plugin funziona grazie alle immagini in evidenza che possiamo inserire grazie a WordPress e che tutti i child theme di Genesis ci permettono di impostare; quindi “zero sforzo” anche per lo sviluppatore che è in noi 😀

impostazioni_widget

Una volta configurato per bene il nostro slider all’interno delle impostazioni dedicate (che si trovano all’interno della voce Genesis che appare usando i suoi temi), tutto quello che ci resta da fare è trascinare la widget dedicata nella posizione che riteniamo migliore ed il gioco è fatto.

Ti ricordo che Genesis sfrutta in maniera incredibilmente intelligente il sistema di gestione widget che WordPress ci mette a disposizione e che recentemente è stato potenziato grazie alla sua inclusione nel Customizer, e molti dei suoi child theme permettono di aprire delle aree personalizzate proprio grazie a questi elementi. Cosa sicuramente utile visto che lo slider viene configurato nella pagina dedicata 😉

Genesis Simple Sidebars

Forse questo è il plugin visto di male da tutti noi sviluppatori ma con le sue 50k+ di installazioni attive ha scatenato la mia curiosità e mi ha spinto ad analizzare questo plugin. In fin dei conti sappiamo benissimo come creare una sidebar con area Widget giusto?

Se proprio siamo sfaticati, basta andare su GenerateWP per farci generare il codice giusto e fare un veloce copia/incolla all’interno del nostro functions.php o del plugin che abbiamo creato per aggiungere funzionalità al tema ed il gioco è fatto 😀 Ma che mi rispondi se ti dico che con questo plugin è possibile aggiungere queste aree widget ready senza neanche dover toccare una riga di codice.

Sono d’accordo con te, quest’operazione è talmente semplice che da bravi sviluppatori dovremmo farla soltanto da codice ma ci sono un paio di situazioni che vorrei mettere in luce per comprendere quando questo plugin potrebbe tornarci utile:

  • come già detto più volte in questo articolo, il progetto non ha budget necessario alla creazione di aree personalizzate e non possiamo dedicargli troppo tempo,
  • abbiamo un cliente che si muove discretamente bene con WordPress e decidiamo di offrirgli questa posibilità.

In poche parole quello che stiamo facendo è comunque offrire delle potenzialità aggiuntive al nostro cliente che inevitabilmente arriverà a conoscere sempre più da vicino WordPress e al tempo stesso avrai scoperto un modo innovativo per cambiare le widget presenti in una determinata pagina!

Ebbene sì perché anche se questo plugin permette di creare nuove aree widget ready sappiamo tutti che per poterle integrare nel tema abbiamo bisogno di aprire i file dedicati ed inserire il codice necessario alla loro esecuzione… Ebbene con questo plugin tutto questo è un semplice ricordo. In poche parole, quando ci troviamo a modificare un Articolo o Pagina questo plugin scannerizzerà le aree widget che quella pagina andrà a mostrare e ci fornirà un comodo drop-down che ci consente di includere le widget che abbiamo selezionato!

Ecco che torna utile studiare le soluzioni (e il codice) proposte da alcuni sviluppatori per scoprire nuovi modi per utilizzare la piattaforma sulla quale lavoriamo quotidianamente 😉

Genesis Translations

Dato che stai leggendo un articolo in Italiano presumo che molti dei tuoi clienti parlino la stessa lingua e ad essere onesto con te Genesis out-of-the-box non è che parli così bene con noi, anzi non lo fa affatto! Tutte le opzioni, pagine, testi dei link ecc… Sono scritte soltanto in inglese e ti assicuro che dover tradurre i nostri temi ogni volta è qualcosa di veramente noioso!

Per questo motivo, quando mi trovo a sviluppare dei siti che necessitano di parlare questa lingua, mi trovo veramente molto bene ad installare il plugin Genesis Translation…

Praticamente fa tutto lui e io sono libero di tornare al mio lavoro!

Se anche tu vuoi beneficiare di questo plugin non devi far altro che installarlo all’interno della tua piattaforma e praticamente dimenticartene perché non ci sono impostazioni da modificare. Il plugin è in grado di rilevare la lingua utilizzata e tradurrà in automatico le stringhe che compongono il tema, tutto qua. Estremamente semplice e veloce 😉

Se poi vuoi ottimizzare al massimo le prestazioni del sito, una volta che il cliente sarà arrivato al versamento finale, potrai rimuovere questo plugin e utilizzare direttamente i file .po e .mo che dovrai crearti tu stesso…

Genesis Connect for WooCommerce

Sono sicuro che hai sentito anche tu la notizia degli ultimi giorni che annunciava che Automattic si è comprata WooCommerce… Non sono qua per dirti che sia tutta una bufala, anzi per fortuna questo accordo è andato a buon fine perché noi sviluppiamo moltissimi eCommerce grazie a questo potente plugin. Anzi a breve pubblicheremo un nuovo corso WordPress Passo Passo che sarà interamente dedicato alle sue funzionalità 😀

Ma veniamo al motivo per il quale siamo qui, qual’è il plugin che ti consiglio e che permetterà di mettere in contatto il framework Genesis con il plugin di eCommerce di Woo Themes?

Ebbene proprio un plugin che si chiama Genesis Connect for WooCommerce 🙂

Se ti è mai capitato di realizzare un tema per WooCommerce ormai dovresti sapere che questo plugin porta con se una cartella templates/ all’interno della quale vengono salvati tutti i file che danno struttura alle pagine dell’eCommerce e se hai bisogno di personalizzare il loro comportamento di default dovrai creare una cartella woocommerce all’interno del tuo tema e inserire al suo interno un file con lo stesso nome di quello del plugin che vuoi modificare.

Ad esempio, diciamo che hai bisogno di modificare la pagina del singolo prodotto. Se controlli all’interno della cartella del plugin WooCommerce troverai questo file: templates/single-product.php. Ovviamente lui è il file incaricato di creare questo tipo di pagine!

Trovato il file non devi far altro che copiarlo ed inserirlo in woocommerce/single-product.php e modificare la struttura della pagina come meglio desideri; mi raccomando, la cartella woocommerce/ deve essere creata nella root del tuo tema 😉

Conclusioni

Che ne dici di questa piccola lista di plugin? Potrebbero esserti d’aiuto?

Prima di passare alle conclusioni voglio fare il testardo e tornare ancora una volta ad analizzare il motivo per il quale mi sono trovato a parlare di come l’installazione di determinati plugin possa aiutare la vita di uno sviluppatore. E’ perché non so come si sviluppa in Genesis? Assolutamente no! Questo framework rispetta al 100% la WordPress Way ed è un piacere sviluppare dei siti web partendo dalle sue potenzialità.

E’ forse perché sono sfaticato? Beh in questo contesto sono costretto a risponderti si e no

I motivi li abbiamo già detti, semplicemente ci sono alcuni clienti che ci chiedono la luna ma che non hanno neanche il budget per comprare un telescopio! Allo stesso tempo dato che siamo dei bravi sviluppatori dobbiamo assicurarci di consegnare comunque un ottimo prodotto e questo lo possiamo fare soltanto se velocizziamo il nostro lavoro partendo da basi solide come quelle di Genesis!

Nel prossimo futuro usciranno molti altri articoli che parleranno di come questo framework potrà essere utile e su skillsAndMore stiamo anche preparando un corso dedicato alla creazione di child theme e tutto questo perché al momento in cui ti scrivo non avevo mai trovato uno strumento così potente come Genesis!

Sono sicuro che con questi plugin sarai in grado di velocizzare ulteriormente i siti che stai creando ma se dal tuo punto di vista mi sono sbagliato in qualcosa oppure non ho trattato il plugin che ritieni fondamentale ti chiedo gentilmente di farcelo sapere all’interno dei commenti, sono sicuro che anche gli altri lettori saranno in grado di apprezzare i tuoi suggerimenti!

Se poi conosci qualcuno che usa Genesis perché non condividi questo articolo con lui? Ricevere un grazie per aver condiviso qualcosa di utile porta un sacco di benessere 😉

Lascia il tuo Pensiero