Share
Se ti stai appena iscrivendo a noi, abbiamo trattato molti argomenti di questa serie: abbiamo tentato di fornire una panoramica completa dell'API delle impostazioni di WordPress e delle relative funzioni. Abbiamo discusso impostazioni, opzioni, navigazione e menu. Abbiamo anche lavorato su esempi pratici che utilizzano ciascuno degli argomenti trattati.
Abbiamo quasi finito. Negli ultimi due articoli di questa serie, daremo un'occhiata all'igienizzazione, alla convalida e agli elementi di input di base che possiamo usare nei nostri plugin e temi WordPress.
Prima di iniziare: 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.
Prima di iniziare a scrivere qualsiasi codice, dobbiamo capire esattamente che cosa realizzeremo, vale a dire convalida e sanificazione. In poche parole, questi sono i due aspetti della scrittura e della lettura sicura dei dati da una pagina di opzioni di WordPress e dal database sottostante.
Ci addentreremo molto più in profondità mentre osserviamo ciascuno dei tipi di input e lavoriamo con gli esempi, ma diamo un contesto a ciò che stiamo per fare:
Forse il riassunto più conciso è che la convalida dovrebbe essere fatta prima di scrivere i dati nel database e la disinfezione dovrebbe essere fatta tra la lettura dei dati dal database e l'invio al browser.
Spesso, la convalida è legata al salvataggio dei dati e la disinfezione è correlata al recupero dei dati, ma è anche completamente possibile disinfettare i dati dopo aver superato la convalida per assicurarsi che nel database vengano salvati solo dati puliti. Quando lavoriamo con il nostro codice, è più facile farlo; tuttavia, non possiamo sempre dipendere da altri sviluppatori per aver disinfettato i loro dati, quindi la responsabilità di disinfettare tutti i dati che escono dal database cade su di noi.
Per semplificare la comprensione della convalida e dell'igienizzazione, introduciamo una nuova scheda nella nostra pagina delle opzioni. Se hai introdotto un nuovo menu di primo livello, questo richiederà anche l'aggiunta di un nuovo elemento di sottomenu e l'aggiornamento della scheda di visualizzazione delle opzioni. Occupiamoci di questo ora.
In primo luogo, individuare il sandbox_example_theme_menu funzione e aggiungere il seguente sottomenu:
Accentsconagua
add_submenu_page ('sandbox_theme_menu', 'Input Examples', 'Input Examples', 'administrator', 'sandbox_theme_input_examples', create_function (null, 'sandbox_theme_display ("input_examples");')); Successivamente, dobbiamo andare avanti e spegnere una funzione che creerà il gruppo di opzioni per la nostra nuova scheda delle impostazioni. Supponendo che tu abbia seguito la serie, questo dovrebbe essere facile da seguire:
function sandbox_theme_initialize_input_examples () if (false == get_option ('sandbox_theme_input_examples')) add_option ('sandbox_theme_input_examples'); // end if // end sandbox_theme_initialize_input_examples add_action ('admin_init', 'sandbox_theme_initialize_input_examples'); Infine, dobbiamo aggiornare il sandbox_theme_display funzione per rendere la scheda e selezionarla correttamente quando si accede tramite le schede o la voce di sottomenu. Innanzitutto, aggiorniamo il condizionale che esamina la stringa di query e gli argomenti della funzione. In particolare, ha bisogno di gestire il caso per gli esempi di input. Aggiorna il condizionale per assomigliare a questo:
if (isset ($ _GET ['tab'])) $ active_tab = $ _GET ['tab']; else if ($ active_tab == 'social_options') $ active_tab = 'social_options'; else if ($ active_tab == 'input_examples') $ active_tab = 'input_examples'; else $ active_tab = 'display_options'; // end if / else
Successivamente, dobbiamo aggiungere una nuova scheda alla navigazione. Aggiorna il nav-tab-wrapper contenitore per includere questa nuova ancora:
"> Esempi di input
Infine, dobbiamo aggiungere un altro condizionale all'elemento del modulo responsabile della visualizzazione delle opzioni. Aggiorna il condizionale per assomigliare a questo:
if ($ active_tab == 'display_options') settings_fields ('sandbox_theme_display_options'); do_settings_sections ('sandbox_theme_display_options'); elseif ($ active_tab == 'social_options') settings_fields ('sandbox_theme_social_options'); do_settings_sections ('sandbox_theme_social_options'); else settings_fields ('sandbox_theme_input_examples'); do_settings_sections ('sandbox_theme_input_examples'); // end if / else Supponendo di aver incluso tutto il codice correttamente, il tuo pannello di amministrazione dovrebbe ora assomigliare a questo:
Siamo ora pronti per iniziare a introdurre nuovi elementi di opzione e le funzionalità di convalida e sanitizzazione. Se il codice precedente non è chiaro, assicurati di controllare gli articoli precedenti nella serie poiché le impostazioni, le pagine di menu e le schede sono state tutte coperte.
Esistono cinque tipi di elementi di base che possiamo utilizzare per l'inserimento nelle nostre pagine di opzioni di WordPress. Si tratta di input, aree di testo, caselle di controllo, pulsanti di opzione e caselle di selezione. Nel resto di questo articolo, daremo un'occhiata agli elementi di input e alle textareas e passeremo in rassegna gli ultimi tre nell'articolo finale della serie.
Gli elementi di input sono ideali per le situazioni in cui è necessario acquisire una piccola quantità di testo da un utente. Questo può essere qualcosa come il loro nome o numero di telefono o qualcosa di leggermente più complesso come un URL, il loro indirizzo email o una chiave API. In realtà, stiamo già utilizzando i campi di input nella pagina "Opzioni sociali" quando chiediamo gli indirizzi dei profili di social network dell'utente.
La convalida dell'input di testo può essere un'operazione complessa soprattutto se si desidera applicare determinati vincoli. Ad esempio, i numeri di telefono seguono un formato specifico e se chiedi a un utente il numero di telefono, è possibile impostare una funzione che determina se il numero di telefono rispetta il formato rigoroso. Ovviamente, non possiamo catturare tutti questi casi d'uso nei nostri esempi qui perché è semplicemente un campo troppo ampio.
Invece, quello che faremo è garantire che nessun codice dannoso venga scritto nel database. Ciò significa che quando un utente inserisce del testo nella nostra casella di testo, rimuoveremo tutti i tag HTML e i caratteri potenzialmente problematici. Ma prima di farlo, introduciamo una nuova opzione, comprendiamo il markup e vediamo cosa succede se noi non imporre qualsiasi tipo di convalida.
Vai avanti e presenta la nuova sezione e il campo usando il sandbox_theme_initialize_input_examples funzione:
add_settings_section ('input_examples_section', 'Input Examples', 'sandbox_input_examples_callback', 'sandbox_theme_input_examples'); add_settings_field ('Input Element', 'Input Element', 'sandbox_input_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); register_setting ('sandbox_theme_input_examples', 'sandbox_theme_input_examples'); Quindi, definire il callback per la sezione:
function sandbox_input_examples_callback () echo 'Fornisce esempi dei cinque tipi di elementi base.
';
Infine, introduci l'elemento di input effettivo che utilizzeremo per acquisire l'input:
function sandbox_input_element_callback () $ options = get_option ('sandbox_theme_input_examples'); // Render l'eco di output ''; La pagina delle opzioni dovrebbe ora essere simile alla seguente immagine:
Fino a questo punto, abbiamo creato i nostri elementi di opzione e ho detto che alla fine avremmo discusso ciascuno degli attributi più avanti nella serie. Questo è l'articolo in cui iniziamo a guardare al significato del id e nome attributi.
Si noti che all'inizio della funzione, leggiamo le opzioni per questa particolare scheda usando WordPress ' get_option funzione. Questa funzione restituirà le opzioni in un array. Il id l'attributo dell'elemento input identifica il valore di questo elemento nella matrice. Il nome attributo è il nome dell'array digitato con l'ID. Ha senso?
Per essere completo, pensa in questo modo:
sandbox_theme_input_examples id attributo. In questo esempio, è "input_example"sandbox_theme_input_examples [input_example] Così la id dell'elemento rappresenta la chiave del valore nell'array delle opzioni, il nome attributo rappresenta il nome dell'array con la chiave del valore nell'array.
A questo punto, è completamente possibile iniziare a immettere valori nell'elemento di input e salvare l'opzione. Vai avanti e provalo: imposta un valore, fai clic su "Salva modifiche" e dovresti vedere l'elemento di input visualizzare il valore appena creato. Ma ecco il problema: prova ad incollare qualcosa di simile nel campo di input:
Quindi, salta su index.php e aggiungi il seguente blocco di codice:
Aggiorna la pagina iniziale e dovresti notare una iframe visualizzata nel mezzo della home page del tema:
Sembra un problema relativamente secondario, ma questo è esattamente il tipo di cosa che dobbiamo prevenire. Non vogliamo che gli utenti abbiano quel tipo di controllo sul database, sulle pagine del sito e così via. Ovviamente, salvare un semplice iframe è un esempio secondario: se gli utenti sono in grado di inserire JavaScript, possono influenzare determinati aspetti dell'intero sito. Ancora più serio, se gli utenti sono in grado di inserire SQL dannoso, il tuo database potrebbe essere compromesso.
Quindi introduciamo alcune convalide. Come accennato in precedenza, vogliamo rimuovere qualsiasi markup e caratteri problematici. Per fare ciò, dobbiamo prima definire un callback di convalida per la nostra sezione di elementi di input. Per fare questo, rivisitiamo il register_setting chiama e aggiornalo in modo che assomigli a questo:
register_setting ('sandbox_theme_input_examples', 'sandbox_theme_input_examples', 'sandbox_theme_validate_input_examples'); Quindi, definiamo tale funzione:
function sandbox_theme_validate_input_examples ($ input) // end sandbox_theme_validate_input_examples
Si noti che questa funzione accetta un singolo parametro che abbiamo nominato ingresso. Questo argomento rappresenta il set di opzioni non convalidato che WordPress sta inviando a questa funzione dalla pagina delle opzioni che abbiamo appena salvato. Nota anche che quando aggiungiamo ulteriori elementi di opzione, useremo questa stessa funzione.
La creazione di una funzione di convalida in genere segue tre passaggi:
Facciamolo ora. Dai un'occhiata alla seguente implementazione prestando molta attenzione ai commenti:
function sandbox_theme_validate_input_examples ($ input) // Crea il nostro array per la memorizzazione delle opzioni convalidate $ output = array (); // Passa in rassegna ciascuna delle opzioni in entrata foreach ($ input come $ key => $ valore) // Verifica se l'opzione corrente ha un valore. Se è così, elaboralo. if (isset ($ input [$ key])) // Elimina tutti i tag HTML e PHP e gestisci correttamente le stringhe quotate $ output [$ key] = strip_tags (stripslashes ($ input [$ key])); // end if // end foreach // Restituisce l'array che elabora eventuali funzioni aggiuntive filtrate da questa azione return apply_filters ('sandbox_theme_validate_input_examples', $ output, $ input); La maggior parte del codice dovrebbe essere relativamente semplice, ma i due aspetti più importanti sono presenti nella dichiarazione all'interno della dichiarazione condizionale e nella dichiarazione di ritorno.
strip_tags funzione, nativa di PHP, per rimuovere tutti i tag HTML e PHPstripslashes funzione, che è un'altra funzione nativa di PHP, che gestirà correttamente le virgolette attorno a una stringa.Alla fine, avremmo potuto semplicemente restituire il $ uscita array alla fine della funzione, ma restituendo il risultato della chiamata a apply_filters è una buona pratica. Sebbene superi lo scopo di questo articolo, vale la pena notare che questa istruzione chiama fondamentalmente qualsiasi altra funzione che viene filtrata da questa particolare funzione prima di restituire il valore.
Ora prova a dare qualche esempio di input nell'elemento input. Prova a fornire una semplice stringa, un numero di telefono, un indirizzo email, un URL, un blocco di HTML, una riga di JavaScript e così via. Pulito, eh?
Infine, rivisitiamo index.php e fornire un'ultima modifica per dimostrare come possiamo eseguire l'igienizzazione dell'output. Ricorda, è buona norma disinfettare le opzioni anche se stai lavorando con valori che non provengono dal tuo lavoro.
Individua la riga che legge:
E aggiornalo in modo che legga:
Il sanitize_text_field la funzione è un'altra funzione nativa di WordPress che è specificatamente pensata per sanitare l'input dell'utente dai campi di testo o dal database.
Vedremo di più in questo articolo e nel prossimo, ma c'è un elenco completo di queste funzioni disponibili nel codice WordPress.
Guardando gli elementi di input, abbiamo coperto Un sacco di terra. Fortunatamente, molti degli stessi principi si applicano non solo alle textareas, ma anche al resto degli elementi. In quanto tale, non dovremmo passare tanto tempo con ciascun elemento. Questo ci libererà per guardare alcune delle idiosincrasie che vengono con ciascuno dei tipi di elementi.
Per ora, introduciamo un elemento textarea. Nel nostro esempio, questo particolare elemento consentirà agli utenti di inserire alcune frasi su se stessi - pensate a una breve biografia. Innanzitutto, aggiungi la seguente chiamata al sandbox_theme_initialize_input_examples funzione:
add_settings_field ('Textarea Element', 'Textarea Element', 'sandbox_textarea_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Successivamente, definiamo il callback necessario per il rendering della textarea:
function sandbox_textarea_element_callback () $ options = get_option ('sandbox_theme_input_examples'); // Render l'eco di output ''; Si noti che questa chiamata è molto simile all'elemento di input sopra definito. In particolare, abbiamo fornito un id attributo per dare a questo valore una chiave nell'array delle opzioni e abbiamo specificato il nome esatto e la chiave nell'elemento nome attributo. Abbiamo anche dato una dimensione particolare alla textarea, sebbene questo sia puramente arbitrario.
Ricorda che poiché questo elemento appartiene alla stessa sezione dell'elemento di input, viene elaborato utilizzando la stessa funzione di convalida. Come tale, otteniamo lo stesso livello di convalida gratuitamente. Provalo: prova a salvare markup, script e altri tipi di codice utilizzando la textarea.
Infine, aggiorniamo la pagina pubblica del nostro tema per recuperare questo valore e disinfettarlo correttamente per la visualizzazione. Nel index.php, aggiungi il seguente blocco di codice:
Sebbene sia praticamente la stessa cosa del campo di input, dobbiamo assicurarci di essere completi nella nostra validazione e sanificazione.
Sebbene abbiamo solo esaminato due tipi di elementi, abbiamo coperto molto terreno. Oltre ad aggiornare il nostro tema, abbiamo anche implementato la convalida di base e iniziato a esplorare le funzionalità di sanitizzazione di WordPress.
Nell'articolo finale, daremo un'occhiata ai restanti tre tipi di elementi e come gestirli utilizzando la convalida e la disinfezione. Nel frattempo, sperimenta con alcune delle cose che abbiamo trattato qui e ricorda di rivedere gli articoli di origine correlati collegati in fondo al post.
get_optionstrip_tagsstripslashes apply_filterssanitize_text_field