Creazione di un sistema di messaggistica WordPress personalizzato, parte 2

Se ti stai avvicinando a questa particolare serie, stiamo creando un nostro sistema di messaggistica personalizzato che si aggancia a WordPress, consentendoci di sfruttare alcune delle API esistenti, ma anche di consentirci un po 'di più controllo.

Dal precedente tutorial:

Ma proprio come abbiamo visto come creare pagine di amministrazione personalizzate, è anche possibile implementare un sistema che ci consente di impostare in modo programmatico i nostri messaggi personalizzati, il loro tipo e quando e dove visualizzarli nella pagina di amministrazione. 

Anche se non è necessario leggere la serie che precede questo, consiglio vivamente di leggere il tutorial precedente. Ognuno di questi si basa sul tutorial precedente (e continueremo a farlo per il resto della serie).

Detto questo, l'intero scopo di questa serie è di fornire un'introduzione su come possiamo sfruttare l'API di WordPress e la programmazione orientata agli oggetti per creare un sistema di messaggistica personalizzato che possiamo usare durante il lavoro che potremmo fare per un cliente.

Ma prima di iniziare, ci sono alcuni prerequisiti che dovresti avere in atto.

Prima di iniziare

  • Leggi l'articolo precedente.
  • Installa PHP 5.6.25 e MySQL 5.6.28.
  • Installa Apache o Nginx.
  • Imposta WordPress 4.6.1.
  • Avere il tuo IDE o editor preferito pronto.

Se stai cercando una soluzione all-in-one, controlla MAMP e, se sei interessato a vedere come si combina tutto questo, consulta questi articoli.

La nostra tabella di marcia

Se non hai letto il tutorial precedente, la tabella di marcia che abbiamo preparato per questo tutorial è la seguente:

  1. In questo tutorial, stiamo per gettare le basi per il minimo indispensabile del nostro plug-in e di cosa abbiamo bisogno per iniziare.
  2. Nel secondo pezzo, aggiungeremo un po 'più il plugin aggiungendo una pagina di amministrazione di WordPress molto semplice. Chiameremo anche il hook personalizzato che useremo e lo collegheremo sul lato server. Inizieremo anche le basi per il nostro Impostazioni Messenger.
  3. 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.
  4. Finiremo legando tutto insieme, vedendolo in azione e rendendo il plugin finale disponibile per il download.

Ovviamente, abbiamo raggiunto il numero uno. Quindi, in questo tutorial, ci concentreremo specificamente sull'aggiunta di una pagina di amministrazione di base e sulla configurazione di un hook personalizzato che ci consentirà di sfruttare il nostro messenger personalizzato.

Rimettersi al lavoro

Con tutto questo, torniamo allo sviluppo. Ricorda che, a questo punto, dovremmo avere le fondamenta di questo plugin configurato in modo tale da essere in grado di attivarlo e navigare impostazioni e poi Tuts + Esempio di messaggio personalizzato per vedere una pagina di amministrazione generica.

Se hai seguito fino ad ora, il codice per la pagina è estremamente semplice (e ne vedremo uno scatto più avanti nel tutorial), inoltre:

In realtà non visualizzeremo opzioni in questa pagina. Invece, useremo questa pagina per dimostrare come collegarci al nostro messenger personalizzato.

Sto ripetendo questo perché è qui che inizieremo ad implementare il nostro messenger personalizzato.

Per fare questo, avremo bisogno di introdurre quanto segue:

  1. un amo che definiamo
  2. una funzione che è registrata con quel gancio
  3. visualizzare qualcosa quando viene attivata questa funzione

Definizione di un gancio personalizzato

Definire un hook personalizzato suona molto più intimidatorio di quanto non sia in realtà. Molti di noi hanno familiarità con le chiamate add_action e add_filter, ma come possiamo usare queste funzioni per fare una chiamata al nostro proprio ganci?

Facile: usiamo do_action e definiamo la nostra azione che registreremo con WordPress. Ad esempio, prendi il codice sopra e, appena sotto il h1 tag, facciamo quanto segue:

In realtà non visualizzeremo opzioni in questa pagina. Invece, useremo questa pagina per dimostrare come collegarci al nostro messenger personalizzato.

Non male, giusto? Ora dobbiamo registrare una funzione che si attiva ogni volta che viene chiamato quel hook. Prima di farlo, però, voglio essere sicuro che siamo tutti sulla stessa pagina di cosa do_action davvero.

Ecco cosa dice il documento dello sviluppatore do_action:

Questa funzione richiama tutte le funzioni associate al hook di azione $ tag. È possibile creare nuovi hook di azioni semplicemente chiamando questa funzione, specificando il nome del nuovo hook usando $ tag parametro.

Se la definizione non è chiara, forse la sua implementazione sarà di aiuto. Diamo un'occhiata a questo ora.

2. Registrare una funzione

Proprio come facciamo con qualsiasi altro tipo di funzione, abbiamo bisogno di registrare una funzione che sparerà ogni volta che il nostro tutsplus_settings_messages il gancio è stato sparato. Ma dal momento che stiamo lavorando con la programmazione orientata agli oggetti, avremo bisogno di progettare una classe che definisca questa funzione.

Ed è qui che entrano in gioco le nostre impostazioni personalizzate. Certo, non lavoreremo molto in termini di aggiunta di messaggi personalizzati, ma noi volontà si sta utilizzando il nostro hook personalizzato e verrà eseguito il rendering qualcosa sulla pagina.

Inoltre, getteremo le basi della classe che miglioreremo nelle prossime lezioni. Da qui, aggiungi il file class-settings-messenger.php al Admin directory nel tuo plugin (e non preoccuparti, tutto questo sarà disponibile per il download).

Ricorda che in questo tutorial non usiamo namespace o caricatori automatici (anche se li abbiamo già trattati in precedenza). Tieni presente che fornirò il codice per dentro metodo momentaneamente. 

Per ora, torna al file bootstrap del plugin, tutsplus-custom-message.php, e aggiungi il seguente codice alla funzione principale:

dentro(); $ messenger = new Settings_Messenger (); $ Messenger-> init (); 

Ora rivisitiamo la funzione init in Settings_Messenger e collegalo alla nostra azione personalizzata.

Si noti nel codice sopra, il primo argomento a cui stiamo passando add_action è il nome del nostro gancio personalizzato. Il secondo sarà un metodo che renderà un messaggio nella pagina di amministrazione. Non l'abbiamo ancora scritto (quindi se provi a eseguire questo codice, riceverai un errore).

Ma cambiamo.

3. Visualizzazione di un messaggio personalizzato

Innanzitutto, crea una funzione nel Settings_Messenger classe chiamata display_message, e facciamo semplicemente eco a un'istruzione per vedere se viene visualizzata nella pagina personalizzata che abbiamo creato:

E quando esegui il codice, dovresti vedere qualcosa di simile. Guarda da vicino sotto il h1 tag e dovresti vedere la frase che abbiamo incluso sopra.

Ecco il problema, tuttavia: il messaggio che stiamo visualizzando non corrisponde a nessuno dei markup utilizzati da WordPress per mostrare messaggi, avvertenze o errori di successo. 

Ne parleremo in dettaglio più avanti nella serie, ma andiamo avanti e mostriamo un messaggio di successo. Dopotutto, siamo arrivati ​​fin qui, giusto? Stiamo visualizzando il nostro messaggio tramite un hook personalizzato utilizzando una classe di messaggistica che abbiamo creato.

Ci sono diversi modi in cui possiamo fare ciò: possiamo usare un file di modello, possiamo usare il markup nella funzione e disinfettarlo, oppure possiamo includere il file nella funzione. Ai fini di questo tutorial, ho intenzione di creare il markup nella funzione e utilizzare wp_kses per disinfettare il codice.

Normalmente non è come vorrei raccomandarlo, ma è così è un modo in cui può essere realizzato, e ci espone anche a wp_kses, che è una funzione che dovremmo usare tutti durante il rendering delle informazioni nel browser.

Usa questo codice:

 

Hai visualizzato correttamente un messaggio di successo personalizzato.

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

E questo dovrebbe risultare nel seguente screenshot:

Si noti qui che il messaggio persiste. Non c'è un pulsante Salva, non c'è modo di nascondere questo messaggio e non c'è modo di cambiare questo messaggio al di fuori del codice. Ma va bene, perché non è questo il punto di questo esercizio.

Alcune cose che voglio menzionare, però:

  • Gli attributi di classe sull'elemento div che vedi sono presi in prestito direttamente da WordPress. Questo è così che possiamo ereditare quegli stili.
  • Alcuni messaggi possono essere ignorati. Copriremo questo in un futuro tutorial.
  • Il $ allowed_html array passato a wp_kses è ciò che lo rende sicuro Niente a parte gli elementi e gli attributi specificati sono resi. È un modo molto buono, forte e pulito per disinfettare i dati.

E questo è tutto quello che c'è da coprire in questo particolare tutorial; tuttavia, stiamo appena iniziando.

Conclusione

Mentre progrediamo in questa serie, daremo un'occhiata a come gestire i messaggi di successo, i messaggi di errore e i messaggi di avviso e come introdurre la possibilità di ignorare i messaggi.

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

Nota 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 al prossimo tutorial, scarica i file, studia il codice e osserva come funziona sulla tua macchina locale. Nella prossima parte, riprenderemo esattamente da dove eravamo rimasti.

risorse

  • Creazione di pagine di amministrazione personalizzate con WordPress
  • Come iniziare con WordPress
  • MAMP
  • Creazione di un sistema di messaggistica WordPress personalizzato, parte 1
  • add_action
  • do_action
  • wp_kses