Aggiungi tutti i Controlli che desideri al Theme Customizer

Torniamo nuovamente ad affrontare l'argomento personalizzazione. Tempo fa abbiamo avuto Eugenio che ci ha spiegato molto bene che cosa significa usare un Page Builder e i rischi che possiamo correre nel farlo, oggi scopriamo come personalizzare quello offerto da WordPress.

Infatti in questo articolo non voglio andare a parlare della correttezza o meno nell’utilizzare un Page Builder perché leggendo l’articolo precedente dovrebbe essere semplice capire la nostra linea di pensiero: se sei un professionista non usi i Page Builder!

Semplice e chiaro.

Se vuoi essere chiamato sviluppatore WordPress non ti puoi permettere di utilizzare questi strumenti, non tanto perché devi usare per forza il codice ma sopratutto perché metti il tuo lavoro nelle mani di aziende che un domani potrebbero cambiare idea.

Potresti pensare che utilizzare le Theme Customizer API offerte da WordPress sia la stessa cosa, ma invece è completamente l’opposto perché non andrai a complicarti la vita e neanche quella del cliente; abbiamo soltanto da guadagnare da questo approccio.

desk-office-pen-ruler

All’interno del precedente articolo ti ho spiegato il mio punto di vista, praticamente ritengo che utilizzare la soluzione offerta da WordPress è vincente sia per noi sviluppatori (che continuiamo a seguire la logica della piattaforma) sia che per il nostro utente finale (che potremo limitare le sue azioni per non “rompere” il tema).

Insomma, sicuramente utilizzando le Theme Customizer API non avrai quella completa esperienza di Drag’n Drop che può offrire un qualsiasi Page Builder; ma ti consiglio di continuare a leggere questo articolo perché  sarai in grado di personalizzare l’esperienza del tuo utente offrendogli quello di cui ha bisogno per modificare la pagina stessa.

Ovviamente per poter modificare è necessario offrire degli strumenti che permettono al nostro utente di applicare le proprie modifiche, nello scorso articolo ti ho mostrato come fosse possibile inserire un semplice campo testo per permettere all’utente di modificare la grandezza del carattere del proprio paragrafo; ma ad essere del tutto onesti questo è soltanto una minima personalizzazione che stiamo offrendo.

Non sarebbe bello poter fornire al nostro utente molti altri controlli che gli permetto di gestire svariati aspetti del nostro tema?

Sarebbe bello sì (rispondo io per te 😉 ), ma come hai scoperto nel precedente articolo per offrire queste personalizzazioni bisogna avere i controlli giusti. Ecco che in questo articolo ti parlerò di come sia possibile sfruttare una libreria di controller messa a disposizione da uno sviluppatore WordPress, in questo modo noi non dovremo preoccuparci della loro creazione e velocizzeremo il nostro lavoro!

Prima di passare a conoscere la libreria devo fare una veloce premessa, è vero che un controller fornisce all’utente lo strumento per applicare le sue modifiche ma dalla nostra parte resta sempre la parte di codice necessaria a validare le impostazioni che sono state inviate, ricordalo sempre!

Theme Customizer Custom Controls

Ecco il nome della libreria che ti permetterà di inserire facilmente i tuoi nuovi controlli, al posto di fare un lungo elenco di quelli che puoi inserire (come è stato già fatto dallo stesso autore), quello che voglio fare in questo articolo è valutare l’utilità dei controlli messi a disposizione e utilizzarli all’interno di un vero progetto.

Quello che faremo è analizzare come sia possibile integrare questo codice all’interno dello starter theme Genesis Sample che, come ormai dovresti sapere, è il tema di partenza che Genesis mette a disposizione gratuitamente per iniziare a sviluppare con questo framework.

Ricorda che poter lavorare con Genesis Sample non significa che stai lavorando con Genesis, avrai comunque bisogno di una copia di questo framework installata nel tuo WordPress per poter lavorare con questo child theme.

Se non dovessi avere una copia di Genesis a tua disposizione non c’è nessun problema, il codice che ti mostrerò in questo articolo è compatibile con qualsiasi tema WordPress anche se ti consiglio di rivalutare al più presto questo approccio. Se vuoi uno spunto non devi far altro che leggere uno dei nostri articoli dove parliamo di questo framework e delle motivazioni che ci hanno spinto a sceglierlo.

Ma non abbiamo tanto tempo da perdere, tu vuoi scoprire come utilizzare i controlli che sono stati inseriti nel repository giusto? Ebbene vediamo subito come ti dovrai comportare per implementare questa libreria.

Se non hai voglia di clonare il repository e fare tutti i passaggi che ti porteranno ad installare Genesis Sample, puoi sempre clonare il nostro repository e vedere attraverso i singoli commit le operazioni che svolgiamo anche in questo articolo.

Vedere come funzionano i controlli aggiunti dalla libreria è un’operazione molto semplice, in fin dei conti basta clonare il repository di elementi all’interno della cartella inc/ del proprio tema e inserire la seguente riga di codice nel functions.php:

Presta attenzione che noi abbiamo modificato il nome della cartella wordpress-theme-customizer-custom-controls in theme-customizer per rendere l’accesso più semplice. Allo stesso tempo questo richiede una piccola modifica che analizzeremo successivamente, ma se stai utilizzando il repository che abbiamo creato non dovrai preoccuparti di niente.


A questo punto hai tutti gli elementi che ti servono ma non hai capito cosa è successo! È vero, potresti andare a controllare il codice del file theme-customizer-demo.php e scoprire uno ad uno come sono stati creati i singoli controller; però ti avevo suggerito di fare qualcosa di più pratico, ricordi?

Estendiamo le Sezioni già presenti

Se usi Genesis da diverso tempo, dovresti ormai sapere che i sui sviluppatori seguono molto da vicino le modifiche di WordPress e molto spesso rilasciano dei bugfix e delle implementazioni ben prima del rilascio di un aggiornamento della piattaforma.

Anche nel campo della personalizzazione dei temi sono andati avanti utilizzando il Theme Customizer fin dal suo rilascio alla versione 3.4 e il loro apprezzamento si nota molto all’interno dei temi sviluppati dallo stesso team di StudioPress!

Ti ho mai detto che StudioPress ha più di 70 child theme adatti a tutte le occasioni? Noi abbiamo acquistato la Genesis PRO che ci dà accesso a tutti i temi presenti e futuri, ti consiglio di farci un pensierino perché il prezzo è incredibilmente basso!

Tornando invece al nostro Genesis Sample bisogna dire che anche se questo è un tema di esempio, presenta diverse modifiche al customizer che sono veramente interessanti!

Ebbene questa è una raccolta delle nuove sezioni che Genesis Samle porta con sé e con le quali possiamo personalizzare il nostro sito web, la cosa interessante da notare è che in alcuni contesti si sono messi ad aggiungere controlli a delle sezioni già presenti in WordPress!

Quindi preché non prendiamo il loro esempio e andiamo ad aggiungere delle personalizzazioni interessanti? Ad esempio, personalmente trovo che la sezione Breadcrumbs oltre che a permetterci di visualizzare le briciole di pane dovrebbe anche offrirci un minimo di controllo sulla visualizzazione, infatti quello che faremo in questo articolo sarà aggiungere sia la possibilità di cambiare la famiglia dei font scegliendo da quelli offerti da Google.

Come puoi notare tu stesso, già con l’inserimento di questi controlli abbiamo dato un’aspetto molto più pratico a questo articolo e ricorda sempre che l’unico limite in questo caso è la tua fantasia! In questo esempio stiamo aggiungendo delle funzionalità a sezioni già esistenti ma partendo dal Genesis Sample potrai anche creare il tuo tema premium con i controlli del Customizer già pronti all’uso.

Personalizziamo le briciole di pane

La prima cosa che dobbiamo comprendere per poter aggiungere i nostri controlli e impostazioni a sezioni già create è che è necessario avere l’id con il quale è stata creata, in questo modo possiamo agganciarci ai pannelli già creati da Genesis. Per scoprirlo esistono diversi metodi:

  1. aprire la cartella genesis/ con un editor di testo e cercare al suo interno la dichiarazione della sezione Breadcrumb (l’ho già cercato io e si trova al rigo 239 del file lib/admin/customizer.php);
  2. un’altra via è quella di controllare il codice HTML generato quando stiamo utilizzando le funzionalità di personalizzazione.
genesis-breadcrumb-codice

Come puoi vedere da questa immagine, che è uno screenshot degli strumenti disponibili in Firefox Developer Edition, i singoli list item presentano degli id che hanno un pattern ben preciso: accordion-section-qualcosa_qualcosaltro. Praticamente la prima parte serve ad identificare l’elemento e l’effetto che dovrà creare, mentre nella seconda parte sitrova l’id impostato per la sezione.

Se hai controllato il file customizer.php avrai scoperto da solo che l’id della sezione è genesis_breadcrumbs, adesso possiamo iniziare a estenderla 😀

Il codice appena inserito proviene proprio da lib/admin/customizer.php presente all’interno della cartella del framework stesso, la riga evidenziata è la dichiarazione della sezione all’interno della quale andremo anche a inserire i nostri controlli. Adesso che abbiamo trovato l’id al quale agganciarsi andiamo a scoprire come sia possibile inserire le modifiche proposte.

Aggiunta Google Font

painting-typography-gift-paint

Una tra le cose più interessanti che mi ha spinto a prendere in considerazione questa libreria di controlli è la possibilità di utilizzare direttamente i Google Font. Dato che la soluzione che è stata implementata ci permette di ricevere gli ultimi 30 font tra i più usati e di salvarli all’interno di un file di testo.

Questo è stato fatto perché Google limita le chiamate alle sue API e nel contesto dei Font ci permette di fare soltanto 10000 richieste al giorno, ma oltre a questo possiamo cachare i risultati per garantire un veloce accesso senza dover attendere la risposta dei server. Fatta questa piccola premessa non ci resta altro che andare ad inserire questo nuovo controllo.

Come fatto per lo scorso articolo, se desideri aggiungere nuovi controlli, impostazioni o altri elementi all’interno del Customizer la prima cosa da fare è agganciare la nostra funzione all’Action Hook customize_register:

In questo modo non hai fatto altro che agganciare la funzione am_breadcrumb_edit() al corretto Hook, tutto quello che resta da fare è popolare il tutto con le giuste impostazioni e controlli.

Se analizzi il codice presente in inc/theme-customizer/theme-customizer-demo.php noterai che molti controlli fanno affidamento a un file esterno. All’interno di questi file sono dichiarate le estensioni della classe WP_Customize_Control che ci permettono di creare i nuovi controlli (come l’inserimento dei Google Font) all’interno delle nostre Theme Customizer API.

Ti consiglio di dare un’occhiata alla classe in inc/theme-customizer/select/google-font-dropdown-custom-control.php dove viene svolto questo lavoro e inolte di sostituire il nome della cartella presente ai righi 53 e 54 in modo da correggere la modifica che abbiamo fatto precedentemente.

Ti ho consigliato di utilizzare questa libreria perchè altrimenti saresti dovuto essere tu stesso a estendere la classe, meglio poter partire da una base già pronta, non credi?

Il blocco di codice che ho appena inserito ci permette di aggiungere una select da usare direttamente all’interno della sezione genesis_breadcrumbs e altro non è che il contenitore dei più popolari font su Google. La cosa veramente interessante è la chiamata alla classe presentata precedentemente con require_once() e la creazione del controllo grazie alle funzionalità che sono state aggiunte.

A questo punto tutto potrebbe sembrare corretto, ma nei test che ho fatto ho notato che il valore salvato non era il nome del font stesso ma piuttosto il numero di riferimento. Per fortuna se ne sono accorti anche diversi sviluppatori e hanno proposto la propria soluzione che funziona perfettamente.

Come dicevo anche prima, se hai preso il codice direttamente dal nostro repository tutte queste modifiche sono state già applicate e non dovrai fare assolutamente nulla; dei semplicemenete continuare a includere passo passo le tue impostazioni.

Siamo giunti al punto in cui dobbiamo far caricare i valori che verranno salvati all’interno del database, in questo caso il nome del font selezionato, per caricarlo all’interno del nostro codice CSS.

Come nella scorsa lezione, le modifiche CSS che verranno applicate andranno a popolare un foglio di stile in linea inserito direttamente all’interno del nostro HTML. Per fare questo dobbiamo agganciarci al Action Hook wp_head nel seguente modo:

Come puoi vedere utilizziamo la funzione get_theme_mod() specificando il nome dell’impostazione per la quale vogliamo ricevere il valore, la cosa è molto semplice ed è già stata spiegata nel precedente articolo.

Conclusioni

Sarei potuto andare avanti e aggiungere dei controlli per la grandezza del carattere, le sue varianti o addirittura il suo colore; però la cosa che ho ritenuto importante mostrarti è già stata spiegata ampliamente e quindi sei libero di applicare tutte le modifiche che desideri.

Quello che ho desiderato fare con questo articolo è stato presentarti nel dettaglio come sia possibile utilizzare questa libreria di elementi che ti permetterà di aggiungere un gran numero di controlli al customizer del tuo tema o plugin.

La nozione essenziale che dovrai ricordarti è implementare la corretta classe per l’aggiunta del nuovo controller e il gioco è fatto. All’interno del repository ho pubblicato anche altre piccole modifiche pronte per i breadcrumb e spero tu possa capire quanto sia potente questo approccio.

Prima di concludere volevo dirti che sto valutando la possibilità di continuare questo percorso alla scoperta delle funzionalità del Customizer utilizzando un vero e proprio framework. Il progetto prende il nome di Kirki e personalmente sono molto curioso di andarlo a conoscere nel dettaglio, che dici interessa anche a te?

Lascia il tuo Pensiero