Un primer pe Ajax în tabloul de bord WordPress - Poziționarea Fundației

Nu cu mult timp în urmă, Ajax a fost tot furia - ideea de a actualiza o parte dintr-o pagină fără a avea nevoie să reîncărcați întreaga pagină a fost minunată, rețineți?

Dar a trecut câțiva ani și acum este practic standardul - este greu să te gândești la aplicația dvs. web preferată care reîncarcă o pagină întreagă pentru a finaliza o sarcină, nu-i așa??

În funcție de fundalul dvs., există o serie de modalități diferite de a implementa Ajax. În această serie, vom face o scurtă trecere în revistă a ceea ce este Ajax, cum funcționează și apoi cum să îl folosiți în mod corespunzător în tabloul de bord al administrației WordPress.

Ajax: Scurtciunea lui

Ajax este o tehnologie care este de obicei văzută ca un acronim pentru "Asynchronous JavaScript and XML", dar este cu adevărat mai mult decât atât. În general, Ajax este ceea ce facem atunci când actualizăm parte a unei pagini (adică fără a reîmprospăta întregul lucru).

La un nivel înalt, procesul arata astfel:

Un utilizator efectuează un eveniment, cum ar fi un clic de mouse, pe un element dintr-o pagină
Dezvoltatorul a scris o funcție care ascultă pentru acel eveniment
Când apare evenimentul, funcția trimite datele din browser înapoi la server
Serverul efectuează apoi o acțiune și / sau adună orice date solicitate și o returnează într-un anumit format

Deși datele au fost returnate în XML, acum este mai frecventă returnarea JSON, fragmente HTML sau chiar și șiruri de bază.

Mai mult decât atât, browserele anterioare au pus în aplicare facilitățile de bază pentru a efectua funcții bazate pe Ajax un pic diferit, astfel încât construirea de aplicații Ajax au nevoie de o cantitate semnificativă de cod doar pentru a face față varietate de browsere.

Din fericire, bibliotecile, cum ar fi jQuery, au făcut acest proces mult mai ușor prin furnizarea unui nivel de abstractizare care îndepărtează greșelile de manipulare a incoerențelor încrucișate în browser, permițându-ne să ne concentrăm exclusiv pe trimiterea și primirea de date asincron.

De când WordPress este livrat cu jQuery, avem avantajul de a fi capabili să ne întoarcem pe lângă această bibliotecă pentru munca noastră. Dar asta nu este tot - deși este posibil să vă răsuciți sistemul propriu pentru funcționalitatea Ajax în WordPress, platforma oferă de fapt un cadru pentru a face acest lucru foarte ușor.

Ajax în tabloul de bord WordPress

Cadrul pe care WordPress îl oferă pentru introducerea funcționalității bazate pe Ajax este de fapt un proces foarte simplu. În primul rând, o voi defini, apoi vom examina fiecare pas în detaliu.

Creați un element care va fi utilizat pentru a declanșa solicitarea Ajax
Scrieți codul JavaScript pentru a gestiona evenimentul atunci când starea elementului de intrare se modifică (cum ar fi clic, tastat, etc.)
Pe server, procesați cererea și pregătiți un răspuns pentru a reveni la browser
Încă o dată, utilizați JavaScript pentru a gestiona răspunsul în consecință

Patru pași - asta este. Nu e rău, nu-i așa? În restul acestui articol, vom examina un exemplu practic de a face exact acest lucru.

Ajax Notificare: Un plugin de exemplu pentru WordPress

În exemplul nostru, vom scrie un plugin care afișează un mesaj de notificare imediat ce plugin-ul este activat. Acesta este singurul său scop: să arătăm pur și simplu că este activ.

Simplu? Sigur. Fără sens? Din punct de vedere al funcționalității, cu siguranță. Dar vom acoperi o mulțime de terenuri care pot contribui direct la munca practică: vom discuta notele de administrare, valorile nonce, API-ul WordPress Ajax, opțiunile și răspunsurile bazate pe JavaScript.

Planificați pluginul

Înainte de a scrie orice cod, să planificăm modul în care pluginul va funcționa:

Când plugin-ul este activat, ar trebui să creeze o valoare de opțiune pentru a stoca dacă utilizatorul a selectat sau nu să ascundă mesajul
Când pluginul este dezactivat, acesta trebuie să elimine complet opțiunea din baza de date
Mesajul de notificare poate afișa un mesaj simplu și ar trebui să fie în stilul interfeței WordPress native
Ar trebui să existe un element pe care utilizatorul să îl poată da clic pentru a elimina mesajul
Dacă utilizatorul optează pentru ascunderea mesajului, ar trebui să se ascundă fără a reîmprospăta pagina și ar trebui să fie ascuns de acest punct înainte

Destul de ușor, cred. Iată o schiță simplă a ceea ce va arăta interfața pluginului:

În acest moment, este timpul să scrieți cod.

Creați opțiunile

Deși pluginul complet va fi legat la sfârșitul postării, vom examina pluginul pe măsură ce începem dezvoltarea. Să configuram structura de bază a pluginului astfel încât să afișeze o notificare atunci când este activată.

Pentru a determina dacă utilizatorul dorește sau nu să afișeze mesajul de notificare, trebuie să creați o opțiune care să stocheze valoarea. În mod similar, trebuie să ștergem această valoare ori de câte ori pluginul este dezactivat - nu are nici un sens să lași date vechi în jur, bine?

Pentru a face acest lucru, vom înregistra două cârlige: una pentru activare și una pentru dezactivare.

Să definim clasa și constructorul care include acțiuni pentru aceste două metode:

 clasa Ajax_Notificare function __construct () register_activation_hook (__FILE__, array (& $ this, 'activare')); register_deactivation_hook (__FILE__, array (& $ this, 'dezactivare'));  nou Ajax_Notification ();

Desigur, nimic nu se va întâmpla în acest moment, deoarece nu am definit cele două metode. Să facem asta acum:

 funcția activate () add_option ('hide_ajax_notification', false);  // end activare deactivate () delete_option ('hide_ajax_notification');  // dezactivați

Funcțiile ar trebui să fie relativ clare, dar aici este o explicație rapidă a ceea ce facem:

Activati adaugă o opțiune la baza de date cu cheia hide_ajax_notification. Pentru că dorim să afișăm notificarea până când utilizatorul nu spune altfel, îl vom stabili ca fiind fals.
dezactivați șterge pur și simplu opțiunea din baza de date.

Acum avem nevoie doar de un mesaj de afișat.

Creați mesajul de notificare

Să adăugăm un alt cârlig în constructor care va apela o acțiune care va afișa de fapt un mesaj de notificare. Constructorul actualizat va arăta astfel:

 clasa Ajax_Notificare function __construct () register_activation_hook (__FILE__, array (& $ this, 'activare')); register_deactivation_hook (__FILE__, array (& $ this, 'dezactivare')); add_action ('admin_notices', array (& $ this, 'display_admin_notice'));  nou Ajax_Notification ();

Desigur, nimic nu se va întâmpla încă - trebuie să definim o metodă display_admin_notice care va fi responsabil pentru redarea mesajului. Deci, să definim acum:

 funcția display_admin_notice () $ html = '„; $ html. = '„; $ html. = 'Pluginul exemplu Ajax Notification este activ. Acest mesaj va apărea până când alegeți să îl eliminați. '; $ html. = '
„; $ html. = '". wp_create_nonce ("ajax-notification-nonce"). '„; $ html. = '
„; echo $ html;

Deasupra, creăm un element care va afișa un mesaj simplu:

Ajutorul exemplu Ajax Notification este activ. Acest mesaj va apărea până când alegeți să îl respingeți.

Mesajul oferă, de asemenea, o ancoră care va permite utilizatorilor să respingă mesajul. Lucrul de import ce trebuie menționat în legătură cu ancora este următorul:

href atributul este gol javascript :; pentru că mesajul nu se leagă într-adevăr de nicăieri
Ancora are un ID, astfel încât să putem accesa cu ușurință linkul folosind JavaScript ulterior în articol

Desigur tu ar putea introduceți un href la ancora în cazul în care utilizatorul nu are activat JavaScript, dar acest articol este despre Ajax, deci presupunem că JavaScript este activat. Îmbunătățirea progresivă este un alt subiect complet.

Cel de-al doilea lucru pe care îl veți observa este că am inclus un apel către wp_create_nonce. Aceasta este o măsură de securitate. Atunci când utilizatorul face clic pe ancora "anulați", vom putea confirma că cererea vine din mesajul de notificare; altfel, putem ignora cererea.

Metoda ia o singură valoare care este utilizată pentru identificarea nonce. În cazul nostru, este ajax-notificare-nonce. Vom revizui această valoare odată ce vom începe să introducem funcționalitatea Ajax.

Concluzie

Până acum, aveți un plug-in complet - deși static - plugin. Când activați pluginul, ar trebui să vedeți un mesaj similar celui de mai jos:

În următorul articol, vom introduce funcția Ajax și vom termina cu o listă de verificare a lucrurilor pe care toate funcționalitățile Ajax bazate pe WordPress ar trebui să aibă, dar în același timp asigurați-vă că verificați următoarele resurse:

Ajax Notificare 0.1. O versiune de lucru a plugin-ului, așa cum este ea dezvoltată în acest articol.
register_activation_hook
deregister_activation_hook
wp_create_nonce

Cod