Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Plugins
Code

Creare un sistema di messaggistica personalizzata in WordPress, parte 2

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 1
Creating a Custom WordPress Messaging System, Part 3

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

Se sei capitato solo ora in questa serie di tutorial, stiamo costruendo il nostro sistema di messaggistica personalizzato agganciato ad WordPress, che ci permette non solo di sfruttare alcune delle API esistenti, ma anche di avere un po' più di controllo.

Dal precedente tutorial:

Come abbiamo già visto per come creare pagine di amministrazione personalizzata, è anche possibile implementare un sistema che ci permetta di impostare programmaticamente messaggi personalizzati, il loro tipo, e quando e dove per visualizzarli nella pagina di amministrazione.

Anche se non è necessario leggere la serie precedente vi raccomando fortemente di leggere il precedente tutorial. Ognuno dei tutorial di questa serie si basa sulle fondamenta del precedente (e continuerà ad essere così fino alla fine della serie).

Detto questo, lo scopo di questa serie è di dare un'introduzione su come è possibile sfruttare le API di WordPress e la programmazione ad oggetti per creare un sistema di messaggistica personalizzato che possiamo usare in un progetto per un cliente.

Ma prima di iniziare, è necessario avere alcuni prerequisiti.

Prima di iniziare

  • Leggere l'articolo precedente.
  • Installare PHP 5.6.25 e MySQL 5.6.28.
  • Installare Apache o Nginx.
  • Impostare WordPress 4.6.1.
  • Tenere a portata di mani il proprio editor di codice preferito.

Se cerchi una soluzione tutto incluso, valuta di usare MAMP e se vuoi sapere come impostare il tutto puoi leggere questa serie di articoli.

La nostra tabella di marcia

Nel caso non abbia letto il tutorial precedente, la tabella di marcia che abbiamo stabilito è la seguente:

  1. In questo tutorial, getteremo le basi per creare il minimo indispensabile di cui abbiamo bisogno per iniziare col nostro plugin .
  2. Nella seconda parte, complichiamo un po' il plugin aggiungendo una pagina base di amministrazione di WordPress. Ci sarà anche da fare una chiamata al hook personalizzato che useremo, anche sul lato server. Getteremo anche le basi per le impostazioni del nostro Messenger.
  3. 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.
  4. Finiremo unendo tutto insieme, lo vedremo in azione e renderemo disponibile al pubblico il download del plugin finale.

Ovviamente, abbiamo realizzato il punto numero uno. Così in questo tutorial, ci focalizzeremo in particolare sull'aggiungere una pagina di amministrazione base e impostare un hook personalizzato che ci permetterà di sfruttare il nostro messenger personalizzato.

Torniamo al lavoro

Ora che ci siamo occupati di questo, torniamo allo sviluppo. Ricordo, a questo punto, che dovremmo avere impostata la base del plugin in modo tale da poterlo attivare, andare fino alle impostazioni e quindi a Tuts+ Custom Message Example per vedere una pagina di amministrazione generica.

Se hai seguito finora, il codice della pagina è estremamente semplice (ne vedremo un pezzo più avanti nell'esercitazione):

Lo ribadisco perché è qua che stiamo andando ad implementare il nostro messenger personalizzato.

Per fare questo, abbiamo bisogno di introdurre le seguenti operazioni:

  1. definire un hook
  2. registrare una funzione con quel hook
  3. visualizzare qualcosa quando tale funzione viene generata

Definire un Hook personalizzato

Definire un hook personalizzato suona come qualcosa di peggiore di quando poi realmente non sia. Molti di noi hanno familiarità con le chiamate add_action e add_filter, ma come si possono utilizzare queste funzioni per effettuare una chiamata al nostro hook?

Semplice: Usando do_action e definendo la nostra azione che registreremo con WordPress. Ad esempio, prendiamo il codice sopra e appena sotto il tag h1 e facciamo le seguenti operazioni:

Non male, vero? Ora abbiamo bisogno di registrare una funzione che verrà generata ogni qualvolta viene chiamato quel hook. Prima di farlo, però, voglio assicurarmi che siamo tutti al corrente di ciò che do_action fa davvero.

Ecco cosa dice il documento di sviluppo di do_action:

Questa funzione richiama tutte le funzioni attaccate all'azione $tag. È possibile creare nuove azioni semplicemente chiamando questa funzione, specificando il nome del nuovo gancio usando il parametro $tag.

Se la definizione non è chiara, forse vi aiuterà la sua attuazione. Diamo ora un'occhiata a questo.

2. Registrare una funzione

Proprio come facciamo con qualsiasi altro tipo di funzione, dobbiamo registrare una funzione che verrà generata ogni qualvolta venga chiamato il nostro gancio tutsplus_settings_messages. Ma poiché stiamo lavorando con una programmazione orientata agli oggetti, abbiamo bisogno di progettare una classe che definisca questa funzione.

Ed è qua che le impostazioni del nostro messanger personalizzato entreranno in gioco per prime. Certo, non faremo un sacco di lavoro in termini di aggiunta di messaggi personalizzati, ma useremo il nostro gancio personalizzato, e verrà eseguito il rendering di qualcosa nella pagina.

Inoltre, stiamo gettando le fondamenta della classe che potrà essere migliorare nelle prossime lezioni. Da qui, aggiungiamo il file class-settings-messenger.php alla directory admin nel nostro plugin (non ti preoccupare, tutto questo sarà disponibile per il download).

Ricorda che non stiamo utilizzando namespaces o autoloaders in questo tutorial (anche abbiamo trattato l'argomento prima). Si noti che userò il codice previsto dal metodo init momentaneamente.

Per ora, ritorniamo al file di avvio del plugin, tutsplus-custom-message.php e aggiungiamo il seguente codice alla funzione main:

Ora andiamo a rivedere la funzione init  in Settings_Messenger e colleghiamola alla nostra azione personalizzata.

Riguardo il codice qui sopra, il primo argomento che stiamo passando ad add_action è il nome del nostro gancio personalizzato. Il secondo è un metodo che eseguirà il rendering di un messaggio nella pagina di amministrazione. Ancora non lo abbiamo scritto (quindi se si tenta di eseguire questo codice, si otterrà un errore).

Andiamo a cambiarlo.

3. Visualizzare un messaggio personalizzato

In primo luogo, creiamo una funzione nella classe Settings_Messenger chiamata display_message e andiamo a mettere una dichiarazione echo per vedere se sta mostrando nella pagina personalizzata ciò che abbiamo creato:

E quando si esegue il codice, si dovrebbe vedere qualcosa come questo. Guardando attentamente sotto il tag h1 si dovrebbe vedere la frase che abbiamo appena inserito sopra.

An example of the message we want to display

Ecco il problema, però: il messaggio che ci stiamo visualizzando non corrisponde a nessuno dei markup che WordPress utilizza per mostrare messaggi di successo, avvisi o errori.

Tratteremo questo in dettaglio più avanti nella serie, ma andiamo avanti e visualizziamo un messaggio di successo. Dopo tutto, siamo arrivati fino a questo punto, giusto? Stiamo visualizzando il nostro messaggio attraverso un hook personalizzato utilizzando la classe messenger che abbiamo creato.

Ci sono diversi modi per farlo: possiamo usare un template file, possiamo utilizzare il markup nella funzione e igienizzarla dopo o possiamo includere il file nella funzione. Per i propositi di questo tutorial, ho intenzione di creare il markup nella funzione e utilizzare wp_kses per sanitizzare il codice.

Questo non è come normalmente consiglierei di fare, ma è una strada che può essere intrapresa, e che ci introduce inoltre a wp_kses, che è una funzione che tutti dovremmo utilizzare per il rendering di informazioni nel browser.

Usiamo questo codice:

E questo dovrebbe risultare nella seguente schermata:

An example of the success message

Si noti qui che il messaggio persiste. Non c'è nessun bottone per salvare, non c'è nessun modo per nascondere questo messaggio, e non c'è alcun modo per modificare questo messaggio al di fuori del codice. Ma va bene così, perché non è questo il punto di questo esercizio.

Voglio però specificare un paio di cose:

  • Gli attributi della classe dell'elemento div che vedete sono presi in prestito direttamente da WordPress. In questo modo possiamo ereditare tali stili.
  • Alcuni messaggi possono essere respinti. Ci occuperemo di questo in un futuro tutorial.
  • L'array $allowed_html passato nel wp_kses è quello che fa in modo che nulla tranne gli elementi e gli attributi specificati venga renderizzato. È un buon modo, forte e pulito per sanitizzare i dati.

E questo è tutto ciò che abbiamo trattato in questo tutorial in particolare; Tuttavia, abbiamo appena iniziato.

Conclusione

Come procederemo lungo questa serie, vedremo come gestire i messaggi di successo, i messaggi di errore e i messaggi di avviso e come inserire la possibilità di chiudere questi messaggi.

Inoltre, saremo in grado di vedere come utilizzare gli input dell'utente per controllare il tipo di messaggio che viene visualizzato.

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 al prossimo tutorial, studia il codice, scarica i file e prova ad eseguirlo sul computer locale.  Nella prossima parte, partiremo esattamente da dove abbiamo lasciato.

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.