A questo punto di questa serie, abbiamo gettato le basi per il nostro plugin, definito un hook personalizzato e cablato un messaggio perpetuo per mostrare come possiamo trarre vantaggio da detto hook.
Cosa noi non hanno fatto, però, è implementare vari tipi di messaggi, consentire l'input dell'utente e visualizzare i messaggi in base al risultato dell'input fornito dall'utente.
Ma prima di farlo, dobbiamo aggiungere il supporto per i vari tipi di messaggi, un'interfaccia di classe che supporterà ogni tipo di messaggio e le strutture dati necessarie per archiviare tali messaggi.
Non vedo l'ora di continuare con questo tutorial, ma ci sono alcune cose che dobbiamo rivedere prima di tornare al codice sorgente. Assicurati che il tuo sistema abbia installato il seguente software:
E se stai cercando una soluzione all-in-one, non dimenticare di provare MAMP.
Come accennato in precedenza, siamo proprio nel mezzo di questa serie. Se hai perso qualcuno dei tutorial precedenti, ecco cosa abbiamo trattato finora:
Ed ecco cosa esamineremo nel tutorial finale:
Per ora, però, abbiamo altri lavori su cui focalizzarci.
Mentre torniamo al lavoro (e come abbiamo esaminato in precedenti tutorial), guarderemo alla seguente implementazione durante questo pezzo della serie:
In questo tutorial, inizieremo ad implementare le nostre Impostazioni Messenger aggiungendo il supporto per errori e messaggi di successo oltre a coprire alcuni punti sulla sicurezza.
Nell'ultimo articolo, abbiamo iniziato a lavorare su Impostazioni Messenger, ma solo nella configurazione di una funzione che visualizzerà perennemente un avviso di successo ogni volta che viene caricata la nostra pagina personalizzata.
In questo tutorial, aggiungeremo supporto per errori, avvisi e messaggi di successo. Li mostreremo anche tutti sullo schermo in modo che possiamo avere un'idea di come funzionerà il messenger.
Inoltre, aggiungeremo un'altra modifica che aggiungerà il supporto per l'eliminazione delle notifiche a discrezione dell'utente.
Con questo come il nostro piano per il lavoro che dobbiamo fare in questo tutorial, iniziamo.
Ricorda che l'intero punto di Impostazioni Messenger è definire un modo in cui possiamo lavorare con messaggi personalizzati, ganci personalizzati e l'API nativa di WordPress per la visualizzazione di messaggi nel contesto dell'area di amministrazione di WordPress.
Per fare questo, espanderemo il lavoro che abbiamo svolto nel tutorial precedente e continueremo a far crescere il nostro lavoro da lì.
Da quando abbiamo iniziato con il messaggio di successo nel precedente tutorial, andiamo avanti e riprendiamo con quello. Al momento, abbiamo un metodo codificato che mostra un singolo metodo:
Hai visualizzato correttamente un messaggio di successo personalizzato.
Idealmente, vorremmo introdurre una struttura dati che supporterà più messaggi, una funzione che ci consentirà di aggiungere molti messaggi e una funzione che ci consentirà di visualizzare tutti i messaggi di successo.
Innanzitutto, inizieremo con un array. Questo sarà un attributo privato della classe e verrà inizializzato nel costruttore. La parte iniziale del Settings_Messenger
ora dovrebbe assomigliare a questo:
success_messages = array ();
E come puoi vedere, abbiamo definito esattamente quello che abbiamo detto, tranne che non abbiamo definito un metodo per aggiungere i nostri messaggi e non abbiamo definito un messaggio per rendere i nostri messaggi.
Quindi facciamolo ora. Innanzitutto, aggiungiamo un metodo che ci consentirà di aggiungere i nostri messaggi:
success_messages [] = sanitize_text_field ($ message);
Nota qui che stiamo usando sanitize_text_field
per disinfettare i dati che entrano nell'array. Puoi rendere la sanificazione più rigida o rilassata come preferisci. Ho optato per questo particolare metodo in quanto aiuta ad ottenere il punto attraverso senza deviare dal punto del tutorial.
Ora definiamo un metodo che ci permetterà di rendere i messaggi sul front-end:
success_messages)) return; $ html = ""; $ html. = ''; $ allowed_html = array ('div' => array ('class' => array (),), 'ul' => array (), 'li' => array (),); echo wp_kses ($ html, $ allowed_html);'; foreach ($ this-> success_messages come $ message) $ html. = "
'; $ html. = '- $ messaggio
"; $ html. = '
Certo, questo metodo può essere ridefinito, e lo toccherò nella conclusione di questo post.
Per ora, però, proviamo questo. Prova il seguente codice nel tutsplus-custom-message.php
file e quindi ricaricare la schermata di amministrazione che abbiamo utilizzato in tutta la serie finora.
dentro(); $ messenger-> add_success_message ('Questo è un messaggio di prova'); $ messenger-> add_success_message ('Questo è anche un messaggio di test.');
Se tutto è stato implementato correttamente, dovresti vedere qualcosa del genere:
Fortunatamente, aggiungere i prossimi due tipi di messaggi è molto simile a quello che abbiamo fatto in questa sezione.
Aggiungere supporto per i messaggi di avviso sarà quasi esattamente come quello che abbiamo fatto prima; tuttavia, piuttosto che nominare il nostro array e le relative funzioni che hanno qualcosa a che fare con il successo, le chiameremo come qualcosa che ha a che fare con gli avvertimenti.
Quindi, per prima cosa, aggiungiamo l'array per contenere i nostri messaggi:
success_messages = array (); $ this-> warning_messages = array ();
Quindi aggiungiamo le funzioni che ci permetteranno di aggiungere avvertimenti al messenger:
warning_messages [] = sanitize_text_field ($ message);
E infine, aggiungiamo una funzione per visualizzare la funzione quando necessario (notiamo che stiamo usando il avviso di allerta
nome della classe durante la creazione di div
elemento):
warning_messages)) return; $ html = ""; $ html. = ''; $ allowed_html = array ('div' => array ('class' => array (),), 'ul' => array (), 'li' => array (),); echo wp_kses ($ html, $ allowed_html);'; foreach ($ this-> warning_messages as $ message) $ html. = "
'; $ html. = '- $ messaggio
"; $ html. = '
Tieni presente che il modo in cui scegli di visualizzare questo particolare set di messaggi spetta a te. Puoi scegliere di visualizzarlo insieme ai messaggi di successo, oppure puoi scegliere di visualizzarlo in un modo completamente separato.
Per questo tutorial, lo terrò semplice e visualizzerò solo il messaggio di avviso alla volta. Quindi aggiungerò la seguente riga di codice al file del plugin principale:
add_warning_message ('Attenzione! Pericolo Will Robinson!');
Aggiornerò il hook nel metodo init di Settings_Messenger
:
E poi aggiornerò la pagina. Supponendo che tu abbia seguito correttamente tutto il codice sopra, dovresti vedere qualcosa di simile a questo:
In caso contrario, ricontrolla il tuo codice o scarica il file di progetto allegato a questo tutorial e andremo da lì.
Messaggio di errore
Infine, facciamo la stessa cosa per i nostri messaggi di errore. Ripeteremo esattamente ciò che abbiamo fatto nelle sezioni precedenti, quindi a questo punto dovrebbe diventare un po 'di seconda natura.
Per prima cosa, dobbiamo aggiungere un attributo che manterrà l'array in cui archiviamo i nostri messaggi di errore:
success_messages = array (); $ this-> warning_messages = array (); $ this-> error_messages = array ();In secondo luogo, dobbiamo aggiungere una funzione che ci permetterà di aggiungere alla nostra lista di errori:
error_messages [] = sanitize_text_field ($ message);E poi dobbiamo essere in grado di visualizzarli:
error_messages)) return; $ html = ""; $ html. = ''; $ allowed_html = array ('div' => array ('class' => array (),), 'ul' => array (), 'li' => array (),); echo wp_kses ($ html, $ allowed_html);'; foreach ($ this-> error_messages come $ message) $ html. = "
'; $ html. = '- $ messaggio
"; $ html. = 'Per aggiungere i tuoi messaggi, torna al file del plugin principale e aggiungi il seguente codice:
add_error_message ('Credi ciò che vuoi, ma né tu né io siamo speciali.'); $ messenger-> add_error_message ('Nella mia vita, mentre mi stavo facendo strada, ho sempre fatto la domanda, sono la persona più potente nella stanza?'); $ messenger-> add_error_message ('Le persone mi hanno sempre detto che non si tratta mai della destinazione, ma del viaggio, ma se la destinazione sei tu?');Quindi, aggiorna il
dentro
funzione nelSettings_Messenger
, e dovresti vedere qualcosa di simile quando aggiorni la pagina:E quello è come si aggiungono messaggi personalizzati alla pagina di amministrazione utilizzando i ganci personalizzati. Ma abbiamo ancora una cosa da presentare prima di concludere questo articolo.
Eliminare i messaggi
Prima di concludere, voglio mostrare come possiamo rendere i nostri messaggi eliminabili o, più semplicemente, in grado di essere rimossi dall'utente. Per fare questo, possiamo sfruttare le funzionalità già integrate in WordPress.
Dato che stavamo solo lavorando sui messaggi di errore, userò i messaggi di errore come esempio. Quando si crea l'HTML per i messaggi di errore, aggiungere un altro nome di classe al
div
elemento che contiene il messaggio (s).Cioè, aggiungi
è-dismissible
:"; $ html. = '
Abbastanza facile, no? Si ottiene un'icona che consente all'utente di fare clic su di esso e, quando lo fanno, il messaggio scomparirà.
Questa è una bella funzionalità che si adatta bene all'esperienza utente di WordPress per un lavoro molto, molto piccolo, da parte nostra.
Ora abbiamo un abbastanza funzionale Settings_Messenger
. Possiamo aggiungere messaggi di successo, messaggi di errore e messaggi di avviso. Possiamo ignorare i messaggi. Possiamo gestire tutto questo indipendentemente da qualsiasi cosa WordPress stia facendo.
Ma se hai letto uno dei miei tutorial precedenti, sai che non sono un fan di avere il codice duplicato. Nemmeno io sono fan di avere una classe fare molte cose. E, sfortunatamente, è esattamente quello che stiamo facendo qui.
Ai fini di questo tutorial, non ho intenzione di refactoring il codice che è in questo esempio. Abbiamo già attraversato questo tipo di materiale. Inoltre, lo scopo di ciò che stiamo facendo è mostrare come lavorare con i messaggi di errore personalizzati, non come applicare le tecniche orientate agli oggetti più avanzate che possiamo (anche se sarebbe bello, vero?).
A seconda del feedback che ricevo per questa serie, forse lo rivisiteremo e lo reimporremo in modo che possiamo vedere quanto lavoro può essere fatto e quanti principi possono essere applicati.
Mentre aspetti che venga pubblicato il prossimo tutorial, tieni presente che sono sempre felice di rispondere alle domande tramite i commenti, e puoi anche controllare il mio blog e seguirmi su Twitter. Di solito parlo anche dello sviluppo del software all'interno di WordPress e di argomenti tangenziali.
Fino ad allora, scarica il codice sorgente disponibile, confrontalo con quello che abbiamo qui e assicurati di eseguirlo sul tuo computer locale in modo da avere familiarità con ciò che rimane mentre ci spostiamo nella parte finale di questa serie.