Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Theme Development
Code

Settings API di WordPress, parte 5: schede di navigazione per le opzioni

by
Difficulty:AdvancedLength:MediumLanguages:
This post is part of a series called The Complete Guide to the WordPress Settings API.
The WordPress Settings API, Part 4: On Theme Options
The WordPress Settings API, Part 6: Menu Pages

Italian (Italiano) translation by Fabio Pantano (you can also view the original English article)

A questo punto della serie, abbiamo dato un'occhiata da vicino alle Settings API e a quello che hanno da offrire. Abbiamo anche iniziato a creare il nostro tema in cui applicare tutto ciò che abbiamo imparato. Abbiamo studiato le sezioni, i campi, le opzioni, menu, pagine e altro ancora.

Se avete seguito fin dall'inizio, avrete probabilmente notato che questi articoli sono lunghi e pieni di codice. Abbiamo appreso i punti principali delle Settings API, quindi nei prossimi articoli, procederemo con un approccio più stringato ma focalizzato sul resto degli argomenti. Ciò consentirà di ridurre la lunghezza dei nostri articoli e la quantità di codice da scrivere e si spera la facilità di comprensione.

La volta scorsa ci siamo lasciati nel bel mezzo dello sviluppo. Abbiamo creato con successo la nostra pagina opzioni e ne abbiamo introdotte di nuove, ma abbiamo lasciato il progetto in uno stato che impediva una corretta memorizzazione dei valori. In questo articolo, analizzeremo il perché non siamo in grado di salvare le nostre opzioni e come risolvere il problema.

Prima di iniziare: questo articolo presuppone di avere familiarità con le Settings API e le opzioni del tema. Se sei uno sviluppatore WordPress principiante o intermedio, consiglio vivamente di recuperare il resto della serie prima di procedere.


Perché non vengono salvate le opzioni?

Se hai seguito l'intera serie, la pagina opzioni dovrebbe essere simile a questa:

Theme Options

Tutto sembra andare bene, ma c'è un problema con questa configurazione, i valori delle "Opzioni social" vengono salvati correttamente ma le "Opzioni di visualizzazione", no. Prima di procedere, è importante capire perché siamo in grado di visualizzare ogni opzione su una singola pagina, ma non siamo in grado di salvare entrambe le opzioni.

All'inizio della serie, abbiamo definito due set di opzioni per il nostro tema: "Opzioni di visualizzazione" e "Opzioni social". Utilizzando le Settings API, stiamo dicendo a WordPress di creare delle voci per ciascun gruppo di opzioni nel database. Dal momento che abbiamo definito due gruppi di opzioni, due righe vengono create nel database. Successivamente, le Settings API eseguono il render delle opzioni sulla dashboard utilizzando gli elementi del form. Da lì, WordPress accetta i valori del form e li salva nel database.

Al fine di fornire un maggior livello di sicurezza, WordPress assegna a ciascun gruppo di opzioni un valore univoco chiamato nonce, che protegge da attacchi dannosi. Poiché un valore nonce viene applicato a ciascun gruppo di opzioni, al momento stiamo eseguendo un rendering di un singolo form con due nonce. Quando si invia il form al server, WordPress vedrà solo (e, pertanto, utilizza) il valore nonce "più recente". Nel nostro caso, sono le "Opzioni social". Come tali, soltanto quelle opzioni vengono prese in carico, le "Opzioni di visualizzazione" vengono completamente ignorate.

Questa analisi è decisamente scarsa, in realtà, si possono effettivamente vedere i due valori nonce per ognuna delle nostre sezioni, quando si visualizza la sorgente della pagina. Ecco il nonce per le "Ppzioni di visualizzazione:"

Theme Options

Ed ecco il nonce per le opzioni social:

Theme Options

I valori effettivi saranno diversi, ma sarà presente l'elemento di input.

Un modo per evitare questo problema è quello di creare una pagina univoca per ciascun gruppo di opzioni. Questa non è una cattiva soluzione, ma se si lavora solo con un gruppo di una o due opzioni, la creazione di un'intera nuova pagina potrebbe risultare un po' eccessiva.

Per fortuna, c'è una via di mezzo in WordPress, dove è ancora possibile mantenere tutte le opzioni su una singola pagina e lasciare agli utenti salvare tutte le opzioni mantenendo piacevole l'esperienza utente.


Inseriamo la navigazione a schede

Di sicuro hai già visto una navigazione a schede nella dashboard di WordPress. Basta dare un'occhiata alla pagina "Temi":

Themes

La navigazione a schede offre un'ottima alternativa per raggruppare insiemi di opzioni correlate in un'unica pagina, senza sacrificare l'esperienza utente. Questo è ciò che implementeremo nel tema Sandbox.

Prima di scrivere qualsiasi codice, è sempre una buona idea stilare un elenco su cosa andremo a sviluppare.

  • Introdurre due schede, una per le opzioni social e una per le opzioni di visualizzazione
  • Impostare le "opzioni di visualizzazione" come scheda predefinita quando la pagina viene caricata
  • Assicurarsi che la scheda sia contrassegnata come attiva dopo aver salvato una specifica pagina di opzioni
  • Verificare che il messaggio di aggiornamento venga visualizzato dopo il salvataggio delle opzioni

Aggiungere schede individuali

Nel file functions.php, individuare sandbox_theme_display. Questa è la funzione che stiamo usando per l'effettivo rendering della pagina opzioni. Fino a ora, dovrebbe assomigliare a questo:

In primo luogo, introduciamo le nostre due schede. Questo è relativamente semplice, infatti andremo a sfruttare 2 classi CSS fornite direttamente da WordPress, vale a dire, nav-tab-wrapper e nav-tab. Nella funzione sandbox_theme_display, aggiungiamo il seguente blocco di codice HTML appena sotto la chiamata a settings_errors():

Ovviamente, risulta del tutto semplice. Abbiamo introdotto due schede con un proprio stile che useremo nel corso del tutorial. A questo punto, il codice dovrebbe essere questo:

E la tua pagina delle opzioni dovrebbe assomigliare a questa:

Initial Settings Tabs

Diamo vita alle schede

Per iniziare ad alterare le nostre pagine opzioni, abbiamo bisogno di fornire un qualche tipo di segnale o flag su quali opzioni vogliamo eseguire il rendering. Questo può essere fatto utilizzando una variabile come stringa di ricerca che identifica su quale scheda è stato fatto clic e che può, a sua volta, essere letta utilizzando PHP.

Quindi procediamo e diamo a ogni scheda creata in precedenza un'unica query che segnala quale scheda si sta tentando di caricare. Aggiornate il markup per assomigliare a questo:

Prestate attenzione a questo passaggio: abbiamo messo a disposizione due variabili di stringa in ogni link: il valore della pagina e il valore della scheda. Il valore della pagina è necessario perché è generato da WordPress tramite le Settings API e viene utilizzato per indicare all'applicazione quale pagina opzioni caricare. Il secondo valore è un valore arbitrario che abbiamo usato per segnalere su quale scheda siamo. Se avete fatto tutto correttamente, si noti come la barra degli indirizzi del browser rifletta i valori mentre si fa clic su ogni scheda.

Successivamente, abbiamo bisogno di scrivere un po' di codice PHP per leggere la nuova stringa di query. In definitiva, questo codice ci permetterà di attivare o disattivare la nostra pagina opzioni, ma facciamo un passo alla volta. Iniziamo scrivendo un'istruzione condizionale per controllare se è presente il valore di stringa di query e, in caso affermativo, memorizzarlo in una variabile. Possiamo farlo direttamente sopra il nostro nav-tab-wrapper definito sopra.

WordPress fornisce una classe denominata nav-tab-active che possiamo applicare alla nostra scheda e segnalarla come attiva. Il nostro prossimo passo sarà confrontare il valore della variabile $active_tab alla variabile di stringa della scheda e quindi applicare tale nome di classe alla scheda pertinente.

Per effettuare questa operazione, aggiornare il codice come segue:

Si noti che abbiamo scritto un po' di codice PHP nell'attributo classe per ciascuna scheda. In sostanza, il codice dice "se il valore della variabile scheda attiva è 'display_options', mostra la classe nav-tab-active; in caso contrario, non mostrare nulla". Abbastanza facile, no? Prova un paio di volte, si dovrebbe vedere ogni scheda attivarsi e disattivarsi.

A questo punto, la funzione dovrebbe assomigliare a questa:

Ma aspettate, c'è un piccolo bug in questo codice! Ricordate che quando un utente apre la pagina opzioni per la prima volta, non c'è alcun valore tab nella stringa di query. Quindi, dobbiamo impostarne una predefinita. Per far ciò, aggiorniamo l'istruzione condizionale che controlla la presenza della variabile di stringa di query. Mentre controlliamo, cerchiamo di consolidarla utilizzando un triplice opertatore:

Questo dice "se la stringa di query contiene un valore per 'tab', assegnarlo alla variabile scheda attiva; in caso contrario, assegnare il valore 'display_options.' " Questo è per impostare la scheda attiva. Ancora una volta, provate le schede.

Attivare/disattivare la nostra pagina opzioni

Abbiamo quasi finito! L'ultima cosa che dobbiamo fare è quello di attivare o disattivare la pagina opzioni in base alla scheda attiva. In particolare, vogliamo solo mostrare le opzioni di visualizzazione quando è selezionata la scheda di visualizzazione (stessa cosa per le nostre opzioni social).

Poiché abbiamo tutto memorizzato nella variabile active_tab, dovremmo essere in grado di inglobare le nostre Settings API in un'istruzione condizionale ed essere pronti per partire. Quindi, in primo luogo, individuare il seguente blocco di codice nel tuo tema:

Si noti che abbiamo due chiamate: settings_fields e do_settings_section. In sostanza, vogliamo solo eseguire il rendering di un singolo gruppo quando è selezionata una scheda in particolare. Per fare questo, scriviamo semplicemente un'istruzione condizionale che controlla il valore di $active_tab e quindi esegua la sezione appropriata:

Aggiornate la pagina opzioni, e se avete fatto tutto correttamente, ciascun gruppo di opzioni dovrebbero visualizzarsi in base alla scheda e tutte le opzioni dovrebbero salvarsi correttamente.


Conclusione

La navigazione a schede è un modo semplice per raggruppare opzioni correlate e per fornire agli utenti una solida esperienza utente senza sommergerli con infinite opzioni. È relativamente facile da implementare ed è strettamente legata e integrata con il look nativo di WordPress.

Nel prossimo articolo la implementeremo su un menu di primo livello il che renderà le opzioni del vostro tema accessibili tramite il menu della dashboard di WordPress.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.