Creazione di un sistema di messaggistica WordPress personalizzato, parte 3

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.

Pronto per iniziare?

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:

  • PHP 5.6.25 e MySQL 5.6.28
  • Apache o Nginx
  • WordPress 4.6.1
  • Il tuo IDE o editor preferito

E se stai cercando una soluzione all-in-one, non dimenticare di provare MAMP.

La strada fino ad ora

Come accennato in precedenza, siamo proprio nel mezzo di questa serie. Se hai perso qualcuno dei tutorial precedenti, ecco cosa abbiamo trattato finora:

  1. Nel primo tutorial, ci siamo concentrati sulle basi per il minimo del nostro plug-in e di cosa abbiamo bisogno per iniziare.
  2. Nel secondo pezzo, abbiamo aggiunto un po 'più il plugin aggiungendo una pagina di amministrazione di WordPress molto semplice. Abbiamo anche effettuato una chiamata al gancio personalizzato che stiamo utilizzando e l'abbiamo cablato sul lato server. Abbiamo anche iniziato le basi per il nostro Impostazioni Messenger.

Ed ecco cosa esamineremo nel tutorial finale:

  1. Finiremo legando tutto insieme, vedendolo in azione e rendendo il plugin finale disponibile per il download.

Per ora, però, abbiamo altri lavori su cui focalizzarci.

Ritorno al lavoro

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.

Espansione delle impostazioni Messenger

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ì.

Messaggi di successo

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.

"; $ allowed_html = array ('div' => array ('class' => array (),), 'p' => array (),); echo wp_kses ($ html, $ allowed_html);

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. = '
    '; foreach ($ this-> success_messages come $ message) $ html. = "
  • $ messaggio
  • "; $ html. = '
'; $ html. = '
'; $ allowed_html = array ('div' => array ('class' => array (),), 'ul' => array (), 'li' => array (),); echo wp_kses ($ html, $ allowed_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.

Messaggi di avvertimento

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. = '
    '; foreach ($ this-> warning_messages as $ message) $ html. = "
  • $ messaggio
  • "; $ html. = '
'; $ html. = '
'; $ allowed_html = array ('div' => array ('class' => array (),), 'ul' => array (), 'li' => array (),); echo wp_kses ($ html, $ allowed_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. = '
    '; foreach ($ this-> error_messages come $ message) $ html. = "
  • $ messaggio
  • "; $ html. = '
'; $ html. = '
'; $ allowed_html = array ('div' => array ('class' => array (),), 'ul' => array (), 'li' => array (),); echo wp_kses ($ html, $ allowed_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 nel Settings_Messenger, e dovresti vedere qualcosa di simile quando aggiorni la pagina:

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. = '
    '; foreach ($ this-> error_messages come $ message) $ html. = "
  • $ messaggio
  • "; $ html. = '
'; $ 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.

Conclusione

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.

risorse