Share
În această serie de două părți, ne uităm la modul în care să introducem funcționalitatea specifică Ajax în WordPress Dashboard.
În primul articol din serie, am început să lucrăm la un plugin care afișează o notificare de îndată ce este activat ... dar asta este. În acest articol, vom adăuga funcționalitatea Ajax care va permite utilizatorilor să respingă mesajul și vom termina cu o versiune de lucru a pluginului.
Mai precis, vom acoperi toate lucrurile necesare atât pe partea de server, cât și pe partea clientului, care sunt necesare pentru a procesa o solicitare Ajax și a răspunde în mod corespunzător.
În cele din urmă, vom examina o listă de verificare a elementelor pe care trebuie să le aibă toate funcționalitățile WordPress bazate pe Ajax pentru a vă asigura că folosiți API în proiectele viitoare.
Înainte de a începe, este important să vă asigurați că aveți valoarea nonce în funcția care vă face metoda de notificare. Pentru examinare, iată funcția pe care am inclus-o în primul articol:
funcția publică display_admin_notice () $ html = '„; $ html. = '„; echo $ html;„; $ html. = __ ('Exemplul Ajax Notification plugin este activ. Acest mesaj va apărea până când veți decide să îl respingeți.', 'ajax-notification'); $ html. = '
„; $ html. = '". wp_create_nonce ("ajax-notification-nonce"). '„; $ html. = '
Observați că folosim valoarea nonce wp_create_nonce într - un element de control care are ID-ul ajax-notificare-nonce. Aduc acest lucru din trei motive:
Cu asta, hai să scriem funcția Ajax.
Clădirea funcționalității bazate pe Ajax în tabloul de bord WordPress include de obicei patru puncte cheie:
Deși nu există o ordine specială în care trebuie să scriem acest cod, vom merge în jos pe listă așa cum este menționat mai sus și vom lucra prin el.
Codul JavaScript pentru trimiterea cererii este o chestiune relativ boilerplate, dar trebuie să subliniem mai întâi ce anume avem de gând să facem:
Vom scrie codul treptat pentru a ne asigura că este ușor de urmărit. Mai întâi, vom începe prin setarea codului după încărcarea ferestrei și vom fi siguri că mesajul de notificare Ajax este prezent:
Accentsconagua
(functie ($) $ (function () // Verificati pentru a vedea daca notificarea Ajax este vizibila, altfel // nu ne facem griji sa facem oricare din aceste lucruri daca ($ ('# dismiss-ajax-notification ') .length> 0) // Lucru TODO aici ...);); (JQuery)); Apoi, trebuie să configurați un handler de evenimente care să se declanșeze odată ce utilizatorul face clic pe ancora pe care am plasat-o în notificare. Pentru aceasta, avem nevoie de ID-ul elementului mesajului - adică, respingerea-ajax-notificare.
Deoarece un comportament implicit al unei ancore este de a încerca să navighezi spre el href atribut, trebuie de asemenea să împiedicăm să apară acțiunea implicită.
(functie ($) "use strict"; $ (function () // Verificati daca notificarea Ajax este vizibila daca ($ (' deci trebuie să configurați un handler de evenimente pentru a declanșa concedierea lui $ ('# dismiss-ajax-notification'). end); (jQuery)); În acest moment, suntem gata să trimitem cererea către server. Pentru a face acest lucru, vom folosi jQuery post funcţie. Vom trece trei argumente:
ajaxurl variabilSă scriem toate acestea acum (inclusiv stubbing funcția de răspuns) și apoi vom hop peste codul de server-side.
(functie ($) $ (function () // Verificati pentru a vedea daca notificarea Ajax este vizibila daca ($ ('dismiss + ajax-notification'). () (evet) evt.preventDefault (); // Inițierea unei cereri pe partea de server $ .post (ajaxurl, // Numele funcției de foc pe acțiunea serverului: 'hide_admin_notification', // Valoarea nonce pentru a trimite pentru verificarea de securitate nonce: $ .trim ($ ('ajax-notification-nonce'). ), funcția (răspunsul) // TODO rutina de răspuns);); // end if); (jQuery)); Reamintim mai devreme că am spus că ar trebui să știm ID-ul câmpului care conține valoarea nonce - adică, ajax-notificare-nonce. Observați mai sus că luăm valoarea textului acelui element și îl trimitem serverului ca valoare a lui nonce cheie.
Al doilea lucru de observat este că trimitem de-a lungul unei chei de acțiune care are valoarea hide_admin_notification. Aceasta este o funcție pe care trebuie să o scriem pe server deoarece este ceea ce va fi responsabil pentru ascunderea efectivă a notificării.
În fișierul plugin, trebuie să creați o funcție care are numele ca valoare de acțiune menționată mai sus: hide_admin_notification.
Ca de obicei, îmi place să vorbesc despre ce va face funcția înainte de a scrie orice cod. În acest caz, iată ce trebuie făcut:
Iată codul pentru a face acest lucru:
funcția publică hide_admin_notification () // Mai întâi, verificați nonce pentru a vă asigura că se potrivește cu ceea ce am creat atunci când afișăm mesajul. Dacă nu, nu vom face nimic. dacă wp_verify_nonce ($ _REQUEST ['nonce'], 'ajax-notification-nonce')) // Dacă actualizarea opțiunii are succes, trimiteți 1 înapoi la browser; // În caz contrar, trimiteți 0. dacă (update_option ('hide_ajax_notification', true)) die ('1'); altceva die ('0'); // end if / else // end if Este relativ simplu, nu-i așa? Cheia importantă de înțeles este că trimitem valoarea "1" în contextul a muri dacă opțiunea este actualizată cu succes; în caz contrar, trimitem valoarea "0". Acest lucru ne va permite să citim valoarea din răspunsul din browser pentru a determina cum să răspundem cel mai bine.
Evident, dacă valoarea returnată este 1, atunci putem ascunde notificarea.
Înainte de a reveni în JavaScript, trebuie să vă asigurați că efectuăm această operație prin utilizarea unui cârlig adecvat. Deci, în constructorul plugin-ului, să adăugăm o linie pentru ADD_ACTION:
add_action ('wp_ajax_hide_admin_notification', array (& $ this, 'hide_admin_notification')); Lucrul cheie care trebuie notat aici este faptul că eticheta pentru această funcție este etichetă "wp_ajax_hide_admin_notification'.
Dacă lucrați cu Ajax în tabloul de bord WordPress, atunci cârligul trebuie să fie adăugat cu
wp_ajax_prefix și ar trebui să se încheie cu numele funcției.
Acesta este cu siguranță cel de-al doilea cel mai important lucru pe care îl văd dezvoltatorii atunci când lucrează la codul bazat pe Ajax.
De aici, suntem gata să revenim în codul clientului.
În cele din urmă, suntem gata să rezolvăm răspunsul. Acest lucru este ușor: dacă serverul răspunde cu 1, atunci ne vom ascunde; altfel, nu vom face nimic.
Acordat, cea mai bună practică ar fi să afișați un mesaj de eroare sau un tip de feedback pentru a permite utilizatorului să știe că ceva nu a mers bine, dar punctul principal al articolului este să demonstreze Ajax în WordPress, astfel încât vom schimba pur și simplu numele de clasă din la curent la eroare.
Iată ce trebuie adăugat la sursa JavaScript pentru a gestiona răspunsul:
funcția (răspunsul) // Dacă răspunsul a avut succes (adică 1 a fost returnat), ascundeți notificarea; // În caz contrar, vom schimba numele clasei notificării dacă ('1' === răspuns) $ ('# ajax-notification') fadeOut ('slow'); altceva $ ('# ajax-notification') .removeClass ('actualizat') .addClass ('error'); // end if Și asta este cu adevărat. Sursa JavaScript completă ar trebui să arate astfel:
(functie ($) $ (function () // Verificati pentru a vedea daca notificarea Ajax este vizibila daca ($ ('dismiss + ajax-notification'). () (evet) evt.preventDefault (); // Inițierea unei cereri pe partea de server $ .post (ajaxurl, // Numele funcției de foc pe acțiunea serverului: 'hide_admin_notification', // Valoarea nonce pentru a trimite pentru verificarea de securitate nonce: $ .trim ($ ('ajax-notification-nonce'). ), funcția (răspunsul) // Dacă răspunsul a avut succes (adică 1 a fost returnat), ascundeți notificarea; // În caz contrar, vom schimba numele clasei notificării dacă ('1' === răspunsul) $ ('# ajax-notification') fadeOut ('slow'); altul $ ('ajax-notification') .removeClass (' end);); // end if); (jQuery)); PHP plugin-ul ar trebui să arate astfel:
/ * Nume Plugin: Ajutor URI de notificare Ajax: http://github.com/tommcfarlin/ajax-notification Descriere: Un exemplu de plugin folosit pentru a demonstra API-ul WordPress Ajax pentru un articol însoțitor pe site-ul Envato WPTuts +. Versiune: 1.0 Autor: Tom McFarlin Autor URI: http://tommcfarlin.com Autor: Email: [email protected] Licență: Copyright 2012 Tom McFarlin ([email protected]) Acest program este software liber; îl puteți redistribui și / sau modifica în conformitate cu termenii GNU General Public License, versiunea 2, publicată de Fundația pentru Software Liber. Acest program este distribuit în speranța că va fi util, dar FĂRĂ NICI O GARANȚIE; fără nici măcar garanția implicită de VANDABILITATE sau de FITNESS PENTRU UN SCOP SPECIC. Pentru mai multe detalii, consultați Licența publică generală GNU. Ar fi trebuit să fi primit o copie a Licenței Publice Generale GNU împreună cu acest program; dacă nu, scrieți la Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 SUA * / clasa Ajax_Notification / * ---------------- ---------------------------- * * Constructor * ------------------ -------------------------- * / / ** * Inițializează pluginul prin setarea funcțiilor de localizare, filtre și administrare. * / funcția __construct () load_plugin_textdomain ('ajax-notification', false, dirname (plugin_basename (__FILE__)). '/ lang'); register_activation_hook (__FILE__, array (& $ this, 'activ')); register_deactivation_hook (__FILE__, array (& $ this, 'dezactivare')); add_action ('admin_enqueue_scripts', array (& $ this, 'register_admin_scripts')); // Afișează notificarea de administrator numai dacă nu a fost ascunsă dacă (false == get_option ('hide_ajax_notification')) add_action ('admin_notices', array (& $ this, 'display_admin_notice')); // sfârșit dacă add_action ('wp_ajax_hide_admin_notification', array (& $ this, 'hide_admin_notification')); // constructor final / * ------------------------------------------- - * * Funcții de bază * ------------------------------------------ - * / / ** ** La activare, adăugați o nouă opțiune utilizată pentru a urmări dacă doriți sau nu să afișați notificarea. * / funcția publică activate () add_option ('hide_ajax_notification', false); // end activate / ** * La dezactivare, elimină opțiunea care a fost creată când plugin-ul a fost activat. * / dezactivarea funcției publice () delete_option ('hide_ajax_notification'); // end deactivate / ** * Înregistrează și încalcă codul JavaScript specificat pentru administrare. * / funcția publică register_admin_scripts () wp_register_script ('ajax-notification-admin', plugins_url ('ajax-notification / js / admin.min.js')); wp_enqueue_script ('ajax-notificare-admin'); // end register_admin_scripts / ** * Redă nota de administrare. De asemenea, face un nonce ascuns folosit pentru securitate atunci când procesează cererea Ajax. * / funcția publică display_admin_notice () $ html = '„; $ html. = '„; echo $ html; // end display_admin_notice / ** * Callback JavaScript utilizat pentru a ascunde notificarea de administrare atunci când se face clic pe ancora 'Dismiss' pe front. * / funcția publică hide_admin_notification () // Mai întâi, verificați nonce pentru a vă asigura că se potrivește cu ceea ce am creat la afișarea mesajului. Dacă nu, nu vom face nimic. dacă wp_verify_nonce ($ _REQUEST ['nonce'], 'ajax-notification-nonce')) // Dacă actualizarea opțiunii are succes, trimiteți 1 înapoi la browser; // În caz contrar, trimiteți 0. dacă (update_option ('hide_ajax_notification', true)) die ('1'); altceva die ('0'); // end if / else // end if // end hide_admin_notification // Ajax_Notification ();„; $ html. = __ ('Exemplul Ajax Notification plugin este activ. Acest mesaj va apărea până când veți decide să îl respingeți.', 'ajax-notification'); $ html. = '
„; $ html. = '". wp_create_nonce ("ajax-notification-nonce"). '„; $ html. = '
Puteți lua pluginul pe GitHub. Pentru referință, asigurați-vă că consultați următoarele resurse:
jQuery.post