Tra le centinaia di feature presenti nei temi premium di WordPress, senza dubbio quella più apprezzata dagli utilizzatori finali è la possibilità di personalizzare ogni aspetto grafico del tema (colori, logo, tipografia, ma anche posizione dei menù, delle sezioni, dei post etc.).
Il più delle volte chi acquista o scarica un tema WordPress ha poca dimestichezza con il codice, perciò è compito degli sviluppatori fornire agli utenti un metodo semplice e intuitivo per avere il totale controllo sull’aspetto del proprio sito.
Nel 99% dei casi, questo metodo è un pannello delle opzioni.
Ne esistono a decine, tutti con un’interfaccia differente e diverse voci modificabili – chi ha acquistato un tema premium almeno una volta si sarà sicuramente imbattuto in un pannello simile. Spessissimo sono raggiungibili tramite la voce “Theme options” del menù di amministrazione e rappresentano un pilastro fondamentale nello sviluppo di un tema a pagamento (ma sono anche utili per modificare il proprio tema senza difficoltà).
Costruirne uno da zero richiederebbe parecchio tempo e parecchio impegno. Fortunatamente esistono diversi framework per crearli.
I framework sono librerie di codice che forniscono agli sviluppatori una solida base su cui lavorare per costruire le opzioni del proprio tema.
Tra quelli che ho avuto occasione di testare, il più semplice e affidabile è Redux.
Esempio di pannello delle opzioni realizzato con Redux
Identikit di Redux
Redux è un progetto open source che nasce dall’unione di altri quattro framework (NPH, SMOF, SimpleOptions e una versione più basilare dello stesso Redux), i cui sviluppatori hanno deciso di cooperare per dare vita a un prodotto più completo e sicuro.
La semplicità dei suoi array, insieme all’ottima documentazione e ai costanti aggiornamenti, lo rendono la soluzione ideale per creare con poche righe di codice dei pannelli completi che si interfaccino con l’utente nel modo migliore possibile.
Le feature peculiari di Redux sono:
- L’utilizzo delle API di WordPress
- La possibilità di inserire diversi tipi di field
- La funzione “import/export”, per trasferire le opzioni da un sito all’altro
- La molteplicità di estensioni disponibili
- La compatibilità con gli standard di Themeforest, uno dei marketplace più famosi per temi WordPress
Come installare Redux
Per prendere dimestichezza con il framework, il metodo migliore e più veloce è installare il relativo plugin, esattamente come fareste con qualsiasi altro plugin (attenzione: l’operazione è possibile solo su WordPress.org):
- Dal menù di sinistra di WordPress, selezionate Plugin -> Aggiungi nuovo
- Nel modulo di ricerca, digitate Redux Framework, installate il plugin e attivatelo
- Dalla pagina contenente l’elenco dei plugin, selezionate la voce in rosso “Activate demo mode”
Una volta attivata la demo mode, si aprirà in automatico una finestra di benvenuto. Inoltre nel menù di sinistra dovrebbe comparire una nuova voce, “Sample options”.
Cliccando sulla nuova sezione comparirà questa schermata:
Integrare il framework nel proprio tema
Ora che la demo è attivata, dalla schermata “Sample options” possiamo farci un’idea delle numerose opzioni che Redux ci permette di generare e dei diversi field che mette a nostra disposizione.
È importante prendere dimestichezza con il pannello e la sua struttura, in modo da poter poi associare ogni array alla relativa voce del menù senza problemi.
Non resta che integrare il framework nel nostro tema!
Per farlo occorre inizializzarlo tramite un file di configurazione.
- Tramite FTP, trovate la directory redux-framework (sotto il percorso wp-content/plugins). All’interno di essa è presente la cartella sample. Tutto ciò che dovete fare è copiare sample e incollarla all’interno della directory principale del vostro tema (wp-content/themes/nome-tema).
- Disattivate la modalità demo di Redux (sempre dalla schermata principale dei plugin).
- Aprite il file functions.php e aggiungete questa riga di codice:
require_once (dirname(__FILE__) . '/sample/barebones-config.php');
- Ricaricando la dashboard troverete di nuovo Sample Options nel menù di sinistra, ma le voci del sottomenù saranno diverse (soltanto tre, contro le quindici di prima): questo perché il file di configurazione appena richiamato all’interno del vostro tema (barebones-config) è vuoto, al contrario di sample-config, che includeva tutti gli esempi visualizzati prima.
Il setup iniziale è concluso!
Nella seconda parte del tutorial inizieremo a creare e modificare i campi delle opzioni e ad inserire gli array all’interno del tema.
Nel frattempo, per avere una panoramica più completa del framework, potete approfondire la conoscenza di Redux leggendo la pagina Getting started del loro sito.
