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

Le Settings API di WordPress, parte 4: opzioni tema

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called The Complete Guide to the WordPress Settings API.
The WordPress Settings API, Part 3: All About Menus
The WordPress Settings API, Part 5: Tabbed Navigation For Settings

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

Nell'ultimo articolo, abbiamo approfondito i vari tipi di menu che sono supportati dalle WordPress API. Anche se non fanno parte delle Settings API, essi svolgono un ruolo chiave nello sviluppo, soprattutto quando si lavora con plugin e temi avanzati.

In questo articolo, per iniziare la costruzione del nostro tema Sandbox, affronteremo un uso più pratico dei menu, eseguendo un refactoring delle opzioni esistenti e aggiungendo diverse nuove pagine. Se si desidera partecipare alla costruzione, assicurarsi di aver assimilato gli articoli precedenti e di avere l'ultima versione del tema Sandbox presente sulla repository di GitHub.

Prima di iniziare: questo articolo avrà molto codice. Nella prima metà dell'articolo, ci sarà il refactoring del codice esistente. Nella seconda metà, scriveremo alcune funzionalità da cima a fondo. È importante prendersi il tempo per leggere ogni sezione e relativo codice, assicurandosi di capire il funzionamento prima di passare alla sezione successiva. Cercate di evitare di copiare e incollare solo il codice.

Nota degli autori: questo articolo vi guiderà all'introduzione di una nuova sezione per le opzioni del tema, ma l'articolo non coprirà l'intero processo, si prega di leggere nel thread dei commenti. Ne sono consapevole, quindi mi scuso se non sarà chiara nell'articolo, e il tutto sarà completato nel prossimo articolo a fine mese!


Facciamo un po' di pulizia

Se hai lavorato con gli esempi precedenti, si dovrebbero avere differenti menu configurati nel file functions.php. Dato che avremo un approccio più pratico con il nostro tema, abbiamo bisogno di ripulire alcune porzioni di codice che abbiamo scritto negli esempi precedenti. So che sembra un po' fastidioso scrivere un sacco di codice per poi rimuoverlo, ma lo scopo degli esempi precedenti era di gettare le fondamenta per la comprensione di ciò che offrono in pratica le funzioni di WordPress.

La prima cosa è individuare le chiamate delle due funzioni che aggiungono le opzioni di Sandbox al menu plugin:

Rimuovetele dal file functions.php.

Poi rimuovere le opzioni per l'aggiunta del menu di primo livello. Si potrà rivisitare questo codice più avanti nell'articolo, ma sarà un po' diverso da quello creato inizialmente.

A questo punto, lasciare le due specifiche funzioni per la dashboard di WordPress che abbiamo creato:

  • Una voce di menu "Sandbox Theme" sotto il menu Appearance (Aspetto).
  • L'insieme delle tre opzioni sotto le impostazioni "Generali" nel menu Settings (Impostazioni).

Se vedete queste due opzioni, siete a posto; in caso contrario, verificare che il functions.php sia simile al codice seguente:

A questo punto, siamo pronti per iniziare.


Pianificare le nostre opzioni

Prima di scrivere qualsiasi codice, è importante pianificare ciò che andremo a fare. A questo punto, abbiamo scritto alcune utili funzionalità: la possibilità agli utenti di attivare o disattivare la visibilità dell'header (intestazione), del content (contenuto) e area piè di pagina (footer). Ora come ora le opzioni risiedono sulla pagina "Generale" nel menu Settings (Impostazioni). Dato che stiamo lavorando su un tema, dovremmo includere una nostra pagina di opzioni.

Come se non bastasse, queste tre opzioni non sono sufficienti per un tema valido. Sta diventando comune per gli utenti condividere i loro social media sul loro blog, quindi pianifichiamo di dare agli utenti la possibilità di includere un loro link Twitter, Facebook e Google+.

Con questo in mente, possiamo pianificare le due sezioni seguenti:

  • Opzioni di visualizzazione
    • Header
    • Content
    • Footer
  • Opzioni social
    • Twitter
    • Facebook
    • Google+

Inoltre, introdurremo queste opzioni nella pagina del tema Sandbox, sotto il menu Appearance (Aspetto). Inoltre, ogni sezione della pagina sarà accessibile tramite una navigazione a schede.


Creare le opzioni

Refactoring della pagina opzioni

La nostra pagina opzioni sarà più complessa procedendo con l'articolo, quindi è una buona idea prepararsi. Rivedendo la nostra pagina opzioni, la funzione di callback è la seguente:

Dal momento che sarà più complessa, abbiamo bisogno di eseguire un refactoring del codice. In particolare, faremo quanto segue:

  • Fornire alla pagina opzioni un'icona, in modo da renderla più coerente con il look generale di WordPress
  • Rimuovere la descrizione della pagina
  • Refactoring del codice PHP in un blocco HTML affinché sia più facile modificarlo in futuro.
  • Introdurre una funzione per la visualizzazione di errori delle opzioni
  • Creare un modulo per ospitare le nostre opzioni

È relativamente semplice. In questo caso, riportare il codice nel suo complesso è la soluzione migliore, invece di scriverlo e spiegarlo riga per riga. Esaminate il codice qui sotto, prestando particolare attenzione ai commenti e assicurarsi che il callback sia esattamente questo:

Se il codice è corretto, la pagina di opzioni dovrebbe assomigliare a questa:

Trasferire le nostre opzioni

Ora che la pagina opzioni del tema sta prendendo forma, è il momento di spostare le opzioni create in precedenza, vale a dire la visualizzazione delle opzioni, nella suddetta pagina. Come ricorderete nell'articolo precedente, ciascuna delle nostre opzioni vennero aggiunte alla pagina delle impostazioni "Generali" con etichetta "Opzioni Sandbox". Ora per spostarle sulla nostra pagina, andremo ad apportare alcune modifiche. Vediamo nel dettaglio esattamente quello che faremo.

Passaggio 1 - Verificare la presenza delle opzioni

Poiché stiamo creando un nostro gruppo di opzioni personalizzate, in contrasto con l'aggiunta di campi in un set esistente, abbiamo bisogno di assicurarci che le nostre opzioni esistano nel database. Per fare questo, faremo una chiamata alla funzione get_option. Se restituisce un valore negativo, aggiungeremo la nostra nuova serie di opzioni utilizzando la funzione add_option.

A tale scopo, aggiungere il seguente blocco di codice come prima riga nella funzione sandbox_initialize_theme_options:

Passaggio 2 - Refactor delle nostre sezioni

Individuare la chiamata add_settings_section e individuate l'argomento del "titolo". Adesso, dovrebbe assomigliare a questo:

Poichè queste opzioni sono sotto la pagina "Sandbox Options" (Opzioni Sandbox), non vogliamo che venga etichettata in questo modo. Quindi, cambiatela con "Display Options" (Opzioni di visualizzazione).

In secondo luogo, non andremo più ad usare la pagina delle impostazioni generali per la visualizzazione delle opzioni, quindi abbiamo bisogno di cambiare l'ultimo argomento a qualcosa di più univoco per il nostro tema. Andiamo ad usare sandbox_theme_display_options:

Passaggio 3 - Aggiornare i campi delle opzioni

Ora che abbiamo impostato una pagina univoca in cui visualizzare le opzioni, abbiamo bisogno di modificare correttamente il riferimento delle opzioni alla pagina, in modo da visualizzare le opzioni correttamente. Attualmente, tutte le nostre chiamate add_settings_field fanno riferimento alla pagina delle impostazioni generali:

Dobbiamo cambiare il quarto argomento – vale a dire, l'argomento pagina – in modo che faccia riferimento alla nostra nuova pagina opzioni e non alla pagina generale. Cambiare semplicemente la stringa in sandbox_theme_display_options. Le tre opzioni dovrebbero essere le seguenti:

Passaggio 4 - Registrare nuove opzioni

Fino a questo punto, abbiamo registrato ogni singola opzione con le opzioni sulla pagina generale:

Dato che abbiamo creato la nostra pagina opzioni e, conseguentemente, la nostra sezione, possiamo consolidare queste tre registrazioni in una singola chiamata che registrerà i campi per la nostra sezione:

Questo è forse il concetto più difficile da afferrare. Ricordate il secondo articolo della serie in cui si riportava che le opzioni sono una combinazione di campi con relativa sezione alla quale appartengono. Poiché tutti i nostri campi appartengono alla stessa sezione, cioè opzioni di visualizzazione, registriamo tale sezione con WordPress.

Passaggio 5 - Aggiornare gli elementi opzione

Non perdetevi questo: finora, le nostre opzioni sono state salvate come opzioni individuali nel database. Ciò significa che potremmo semplicemente cercarle con il loro ID (ad esempio get_option('show_header'); ma dal momento che le abbiamo aggiunte a una sezione personalizzata, sono parte di un insieme di opzioni. Ciò significa che per poter leggere le nostre opzioni, dobbiamo prima accedere all'insieme di cui fanno parte e poi richiedere l'opzione individuale.

Ora aggiorniamo ciascuno dei nostri elementi di input. Individuare le funzioni di callback nel file functions.php. La prima opzione dovrebbe assomigliare a questo:

Come accennato prima, ciascuna delle nostre opzioni è parte di un insime, quindi abbiamo bisogno di aggiornare come far riferimento a loro. Abbiamo bisogno di...

  1. Leggere l'insieme di opzioni da WordPress
  2. Accedere all'opzione individuale dell'insieme
  3. Aggiornare correttamente gli attributi dell'elemento input per far riferimento all'insieme di opzioni

Può sembrare complicato, ma i passaggi sono molto facili. Esaminare il seguente codice prestando particolare attenzione ai commenti:

Abbastanza facile, no? Poiché abbiamo tre elementi, abbiamo bisogno di apportare le modifiche corrispondenti a ogni elemento. Ogni funzione sarà più o meno la stessa con l'eccezione del nome dell'opzione. Piuttosto che show_header, si leggerà show_content o show_footer.

Una volta fatto, la versione finale dei tre elementi del modulo dovrebbe assomigliare a questa:

Passaggio 6 - Visualizzare le opzioni

Ora, siamo pronti per eseguire il rendering delle opzioni sulla nostra nuova pagina opzioni. Si tratta semplicemente di effettuare una chiamata a due funzioni Settings API:

  1. settings_fields si occupa del rendering di diverse misure di sicurezza per il modulo.
  2. do_settings_sections si occupa effettivamente del rendering delle opzioni sulla pagina.

Ogni funzione prende l'ID della pagina che sarà visualizzata. Nel nostro caso è sandbox_theme_display_options. Per visualizzare le nostre opzioni, aggiorniamo il form (modulo) come qui di seguito:

A questo punto, si dovrebbe essere in grado di aggiornare la pagina opzioni del tema Sandbox e vedere le nostre tre opzioni visualizzate come qui di seguito:

Sandbox Theme Display Options

La versione finale del file functions.php dovrebbe assomigliare a questa:


Introduzione alle opzioni social

Questa sezione è stata un po' esaustiva, lo so. Abbiamo preso un sacco di codice scritto in precedenza e lo abbiamo rielaborato per adattarlo a una pagina completamente nuova. Le Settings API possono essere impegnative! Non è sufficiente eseguire un semplice refactoring di codice esistente in una nuova pagina. Quindi, per assicurarsi di aver appreso tale processo con le pagine di opzioni personalizzate e introducendo nuove opzioni dall'inizio alla fine, introdurremo ora una serie di opzioni nuove di zecca.

Per essere coerenti con la nostra consueta metodologia, pianifichiamo esattamente cosa dobbiamo fare:

  • creare una nuova sezione di campi
  • Verranno aggiunti tre campi: uno per Facebook, uno per Twitter e uno per Google+
  • Abbiamo bisogno di aggiornare la nostra pagina opzioni per la visualizzazione di queste nuove opzioni

Creazione delle sezioni, campi e opzioni

La sezione opzioni social

In primo luogo, procediamo con l'impostare una nuova funzione e aggiungerla al "gancio" admin_init. Questa funzione sarà specifica per le nostre opzioni social. Come con le nostre opzioni di visualizzazione, sarà necessario eseguire un controllo per assicurarsi che le opzioni esistano e, se così non fosse, crearle.

Ecco la funzione iniziale. Date un occhio anche ai commenti!

Successivamente, è necessario aggiungere la nuova sezione per le opzioni. Questo viene eseguito subito dopo il codice precedente:

Ma non abbiamo ancora finito! Ricordiamoci che la terza opzione si riferisce a una funzione di callback per questa sezione. Non dimentichiamoci di definirla:

A questo punto, possiamo fare un controllo di integrità per assicurarsi che la sezione sia stata registrata correttamente con le Settings API. Torniamo indietro nella funzione sandbox_theme_display e aggiungete le due righe seguenti all'elemento form. Possono andare direttamente sotto alla loro controparte sandbox_theme_display_options:

Se avete scritto il codice correttamente, la pagina opzioni dovrebbe apparire così:

Social Options

I campi delle opzioni social

Ora siamo pronti per iniziare ad aggiungere i campi delle opzioni social alla nostra pagina. Cominciamo aggiungendo un campo per Twitter. Appena sotto la chiamata add_settings_section, scriviamo la seguente funzione:

Come vedete abbiamo definito una callback sandbox_twitter_callback, quindi abbiamo bisogno di implementare anche tale funzione. Proprio come abbiamo fatto con le opzioni precedenti, bisogna impostare l'insieme delle opzioni, creare l'elemento HTML per l'opzione e assegnare correttamente gli attributi per fare riferimento all'opzione. Una nota speciale per l'istruzione condizionale nel codice che segue, commentato per chiarezza, ma è una procedura consigliata per assicurarsi di non leggere opzioni vuote:

Infine, abbiamo nuovamente inserito la funzione sandbox_theme_intialize_social_options e registrato la nuova opzione con WordPress:

C'è una distinzione importante da fare: fino a questo punto, abbiamo sempre e solo fornito due argomenti per la funzione di register_setting, il gruppo di opzioni e il nome dell'opzione; ma questa volta, abbiamo fornito un terzo argomento: il nome di una funzione di callback. In particolare, questa funzione viene chiamata appena prima che i dati vengono salvati nel database. Consente di elaborare tutti gli argomenti prima di salvarli. In generale, questo è il momento in cui si vuole "disinfettare" i dati per impedire che del codice dannoso o ostile venga salvato.

Procediamo con la funzione:

Come si può notare il callback accetta un singolo argomento che abbiamo chiamato $input. Questo argomento è l'insieme delle opzioni che esistono per la sezione social. Dato che stiamo permettendo agli utenti di immettere del semplice testo in un campo di input, dobbiamo impedire il salvataggio di qualsiasi codice dannoso (ad esempio JavaScript o SQL).

Per fare questo, eseguiamo le seguenti operazioni:

  • Creare un array da usare per memorizzare i dati elaborati
  • Selezionare ciascuna delle opzioni e disinfettare correttamente i dati
  • Restituire aggiornato l'insieme delle opzioni

Andiamo avanti e scriviamo il codice per eseguire questa operazione. Aggiornare la funzione nel modo seguente:

Come si può notare, stiamo usando tre funzioni che contribuiscono ad assicurare che i dati inviati dall'utente siano puliti:

  • stripslashes è una funzione PHP nativa che elimina le virgolette a una stringa virgolettata.
  • strip_tags è un'altra funzione PHP nativa che rimuove i tag HTML e PHP da una stringa
  • esc_url_raw è una funzione di WordPress che impone un URL pulito

Il processo di cui sopra è aggressivo, certo, ma è decisamente efficace se si desidera salvare URL affidabili nel database.

Si noti che l'ultima riga in realtà sta restituendo il risultato della funzione apply_filters, piuttosto che la matrice stessa. Questo è un'ottimo metodo per assicurarsi che saranno chiamate anche altre funzioni collegate. Per questo tema, non esistono ovviamente altre funzioni; tuttavia, è una buona pratica per inoltrarsi in uno sviluppo più professionale del tema.

A questo punto, salvare il lavoro e aggiornare il browser. La pagina opzioni dovrebbe ora visualizzare non solo le opzioni di visualizzazione, ma anche la prima opzione social. Inoltre, si dovrebbe essere in grado di fornire un URL al profilo Twitter e salvarlo nel database.

Twitter Social Option

Aggiungere le opzioni rimanenti

L'introduzione del campo Facebook e Google+ seguirà la stessa medesima procedura come quella del supporto per Twitter. Principalmente:

  • Definire i campi delle opzioni
  • Impostare la funzione di callback

Abbastanza facile, no? Tutto il resto verrà gestito grazie alle Settings API. Naturalmente, per completezza, ecco come includere il supporto a queste reti social.

In primo luogo, definiamo i campi delle due opzioni:

Successivamente, definiremo le relative due callback:

Salvare il lavoro e, ancora una volta, aggiornare la pagina delle opzioni. Adesso ci dovrebbero essere due campi aggiuntivi, uno Facebook e uno per Google+. Provateli pure.

Una nota sulla sicurezza: anche se questo esempio è funzionale, ci sono ancora alcune misure di sicurezza che dovremmo prendere durante il salvataggio delle opzioni nel database. Più avanti nella serie, quando daremo un'occhiata a ciascuno dei campi di input in modo più approfondito, esamineremo il miglior metodo per "disinfettare" i nostri dati prima di salvarli.


Visualizzare i campi

A cosa servono le opzioni se non vengono implementate sul sito? Prima di finire questo articolo, facciamo un piccolo aggiornamento al file index del nostro tema. Vale a dire, poter controllare di far riferimento alle nostre nuove opzioni e di introdurre la possibilità di visualizzare le reti social:


Conclusione

Questo è stato senza dubbio l'articolo più intenso che abbiamo affrontato (o affronteremo) in questa particolare serie. Dovreste trovarvi più a vostro agio con l'iniziare un lavoro più complesso con le Settings API. Nei prossimi due articoli, daremo un'occhiata a come introdurre i menu di navigazione, sia a schede che di primo livello, ai nostri menu. Gli articoli dovrebbero essere più corti e con meno codice. Dopo di che, ci addentreremo su ogni tipo di elemento.

Nel frattempo, sperimentate con ciò che abbiamo visto finora!

Nota dell'autore:

Grazie mille a chi ha commentato e condiviso i loro problemi con questo particolare articolo. Speriamo che il seguito chiarirà il tutto rendendo questa serie più preziosa possibile!

A questo punto del tutorial, abbiamo aggiunto un sacco di codice; tuttavia, non si ha ancora una pagina opzione funzionante. Ce ne occuperemo nel prossimo articolo, aggiungendo anche alcune funzionalità per far prendere vita alle opzioni, quindi continuate la lettura.

Detto questo, può capitare di ricevere errori di salvataggio o di convalida con le opzioni. Gli errori di convalida sono stati corretti e il codice più recente è disponibile su GitHub, quindi assicuratevi di usare il più aggiornato. Terrò questo progetto il più aggiornato possibile man mano ci saranno problemi nel codice, oltre che risolverli in tempi brevi.


Risorse correlate

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.