Creazione di un sistema di messaggistica WordPress personalizzato, parte 1

All'inizio di quest'anno, abbiamo lavorato attraverso una serie di tutorial che coprivano il processo di creazione di pagine di amministrazione personalizzate in WordPress. Sebbene questa serie non sia necessariamente un prerequisito per il materiale che stiamo per coprire, non sarebbe male recensirlo. 

Fuori dagli schemi, WordPress offre molte funzionalità attraverso le sue numerose API. Se, ad esempio, si desidera lavorare sull'introduzione delle pagine di amministrazione da appena concentrandosi sulle opzioni che verranno presentate all'utente, è possibile farlo utilizzando l'API Impostazioni.

Ci sono molti vantaggi nello scegliere questa particolare API. Alcuni di questi includono:

  • sanificazione e validazione
  • voci di menu personalizzate
  • facilità di introduzione delle pagine di amministrazione
  • lavorando con vari tipi di input
  • messaggistica automatizzata in caso di successo o fallimento
  • e altro ancora

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. 

Quindi, continuando con lo stesso tema della serie di cui sopra, stiamo andando a vedere come creare il nostro sistema di messaggistica personalizzato per le pagine di amministrazione. Per fare questo, creeremo un plugin per dimostrare i concetti, registreremo i ganci personalizzati con WordPress e vedremo come implementarli,.

Come ho già detto, il tutorial precedente non è necessariamente un prerequisito per questa serie, ma se sei nuovo a qualsiasi cosa menzionata sopra, ti preghiamo di dedicare un po 'di tempo alla revisione della serie perché darà un po' di fondamento alla direzione in cui stiamo andando.

Detto ciò, iniziamo.

Cosa ti servirà per questa serie

Se hai letto uno dei miei tutorial precedenti, sai che mi piace iniziare ogni tutorial (o serie, anche) con due cose:

  1. Fornisci un elenco dei software necessari per iniziare.
  2. Fornire una roadmap di dove siamo diretti in modo da poter decidere se si desidera o meno procedere con la serie.

Facciamolo ora.

Il tuo ambiente di sviluppo

In generale, questo è ciò di cui hai bisogno per iniziare con il progetto che costruiremo.

  • PHP 5.6.25
  • MySQL 5.6.28
  • Apache (o Nginx se ti senti a tuo agio con questo)
  • WordPress 4.6.1
  • Il tuo editor preferito o IDE

Se sei curioso di sapere come si combino tutto questo, ti consiglio di leggere questa serie.

Generalmente non raccomando un software in termini di miglioramento rispetto ad altri perché ci sono così tante opzioni, ma se sei nuovo di zecca in questo, ti consiglio vivamente la versione gratuita di MAMP. È compatibile con macOS e Windows, quindi dovrebbe essere compatibile con molte delle tue configurazioni. È facile da usare, facile da usare e fornisce tutto ciò che serve al momento dell'installazione.

La nostra tabella di marcia

Detto questo, ecco la ripartizione provvisoria di questa serie:

  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. Nel prossimo 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.

Nota che ogni esercitazione includerà file sorgente scaricabili; tuttavia, non saranno necessariamente file sorgenti completi in quanto potrebbero non includere documentazione o altre note. Questo è ciò che il tutorial è tutto, dopo tutto.

Ma la versione finale fornita includerà esattamente questo.

Avvio del plugin

Al momento, sappiamo che avremo bisogno dei seguenti elementi per il nostro plug-in:

  • una pagina di amministrazione di base
  • una voce di menu per portarci alla pagina di amministrazione
  • un file di bootstrap per avviare il plugin

Quindi prendiamo tutti questi pezzi insieme e funzionali.

1. La voce di menu

La prima cosa che vogliamo fare è introdurre la funzionalità che aggiungerà un elemento di sottomenu a Opzioni menu nel menu di navigazione di amministrazione di WordPress.

Per fare ciò, abbiamo bisogno di due classi e un file: una classe che visualizzerà il sottomenu, una classe che visualizzerà la pagina del sottomenu e un file che visualizzerà il contenuto della pagina.

Prima di fare ciò, raccomando la seguente struttura di directory:

Ciò significa che il Admin la directory avrà a visualizzazioni sottodirectory. Il Admin directory avrà class-submenu.php e class-sottomenu-page.php. Parleremo della pagina di amministrazione nella prossima sezione.

Per prima cosa, esaminiamo ciascuno di questi singoli file.

class-submenu.php

Questa classe è responsabile dell'aggiunta della voce di menu alla pagina delle opzioni:

submenu_page = $ submenu_page;  public function init () add_action ('admin_menu', array ($ this, 'add_options_page'));  public function add_options_page () add_options_page ('Tuts + Messaggi personalizzati', 'Tuts + Esempio di messaggio personalizzato', 'manage_options', 'tutsplus-custom-messages', array ($ this-> submenu_page, 'render'));  

Se hai letto la chiamata API nel Codex, vedrai che questo introdurrà una voce di menu in Utensili menu che sarà accessibile tramite "Tuts + Messaggi personalizzati" e che ospiterà un titolo che vedremo momentaneamente.

Nota anche che c'è un dentro metodo. Questa funzione registra il add_options_page con WordPress admin_menu gancio in modo che sia correttamente registrato (e visualizzato) durante il ciclo di vita della pagina WordPress.

In secondo luogo, questo menu è accessibile tramite chiunque abbia il manage_options capacità, e chiamerà il metodo render su submenu_page questo appartiene ad esso.

Il problema? Là è nessuna pagina di sottomenu. Quindi creiamo quella classe ora.

class-sottomenu-page.php

Il codice per questa classe è qui sotto:

Il Submenu_Page la classe è chiaramente semplice. Tutto ciò che fa è visualizzare il settings.php pagina, che esamineremo in un momento.

Nota che non tutte le pagine dei sottomenu saranno così semplici; tuttavia, la complessità del nostro plugin deve ancora venire. Lo vedremo in un prossimo post.

2. La pagina di amministrazione

Proprio come il Submenu_Page era semplice, così è la pagina delle impostazioni. In effetti, se hai familiarità con il markup di base, dovrebbe essere facile capire esattamente cosa sta succedendo:

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

In breve, questo mostra semplicemente un messaggio in WordPress che non useremo questa pagina per qualcosa di diverso dalla visualizzazione di messaggi personalizzati.

Dopotutto, quello è cosa faremo.

3. Portandolo alla vita

A questo punto, siamo pronti per impostare il file di bootstrap per mettere in moto il plugin. Ecco il file bootstrap di base:

dentro();  

Prendi nota del commento sopra il per ciascuno ciclo continuo. Anche se abbiamo coperto l'autoloading in una serie precedente, non voglio presumere che nessuno abbia letto tutte le serie che portano a questo particolare. 

Una volta che questo è a posto, dovresti essere in grado di accedere al tuo account WordPress, attivare il plugin e vedere la seguente schermata:

In caso contrario, ricontrolla tutto il codice sorgente con quello che è allegato a questo post e verifica che tutto sia esattamente come dovrebbe essere. 

In caso contrario, apportare le correzioni necessarie e riprovare. Se ci vogliono alcuni tentativi, non preoccuparti. La programmazione può essere un compito un po 'frustrante, a volte, soprattutto quando si sta per iniziare.

Conclusione

Se hai seguito la maggior parte del mio lavoro fino a questo punto, molto di questo potrebbe sembrare familiare. Se no, allora sono felice di averti a bordo. Mentre aspetti il ​​secondo tutorial, ti consiglio di esaminare alcuni degli altri materiali che ho pubblicato per avere un'idea di ciò che mi piace coprire e del mio approccio all'insegnamento di questi concetti.

Sono anche sempre felice di rispondere alle domande tramite i commenti, e puoi anche sentirti libero di dare un'occhiata al 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, studia il codice, scarica i file e guarda come funziona sul tuo computer locale. Nella prossima parte, riprenderemo esattamente da dove eravamo rimasti.

risorse

  • Creazione di pagine di amministrazione personalizzate con WordPress
  • L'API delle impostazioni di WordPress
  • Come iniziare con WordPress
  • MAMP
  • add_options_page