WordPress: integrare un pannello opzioni nel tema

Chiunque si cimenti nella realizzazione di un proprio tema per WordPress, in breve si scontra con l'esigenza di gestire opzioni e impostazioni dal back end, senza dover ogni volta mettere mano al codice. Per gestire queste opzioni è buona regola creare un pannello dedicato all'interno dell'area amministrazione che può darci la possibilità, per esempio, di caricare un logo personalizzato, scegliere i colori delle nostre pagine, attivare o disattivare funzionalità specifiche e selezionare la tipologia di un font.

Le alternative

Esistono due alternative per creare un pannello opzioni per il proprio tema. La prima è quella di crearlo di sana pianta seguendo le istruzioni del codex ufficiale, la seconda è quella di utilizzare uno degli ottimi options framework reperibili in rete. Per creare un pannello opzioni da zero, sono necessarie conoscenze specifiche del codice e delle funzioni native di WordPress, molto tempo da investire e una buona dose di pazienza per far fronte alle inevitabili difficoltà che questo tipo di implementazione comporta. Viceversa, installare un framework dedicato a questo scopo è un'operazione relativamente semplice, permette di implementare nel proprio tema funzionalità avanzate personalizzando quelle fornite a titolo di esempio e di risparmiare tempo.

In particolare esistono almeno tre framework dedicati alle opzioni dei temi che vale la pena di provare:

• Option tree;
• Options Framework;
• Slightly Modded Options Framework o SMOF

Option Tree

Questo Theme Options può essere scaricato dalla repository ufficiale dei plugin per WordPress. Si può utilizzare come plugin separato dal tema oppure integrato all'interno del tema stesso. La prima soluzione risulta apparentemente più semplice, tuttavia considerando che poi le funzionalità definite dalle opzioni dovranno essere integrate nel tema stesso, questo approccio può sembrare illogico; la logica in realtà esiste e sta nel fatto che, in caso di rilascio di aggiornamenti del plugin, è molto più semplice eseguire un update.

Il plugin crea due interfacce "user friendly" che permettono di definire numerosi dettagli. Una interfaccia è dedicata all'amministrazione del tema (attraverso le sue opzioni) e viene visualizzata tramite il percorso "Menu principale > Aspetto > Theme Options". La seconda interfaccia è dedicata allo sviluppatore, serve a creare e definire le opzioni che appariranno nel Theme Options e può essere resa visibile all'utente finale, oppure nascosta settando su false il relativo parametro nel codice sorgente.

Vantaggi:

• facile da installare e configurare;
• interfaccia semplice e intuitiva.

Svantaggi:

• scarsa documentazione e aggiornamenti poco frequenti;
• non è presente un sistema integrato accessibile all'utente finale per il backup e il restore delle opzioni (è disponibile solo per lo sviluppatore).

Options Framework

Anche questo Theme Options è reperibile come plugin nella repository ufficiale di WordPress, esso può essere utilizzato come plugin o lo si può integrare nel tema. A differenza del precedente, non include un'interfaccia visuale per lo sviluppatore e tutte le personalizzazioni devono essere fatte tramite codice PHP nel file dedicato. Una volta integrato e richiamato nel file functions.php, genera un'interfaccia dedicata all'amministratore del sito accessibile tramite il percorso "Menu principale > Aspetto > Theme Options".

Vantaggi:

• facile da installare;
• altamente personalizzabile tramite le opzioni fornite;
• buona documentazione e aggiornamenti abbastanza frequenti.

Svantaggi:

• tutte le personalizzazioni e integrazioni di opzioni devono essere eseguite agendo sul codice;
• non è presente un sistema integrato per effettuare il backup e il restore delle opzioni;
• il pannello opzioni generato è poco curato graficamente, i vari pannelli vengono aggiunti in senso orizzontale e questo può creare qualche problema di formattazione quando i tab sono numerosi.

Slightly Modded Options Framework o "SMOF"

Questo framework per integrare opzioni personalizzate nei temi di WordPress è una derivazione dei primi due e presenta alcuni dei vantaggi di entrambi. Per esempio dispone di un sistema di backup/restore delle opzioni già integrato, l'interfaccia creata è molto accattivante e i pannelli vengono aggiunti dall'alto verso il basso.

SMOF sembrerebbe quindi essere la soluzione con il miglior rapporto costi/benefici per implementare facilmente un pannello opzioni all'interno di un tema.

Vantaggi:

• facile da installare;
• altamente personalizzabile tramite le tante opzioni disponibili
• buona documentazione e una discreta disponibilità da parte dello sviluppatore;
• sistema di backup/restore delle opzioni integrato;
• interfaccia "user friendly";
• sviluppo del pannello in verticale;
• utilizzo delle funzioni Media Library Uploader e WP Color Picker native di WordPress;
• selezione dei Google fonts con live preview.

Svantaggi:

• Tutte le personalizzazioni e aggiunte di opzioni devono essere effettuate comunque agendo sul codice.

Installare SMOF nel tema

L'installazione dell'Options Framework SMOF in un tema è piuttosto semplice, per portarla a termine basterà seguire le istruzioni proposte di seguito:

1. scaricare una copia del framework dal repository di Github
2. estrarre la cartella admin e images all'interno del tema
3. Copiare il contenuto del file functions.php che si trova all'interno del package di "SMOF" e incollarlo all'interno del file functions.php del tema (questo passaggio serve per attivare il framework).

Ora se navighiamo nel nostro tema, noteremo che sotto "Menu principale > Aspetto" fra le voci del menu, sarà disponibile la voce "Theme Options". Selezionando questa voce potremo accedere al pannello demo di "SMOF" che mostra un'anteprima esemplificativa di tutte le tipologie di opzioni disponibili.

Nel pannello principale, dall'alto verso il basso, troviamo i sotto pannelli:

Impostazioni	Descrizione.
Home Settings	Esempi di Media Uploader, slider JQuery, Switch e Layout Manager.
General Settings	Selezione di un'opzione tramite immagine, campi per l'inserimento di testo su più righe.
Styling Options	Select per la selezione di file, Color Picker per la selezione dei colori con tasto di ripristino del colore di default.
Example Options	Selezione di font con anteprima, Input text, mini select, Input Checkbox e Radio.
Advanced Settings	Opzioni con sotto opzioni a scomparsa, opzioni multiple o raggruppate.
Backup Options	Pannello dedicato al backup e il restore di tutte le opzioni create e impostate.

Ovviamente si possono aggiungere tutti i pannelli che servono e le opzioni sono solo alcune fra quelle disponibili. Ognuna di esse può essere personalizzata in base alle esigenze e al progetto che si desidera sviluppare. Questo il link per consultare la documentazione.

Come personalizzare le opzioni

Aprendo tramite editor il file functions.options.php che si trova all'interno della cartella admin/functions, troviamo il codice che genera le opzioni, ognuna di queste ha la sua sintassi. Ogni opzione non è altro che un array che registra i valori e i parametri passati in una variabile globale chiamata $of_options.

Prima di procedere con le personalizzazioni è consigliabile tenere a portata di mano una copia del codice originale per poterlo consultare in caso di dubbi. Si analizzi un semplice esempio:

$of_options[] = array("name" => "Home Settings", "type" => "heading");
$of_options[] = array( 	"name" => "Media Uploader",
"desc" => "Upload images using native media uploader.",
"id" => "media_upload",
"std" => "",
"type" => "media");

Il primo array serve ad attivare un sotto pannello chiamato Home Settings con il type: heading. Il secondo array serve ad attivare un'opzione che permette di scegliere un file media dalla Media Library e scrivere l'URL del file all'interno della variabile globale.

Vediamo i vari parametri:

Parametro	Descrizione.
name	Il titolo che verrà visualizzato nel pannello opzioni.
desc	La descrizione dell'opzione.
id	L'id univoco dell'opzione (servirà per poterla richiamare ed è una stringa arbitraria).
std	Un valore di default preimpostato.
type	Il tipo di opzione.

Alcune opzioni richiedono differenti chiavi dell'array, ad esempio options e mod. Nel file originale functions.options.php si trovano le definizioni per capire come funziona ciascuna opzione.

Ora aggiornando la pagina del pannello opzioni, dovremmo vedere un unico sottopannello intitolato "Home Settings" con al suo interno un campo per l'inserimento del testo insieme al pulsante per aprire la Media Library da cui poter scegliere e caricare il file che vogliamo associare all'opzione con id: media_upload. Una volta scelto il file è sufficiente cliccare su "Save All Changes" per registrare le modifiche. L'ordine di apparizione nel pannello, dall'alto verso il basso, segue quello di inserimento del codice nel file sia per i pannelli che per le opzioni.

Recuperare i valori

Abbiamo visto come impostare l'opzione (ipotizziamo di aver caricato il file relativo al logo del nostro sito), ma come recuperare il valore per visualizzarlo nel front end? In questo caso bisognerà dichiarare la variabile globale all'interno del file nel quale vogliamo mostrare l'opzione. Volendo aggiungere il logo (in questo caso la URL relativa all'immagine del logo) al tema TwentyFourteen, dobbiamo scrivere nel file /twentyfourteen/header.php (nel punto in cui vogliamo mostrarlo), il codice:

global $data; //recupera le opzioni registrate in $data
echo $data['media_upload']; //prende il valore relativo all'id "media_upload" ($data['id']) e lo stampa

Nella prossima parte di questa trattazione verranno proposti alcuni esempi pratici relativi all'utilizzo avanzato di SMOF.