Cyber Monday Sale Save up to 40% off unlimited courses, tutorials and creative assets. Cyber Monday Sale! Save Now
Advertisement
  1. Code
  2. WordPress Plugins

Creare un sistema di messaggistica personalizzata in WordPress, parte 3

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Creating a Custom WordPress Messaging System.
Creating a Custom WordPress Messaging System, Part 2
Creating a Custom WordPress Messaging System, Part 4

Italian (Italiano) translation by Roberta C (you can also view the original English article)

A questo punto della serie, abbiamo posto le basi per il nostro plugin, definito un hook personalizzato e cablato un messaggio perpetuo per mostrare come trarre vantaggio da questo hook.

Quello che non abbiamo fatto, però, è implementare i diversi tipi di messaggio, consentire l'input dell'utente e visualizzare i messaggi come risultato dell'input che l'utente ha fornito.

Ma prima di farlo, abbiamo bisogno di aggiungere il supporto per i vari tipi di messaggi, una classe interfaccia che supporti ogni tipo di messaggio e le strutture dati necessarie per la memorizzazione di tali messaggi.

Sei pronto per iniziare?

Non vedo l'ora di continuare con questo tutorial, ma ci sono alcune cose da rivedere prima di saltare nuovamente dentro il codice sorgente. Assicurarsi che il proprio sistema abbia i seguenti software installati:

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

E se stai cercando una soluzione tutto incluso, non dimenticate di provare MAMP.

La strada fin qua

Come accennato in precedenza, siamo nel bel mezzo di questa serie. Se hai perso uno dei precedenti tutorial, ecco di cosa ci siamo occupati finora:

  1. Nel primo tutorial, ci siamo concentrati sul gettare le basi minime indispensabili per iniziare con il nostro plugin.
  2. Nella seconda parte,abbiamo complicato un po' il plugin aggiungendo una pagina di amministrazione di WordPress molto base. Abbiamo anche fatto una chiamata al hook personalizzato che stiamo usando, sul lato server. Abbiamo anche gettato le basi per le impostazioni del nostro Messenger.

Ed ecco cosa ci sarà da rivedere nel tutorial finale:

  1. Finiremo unendo tutto insieme, lo vedremo in azione e renderemo disponibile al pubblico il download del plugin finale.

Per ora, però, abbiamo altri aspetti su cui concentrarci.

Torniamo al lavoro

Per tornare al lavoro (e come abbiamo esaminato nel precedente tutorial), andiamo a guardare la seguente implementazione di questo pezzo della serie:

In questo tutorial, inizieremo ad implementare le impostazioni del nostro Messenger aggiungendo il supporto per i messaggi di errore e di successo, tratteremo inoltre alcuni punti sulla sicurezza.

Nell'ultimo articolo, abbiamo cominciato a lavorare sulle impostazioni del Messegger, ma solo impostando una funzione che perennemente visualizzerà un avviso di successo ogni volta che viene caricata la pagina personalizzata.

The permanent success message we displayed in the last tutorial

In questo tutorial, aggiungeremo il supporto per i messaggi di errore, di avviso e di successo. Andremo anche a visualizzarli su schermo così possiamo avere un'idea di come funzionerà poi il Messenger.

Inoltre, faremo un altro cambio che aggiungerà il supporto per chiudere gli avvisi a discrezione dell'utente.

Questo è il piano di lavoro che andremo a eseguire in questo tutorial, diamoci da fare.

Espandere le impostazioni del Messenger

Ricordate che il ruolo delle impostazioni del Messenger  è quello di definire un modo di lavorare con messaggi personalizzati, hooks personalizzati e le API native di WordPress per visualizzare messaggi nell'ambito della zona di amministrazione di WordPress.

Per fare questo, andiamo ad espandere il lavoro che abbiamo fatto nella precedente esercitazione e da li continuiamo a crescere .

Messaggi di successo

Abbiamo iniziato con il messaggio di successo nell'esercitazione precedente, andiamo avanti. Ora, abbiamo un metodo hard-coded che visualizza un singolo metodo:

Idealmente, vorremmo introdurre una struttura di dati che supporti più messaggi, una funzione che ci permetta di aggiungere quanti messaggi vogliamo e una funzione che ci permetta di eseguire il rendering di tutti i messaggi di successo.

In primo luogo, si comincerà con un array. Si tratta di un attributo private della classe, e verrà inizializzato nel costruttore. La parte iniziale del Settings_Messenger ora dovrebbe assomigliare a questo:

Come potete vedere, abbiamo definito esattamente quello che abbiamo detto, tranne per il fatto che non abbiamo stabilito un metodo per aggiungere i nostri messaggi, e non abbiamo definito un messaggio per eseguire i nostri messaggi.

Quindi cerchiamo di farlo ora. In primo luogo, aggiungiamo un metodo che ci permetterà di aggiungere i nostri propri messaggi:

Si noti qui che stiamo usando sanitize_text_field per igienizzare i dati da passare nell'array. È possibile effettuare la sanificazione in maniera più o meno rigorosa a seconda di come si preferisce. Ho optato per questo metodo in particolare, perché ci aiuta ad arrivare al punto senza allontanarci troppo dai propositi del tutorial.

Ora definiamo un metodo che ci permetterà di visualizzare i messaggi sul front-end:

Certo, questo metodo può essere migliorato e ci metterò mano sopra alla fine di questo tutorial.

Per ora, però, mettiamo alla prova questo. Proviamo il seguente codice nel file tutsplus-custom-message.php e quindi ricarichiamo la schermata di amministrazione che abbiamo usato finora in questa serie.

Se tutto è stato implementato correttamente, si dovrebbe vedere qualcosa di simile:

Multiple success messages

Per fortuna, aggiungere i due tipi di messaggi è molto simile a quello che abbiamo fatto finora in questa sezione.

Messaggi di avviso

Aggiungere il supporto per i messaggi di avviso sarà quasi esattamente come fare quello che abbiamo fatto prima; Tuttavia, invece di nominare il nostro array e le relative funzioni con qualcosa che ha a che fare con successo, assegneremo loro qualcosa che ha a che fare con gli avvisi.

Così, in primo luogo, aggiungiamo l'array per contenere i nostri messaggi:

Poi aggiungiamo le funzioni che ci permetteranno di aggiungere avvisi al Messanger:

E infine, aggiungiamo una funzione per visualizzare la funzione quando necessario (si noti che stiamo usando la classe di nome notice-warning quando si crea l'elemento div):

Si noti che il come visualizzare questo particolare insieme di messaggi dipende da voi. Si può scegliere di visualizzarli in combinazione con quelli di successo, o si può scegliere di visualizzarli in modo completamente separato.

Per questo tutorial, ho intenzione di mantenere le cose semplici e di visualizzare al momento solo il messaggio di avviso. Così vado ad aggiungere la seguente riga di codice al file principale del plugin:

Aggiornerò l'hook nel metodo init del Settings_Messenger:

E poi aggiornerò la pagina. Supponendo di aver seguito correttamente tutto il codice sopra, si dovrebbe vedere qualcosa di quasi simile a questo:

A demonstration of a warning message

Se no, ricontrollare il codice o scaricare il file progetto allegato a questo tutorial.

Messaggi di errore

Infine, facciamo la stessa cosa per i nostri messaggi di errore. Andremo a ripetere esattamente quello che abbiamo fatto nelle sezioni precedenti, a questo punto dovrebbe diventare un po' come una seconda natura.

In primo luogo, abbiamo bisogno di aggiungere un attributo che conterrà l'array dove conserviamo i nostri messaggi di errore:

In secondo luogo, abbiamo bisogno di aggiungere una funzione che ci permetterà di aggiungere la nostra lista di errori:

E quindi dobbiamo essere in grado di visualizzarli:

Per aggiungere i nostri messaggi, torniamo al file principale del plugin e aggiungiamo il seguente codice:

Successivamente, aggiorniamo la funzione init nel Settings_Messenger, e quando si aggiorna la pagina dovrebbe apparire qualcosa come questo:

A list of error messages

E così è come abbiamo aggiunto i messaggi personalizzati alla nostra pagina di amministrazione utilizzando ganci personalizzati. But we've got one more thing to introduce before wrapping up this article.

Eliminare i messaggi

Prima di concludere, voglio mostrarvi come possiamo rendere i nostri messaggi cancellabili o, più semplicemente, fare in modo che siano removibili dall'utente. Per fare questo, possiamo prendere vantaggio di funzionalità che è già incorporato in WordPress.

Dato che fino ad ora stavamo lavorando sui messaggi di errore, usiamo i messaggi di errore come esempio. Quando si compila il codice HTML per i messaggi di errore, è possibile aggiungere un altra classe all'elemento div che contiene i messaggi.

Vale a dire, aggiungiamo is-dismissible:

Abbastanza facile, non è vero? Si ottiene un'icona che consente all'utente di fare click su di questa e, quando lo fa, il messaggio scomparirà.

Questa è una bella funzionalità che si adatta bene all'interno dell'esperienza utente di WordPress, un po' meno per il nostro fine.

Conclusione

Ora abbiamo un Settings_Messenger abbastanza funzionale. Possiamo aggiungere i messaggi di successo, i messaggi di errore e i messaggi di avviso. Possiamo eliminare i messaggi. Siamo in grado di gestire tutto questo indipendentemente da qualunque altra cosa su WordPress.

Ma se avete letto uno dei miei tutorial precedenti, sapete che io non sono un fan dei codici duplicati. Né sono un fan di avere una classe per fare molte cose. E, purtroppo, è esattamente ciò che stiamo facendo qui.

Ai fini di questa esercitazione, non intendo pianificare un refactoring del codice di questo esempio. Siamo passati attraverso questo tipo di materiale in precedenza. Inoltre, lo scopo di quello che stiamo facendo è di mostrare come lavorare con messaggi di errore personalizzati, non come applicare le più avanzate tecniche di programmazione orientata agli oggetti (anche se sarebbe bello, non è vero?).

In base al feedback che riceverò per questa serie, forse lo potrei rivisitare così possiamo vedere che tipo di lavoro e che principi possono essere applicati.

Nel frattempo che aspettate che il prossimo tutorial sia pubblicato, sappiate che sono sempre felice di rispondere a domande attraverso i commenti, potete visitare il mio blog e seguirmi su Twitter.  Di solito parlo di sviluppo WordPress e relativi argomenti.

Fino ad allora, scaricate il codice sorgente disponibile, confrontatelo con quello che abbiamo qui e assicuratevi di eseguirlo sul computer locale, quando avrete familiarità con ciò che è lasciato ci muoviamo verso la parte finale di questa serie.

Risorse

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