Aggiungi Rimuovi Sidebar WordPress

Aggiungi/Rimuovi Sidebar a Seconda delle Necessità

Diciamoci la verità, WordPress è una piattaforma incredibile che permette di fare moltissime cose e le conoscenze tecniche che richiede sono veramente poche. Il problema è che quando si cerca di realizzare qualcosa di più dedicato, qualcosa di più ricercato, queste conoscenze tornano mooolto comode...

Giusto non troppo tempo fa stavo lavorando con Eugenio allo sviluppo di uno starter theme che ci servirà come punto di partenza per tutti i tutorial che vedrai apparire qua sopra e anche all’interno di un progetto di cui ti parlerò più avanti.

Ma oggi non parliamo tanto di questo perché  l’argomento centrale dell’articolo sono le sidebar. So che ne abbiamo già parlato precedentemente, sia per quanto riguarda la creazione di una singola sidebar che per crearne diverse in modo da dare al nostro tema la possibilità di ospitare nuove funzionalità; ma ti assicuro che oggi faremo qualcosa di veramente divertente.

Ebbene sì, divertirsi. Se sei uno sviluppatore come noi non c’è niente di meglio di passare qualche ora a lottare e insultare il proprio schermo nella battaglia alla realizzazione della feature che ci interessa.

Con gli articoli che ti ho collegato precedentemente dovresti aver capito che creare una o più sidebar non è assolutamente un compito impossibile; in fin dei conti devi semplicemente utilizzare la funzione register_sidebar() (o register_sidebars() ) per creare automaticamente una sezione in grado di ospitare un numero arbitrario di widget.

Dov’è il Problema?

Detto in questo modo sembra che il sistema di widget in WordPress sia veramente potente, ed in effetti lo è su tutti i fronti; ma quando andiamo a creare una sidebar (il contenitore ideale delle widget) troveremo all’interno del nostro backend anche un’area che ci permetterà di inserire le widget desiderate. Un po’ come rappresentato nella seguente immagine:

Le Sidebar in WordPress

Per quanto utile sia avere questo contenitore; nei momenti in cui non usiamo queste sidebar, il tutto si rivela abbastanza inutile e occupa anche molto spazio all’interno del backend. Qual è il caso in cui non useresti delle sidebar?

Con Eugenio avevamo questa pazza idea di creare un footer personalizzabile, un footer che adatti le dimensioni in base al numero di sidebar contenute. E ci siamo riusciti anche grazie alle Theme Customization API e adesso l’utente che utilizza il nostro tema è in grado di scegliere se desidera un footer con 1, 2 , 3 o 4 colonne.

Ciascuna di queste colonne è una sidebar in grado di contenere tutte le widget che si possono desiderare e questo offre un grande livello di personalizzazione, ma se andavamo ad inserire immediatamente (magari all’interno del nostro functions.php) tutte e quattro le sidebar ci saremmo trovati altrettanti contenitori di widget nel nostro backend.

Nel tentativo di trovare una soluzione a questo, ci siamo scontrati principalmente con 2 problemi:

  1. come fare per adattare la larghezza di ogni singola sidebar in base al numero di quelle attivate dall’utente (se fosse stata selezionata soltanto una questa occuperà tutta la larghezza del footer mentre si dovrà adattare in base alla presenza delle altre sidebar);
  2. se un utente seleziona soltanto due sidebar attive per il suo footer dovrà avere altrettante sidebar attive nel suo backend.

Ecco che ci siamo messi a lavoro nel tentativo di risolvere questo problema e, senza tenerti troppo sulle spine, sono più che contento di dirti fin da ora che ci siamo riusciti!

Risolvere il Problema delle Larghezze

Adattare la larghezza delle sidebar in base al loro numero è stato abbbastanza semplice, questo sopratutto perché abbiamo usato la griglia di Pure, noto framework minimale di Yahoo, che ci hanno permesso di interagire con le classi necessarie per definire la struttura del proprio sito.

Cerchiamo di capire per bene quale sia stato il nostro scopo in questo contesto:

  • se l’utente seleziona un’unica sidebar, questa dovrà prendere il 100% della larghezza del footer e mostrare una sotto l’altra le varie widget;
  • nel caso di due colonne, ciascuna dovrà coprire il 50% del contenitore;
  • con tre colonne verrà impostata una larghezza del 33% con tre diverse aree widget;
  • mentre con la scelta delle quattro colonne ciascuna dovrà occupare una larghezza pari al 25%.

Vista in questo modo può sembrare un’attività abbastanza noiosa e complicata ma, come dicevo prima, grazie alla struttura delle classi di Pure, creare questo sistema è stato un gioco da ragazzi; ci è bastato utilizzare le seguenti classi: .pure-u-1-2 che crea una colonna che occupa metà dello spazio disponibile, .pure-u-1-3 in grado di occupare un terzo della larghezza del contenitore e .pure-u-1-4 che a sua volta crea un elemento che occupa un quarto dello spazio disponibile.

Se sei stato attendo, adesso dovresti essere nel momento in cui ti poni la domanda: “Ma dove è la classe per la singola colonna?”

Utilizzare un sistema a griglie già pronto come quello in Pure mi permette di dirti che non ne hai bisogno. Quando l’utente seleziona una singola colonna non abbiamo la necessità di aggiungere nessuna classe, semplicemente questa si adatterà automaticamente alla larghezza del contenitore!

Adesso che abbiamo risolto il discorso della griglia CSS, è giunto il momento di scoprire come abbiamo fatto ad implementare questa funzionalità.

Prima di andare avanti ti devo avvertire che nel codice presentato più in basso troverai la chiamata alla funzione get_theme_mod(). Non ti preoccupare se non la conosci ancora, questa si comporta in modo molto simile a get_option() (la funzione che usi con le Settings API e che ti permette di richiedere valori salvati nel database), soltanto che, in questo caso, utilizziamo un array di opzioni specifico per i temi.

Anche se in questo articolo non ti mostro il codice che ci ha permesso di realizzarlo (ma ti prometto che rimedierò a breve con uno nuovo) lavorando con le Theme Customization API siamo stati in grado di creare un semplice campo select che permetta all’utente di turno di selezionare quante colonne desidera avere nel proprio footer.

A questo punto, abbiamo la possibilità di conoscere questa scelta grazie alla funzione get_theme_mod(). Il campo da noi creato può assumere 4 valori differenti (praticamente da 1 a 4) cosa che rende molto più semplice la creazione di uno for:

Con il codice appena presentato ti dovrebbe essere chiaro quanto semplice sia modificare una griglia partendo da una soluzione (come Pure) che utilizza direttamente dei numeri interi all’interno dei nomi delle sue classi 😉

Arrivano le Sidebar

Adesso che abbiamo impostato questo controllo all’interno del file footer.php (il file nel quale abbiamo bisogno di inserire le nostre colonne) è giunto il momento di aprire il file functions.php e creare effettivamente le sidebar che il nostro utente vuole utilizzare.

Ricorda che il nostro obiettivo è mostrare soltanto il numero di sidebar che l’utente ha selezionato. Se seleziona 3, nel nostro backend non ci dovranno essere più di 3 sidebar dedicate al footer, mentre se ne seleziona una vogliamo soltanto quella.

Come ci ha insegnato WordPress, per creare una sidebar si usa la funzione register_sidebar() mentre se abbiamo la necessità di creare X sidebar dobbiamo usare register_sidebars(). Il nostro problema è che in questo contesto abbiamo voluto fare qualcosa di dinamico, quindi prima di dire a WordPress quante e quali sidebar vogliamo attivare per il nostro tema, abbiamo dovuto fare un piccolo controllo.

Come puoi vedere tu stesso, i concetti che ci hanno permesso di raggiungere questo effetto sono relativamente semplici. Se così non fosse ti consiglio di leggere questa lezione di Apprendi il PHP con WordPress, ma in fin dei conti si tratta di un semplicissimo if che va a controllare il valore salvato dal nostro utente all’interno del Theme Customizer.

Fatto questo controllo decidiamo di utilizzare la funzione register_sidebar() oppure register_sidebars() e nel secondo caso, abbiamo scelto di creare un array di base che ci permetta di popolare le informazioni necessarie per ciascuna sidebar.

Tutto questo ci è servito per attivare o disattivare dinamicamente il numero di sidebar presente nel nostro tema.

Gli Ultimi Ritocchi

Anche se non sai ancora come sia possibile creare dei nuovi pannelli all’interno del proprio Theme Customizer la tecnica che ti ho spiegato quest’oggi ti potrà essere utile anche se crei un pannello di controllo per il tuo tema all’interno del backend. Questa è una pratica che ultimamente la stessa WordPress sconsiglia, ma in fin dei conti tutto quello che dovresti fare per creare una cosa del genere è sfruttare le Settings API e fare i controlli con la funzione get_option().

Ti dico questo perché se bruci di voglia di provare questo stesso codice, senza dover utilizzare le Theme Customization API, puoi sempre farlo sia sfruttando le Settings API oppure passando direttamente i valori che ti interessano all’interno del tuo codice.

Facci sapere che cosa ne pensi di questa tecnica perché inizieremo a pubblicare molti altri articoli come questo dove ti spiegheremo interessanti scoperte, e modifiche, che abbiamo applicato a questo tema.

Lascia il tuo Pensiero