Share
Abbiamo raggiunto l'ultimo articolo della serie. Nell'ultimo post, abbiamo preso in considerazione l'introduzione della convalida, dell'igienizzazione e di un paio di elementi di input di base che possiamo sfruttare quando creiamo le pagine delle opzioni.
In questo articolo, daremo un'occhiata al set finale di tre opzioni e come collegarle al front-end del tema.
Prima di iniziare: Come per gli ultimi, questo articolo presuppone che tu abbia seguito il resto della serie, che abbia una copia funzionante del codice di esempio installato e che ora sia relativamente familiare con l'API Impostazioni e le opzioni del tema. Se non sei sicuro di quanto sopra, consiglio vivamente di leggere il resto degli articoli prima di immergerti in questo post.
In precedenza in questa serie, abbiamo aggiunto le caselle di controllo. Potremmo tornare indietro e rivisitare quelli, ma restiamo coerenti con ciò che abbiamo fatto fino a questo punto e introdurre nuove opzioni. Una volta terminato, puoi rivedere il codice che abbiamo aggiunto all'inizio della serie per la revisione.
Per prima cosa, introduciamo l'elemento checkbox al sandbox_theme_initialize_input_examples funzione:
Accentsconagua
add_settings_field ('Elemento casella di controllo', 'Elemento casella di controllo', 'sandbox_checkbox_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Successivamente, dobbiamo andare avanti e definire il callback che abbiamo specificato sopra. Aggiungi la seguente funzione al tuo progetto:
function sandbox_checkbox_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; $ html. = ''; echo $ html; // termina sandbox_checkbox_element_callback Rivedremo questa funzione per un po ', ma prima notiamo che ho aggiunto un elemento etichetta accanto alla casella di controllo. Le caselle di controllo hanno spesso un elemento ad esse associato che offre anche la possibilità di essere cliccato per attivare la casella di controllo. Ciò rende più semplice per gli utenti attivare un'opzione senza dover cliccare con precisione nella casella di controllo.
Per associare un'etichetta a una casella di controllo, è necessario fornire l'etichetta per attribuire il valore del ID attributo della casella di controllo a cui è associato. Abbastanza facile, giusto?
Ora, aggiorna la pagina delle opzioni e dovresti vedere il nuovo elemento visibile nella pagina delle opzioni. Ma, per ora, in realtà non salva o recupera un valore. Per prima cosa, introduciamo un valore attributo nella casella di controllo. Questo è in qualche modo arbitrario, ma è una pratica comune dare a un elemento controllato un valore di "1". Facciamolo ora:
$ html = '';
Quindi, pensiamo esattamente a cosa deve succedere quando salviamo un valore. Idealmente:
Relativamente chiaro, giusto? Piuttosto che leggere l'opzione, impostare un condizionale e verificare la presenza o l'assenza di un valore, possiamo sfruttare WordPress ' verificato funzione.
La funzione accetta tre argomenti, solo il primo dei quali è richiesto:
check = "controllato" al browserQuindi aggiorniamo il nostro codice per utilizzare questa funzione:
$ html = '';
Aggiorna la pagina e controlla l'opzione, salva e ripeti.
Se tutto ciò appare un po 'confuso, rivedi l'articolo precedente in cui trattiamo i significati di ciascun attributo su un elemento opzione.
Infine, aggiorniamo il front-end del tema per verificare questa opzione e visualizzare una stringa di testo in base a se l'opzione è stata selezionata. Ricorda che quando abbiamo creato l'elemento, gli abbiamo dato il valore di '1'. Ciò significa che quando la casella di controllo è selezionata e serializzata, manterrà il valore di uno. In poche parole, dobbiamo scrivere un condizionale che controlli il valore dell'opzione e quindi renda il testo in modo appropriato. Nel index.php, aggiungi questo blocco di codice:
La casella di controllo è stata selezionata.
La casella di controllo non è stata selezionata.
Ora, torna alla pagina delle impostazioni, attiva la casella di controllo e aggiorna la pagina.
Come accennato all'inizio di questa sezione, guarda indietro alle "Opzioni di visualizzazione" che abbiamo introdotto in precedenza in questa serie e vediamo se è molto più chiaro ora che abbiamo esaminato come introdurre e gestire gli elementi della casella di controllo.
I pulsanti radio sono elementi utili in gruppi: dopo tutto, non utilizzerai mai un singolo pulsante di opzione. La cosa sugli elementi radio è che forniscono un modo per consentire agli utenti di scegliere uno tra un insieme di opzioni che si escludono a vicenda.
Per un motivo o per un altro, i pulsanti di scelta sono spesso una sfida per gli sviluppatori di WordPress. Spero che lo renderemo il più semplice possibile da inserire nei nostri progetti. Come nel resto degli esempi di questa serie, descrivi cosa faremo:
Sembra abbastanza chiaro: andiamo avanti e aggiungiamo l'elemento del campo alla nostra pagina delle opzioni:
add_settings_field ('Elementi pulsante radio', 'Elementi pulsante radio', 'sandbox_radio_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); E implementiamo la richiamata dell'elemento radio. Innanzitutto, specificheremo il codice, quindi lo esamineremo:
function sandbox_radio_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; $ html. = ''; $ html. = ''; $ html. = ''; echo $ html; // end sandbox_radio_element_callback La prima cosa da notare quando si lavora con i pulsanti radio è che lo fanno non seguire gli esempi tipici di come impostare il ID e nome attributi. Si noti che il ID l'attributo è univoco e non ha alcuna relazione con il resto degli attributi sull'elemento. Si noti inoltre che l'etichetta associata a ciascun elemento utilizza il ID per il suo per attributo. Ciò vincola l'etichetta al pulsante di opzione in modo che gli utenti possano fare clic sull'etichetta per selezionare l'elemento radio.
Successivamente, nota che il nome gli attributi sono gli stessi per ciascun elemento radio ma il valori sono diversi. Questo è ciò che rende i pulsanti radio reciprocamente esclusivi - ogni elemento radio deve avere lo stesso nome ma i valori devono essere unici.
Infine, possiamo impostare un condizionale sulla homepage controllando il valore dell'elemento. Nel tuo tema functions.php, aggiungi il seguente blocco di codice:
La prima opzione è stata selezionata.
La seconda opzione è stata selezionata.
Carica la home page del tema, attiva le opzioni e aggiorna. Dovresti vedere le due frasi cambiare in base al valore degli elementi opzione.
L'ultimo elemento che esamineremo è l'elemento select. Questo elemento offre agli utenti un menu a discesa di opzioni tra cui scegliere. Pianifichiamo esattamente ciò che dobbiamo introdurre per questo elemento:
A questo punto della serie, questo dovrebbe essere abbastanza di routine. Iniziamo: in primo luogo, introdurremo il campo delle impostazioni:
add_settings_field ('Seleziona elemento', 'Seleziona elemento', 'sandbox_select_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Successivamente, definiremo la funzione di callback. Esamina il codice e poi ne discuteremo dopo l'esempio:
function sandbox_select_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; echo $ html; // end sandbox_radio_element_callback Innanzitutto, aggiorna la pagina delle opzioni per assicurarti che venga visualizzato l'elemento di selezione. Supponendo che lo faccia, rivediamo il codice qui sopra.
Quando definiamo l'elemento select, gliene abbiamo dato un ID attributo e a nome attribuisci molto come facciamo con il resto degli elementi che abbiamo dimostrato. Successivamente, ogni opzione ha un valore e un testo univoci che corrispondono al valore. Anche se non devi farlo, in genere ho trovato utile quando lavoro nei miei progetti. Finalmente, abbiamo approfittato del selezionato aiutante che WordPress offre. Questo è molto simile al verificato funzione che abbiamo usato nell'esempio precedente eccetto che è orientata verso opzioni selezionate.
L'ultimo passo sarà aggiornare il front-end del tema in modo che controlli il valore dell'elemento select dopo che è stato salvato. Aggiungi il seguente blocco di codice al tuo index.php:
Non visualizzare mai questo. Abbastanza ironico persino per mostrarlo.
A volte mostra questo.
Mostra sempre questo.
Rivedi la home page del tuo tema, modifica le opzioni e poi aggiorna la pagina: dovresti notare l'aggiornamento del testo in base all'opzione che hai selezionato.
Con ciò, finalmente raggiungiamo la fine di questa serie. L'API Settings è una potente funzionalità di WordPress e ci consente di implementare pagine di opzioni sicure e ben progettate, ma richiede che la utilizziamo correttamente. Sfortunatamente, questa è probabilmente una delle caratteristiche più ignorate della piattaforma da molti sviluppatori.
In definitiva, il mio obiettivo era quello di far camminare gli sviluppatori attraverso l'API sin dall'inizio per capire perché è importante, per le impostazioni, dalle pagine dei menu, per la navigazione a schede e come lavorare con ciascuno dei tipi di elementi.
Infine, ricorda che puoi trovare il codice di esempio su GitHub. Mentre continui a lavorare con l'API Impostazioni o trovi una funzione non chiara, ti preghiamo di contribuire. Mi piacerebbe molto per questa serie e il codice di esempio per continuare a fornire una fonte di istruzione per la comunità di WordPress.
verificatoselezionato