Tehnici Ajax îmbunătățite pentru WordPress programare procedurală

Acum câțiva ani, am scris o serie de postări care discută cum să folosim Ajax în WordPress Frontend. Scopul seriei este simplu:

Vom oferi o scurtă trecere în revistă a ceea ce este Ajax, cum funcționează, cum să-l instalezi pe front și să înțelegi cârligele pe care le oferă WordPress. De asemenea, vom construi un mic proiect care să pună teoria în practică. Vom trece prin codul sursă și vom asigura, de asemenea, că este disponibil și pe GitHub.

În general vorbind, seriile se mențin bine, dar, la fel ca în cazul întregului software dezvoltat constant, tehnicile, API-urile și abordările se schimbă. Mai mult, pe măsură ce anii trec și ne continuăm să ne perfecționăm abilitățile, ne dezvoltăm mai bine și ne facem mai bine să folosim noi API-uri.

Din cauza tuturor celor de mai sus, vreau să revizuiesc conceptul de Ajax în WordPress, astfel încât să vedeți unele dintre API-urile noi și cum să le folosiți în munca dvs. de zi cu zi sau cum să refacționați o parte din codul pe care ați lucrat-o cu acum.

Un cuvânt de precauție înainte de a merge prea departe în acest tutorial: Presupun că ați citit deja seria legată în introducerea acestui articol și că aveți o experiență în construirea pluginurilor WordPress.

Definirea pluginului

Ca și în cazul oricărui plugin WordPress, este important să vă asigurați că ați definit antetul astfel încât WordPress să poată citi fișierul pentru a introduce noua funcționalitate în aplicația de bază.

Sună această variantă a pluginului Simplă Ajax Demo, și este situat în wp-content / plugin / wp-simplu-ajax. Primul fișier pe care îl creez se află în directorul rădăcină al lui wp-simplu-ajax și este numit wp-simplu-ajax.php.

Se pare ca aceasta:

Codul trebuie să fie explicabil, mai ales dacă sunteți obișnuit să lucrați cu WordPress Plugins; cu toate acestea, cel mai important lucru de înțeles este că toate informațiile de mai sus sunt ceea ce va conduce ceea ce văd utilizatorul în tabloul de bord WordPress.
Adică utilizatorii vor vedea numele, descrierea și versiunea pluginului, precum și numele autorului (care va fi legat la adresa URL specificată) atunci când sunt prezentate cu opțiunea de a activa pluginul.
Adăugarea fișierului Ajax al lui WordPress
În acest moment, plugin-ul va apărea în tabloul de bord Plugin WordPress, dar nu va face nimic pentru că nu am scris niciun cod. Pentru ca acest lucru să se întâmple, vom aborda acest plugin special utilizând abordarea de programare procedurală, mai degrabă decât abordarea orientată spre obiecte pe care am folosit-o în majoritatea tutorialelor mele.
Cum am adăugat inițial ajutorul Ajax
Motivul evitării programării orientate pe obiecte acum este dublu:
 
Acest lucru se datorează faptului că plugin-ul va fi foarte simplu. Sunt mai interesat să mă concentrez asupra API-urilor specificate furnizate de WordPress, astfel încât să puteți concentra asupra celor mai importante lucruri pe care să vă concentrați asupra muncii dvs..
 
A doua parte a acestei serii se va concentra pe refactorizarea acestui cod într-un sistem orientat pe obiecte, astfel încât să puteți vedea cum ar putea arăta toate acestea în contextul unui sistem mai mare, care utilizează clase.
 
În cele din urmă, această serie va acoperi atât tipurile de programare susținute de PHP și WordPress.
Cel mai probabil, dacă ați lucrat cu Ajax în trecut, atunci ați făcut ceva de genul acesta, pentru a oferi pluginului dvs. suport pentru a efectua apeluri asincrone:
  
Această metodă particulară nu este în mod inerent greșită, dar neglijează unele dintre cele mai noi API-uri pe care le voi acoperi momentan. De asemenea, se amestecă PHP, HTML și JavaScript într-o singură funcție.
Nu este grozav pe măsură ce lucrează, dar există o cale mai curată de a face acest lucru.
Cum adăugăm asistență Ajax
În primul rând, pentru a vă asigura că pluginul nu poate fi accesat direct de nimeni, adăugați următoarea condiție doar sub antetul plugin-ului:
Rețineți că eticheta PHP de deschidere nu va fi necesară deoarece acest cod va veni mai târziu într-un fișier PHP existent (este necesar pentru evidențierea sintaxei chiar acum).
Apoi, să organizăm o funcție care să includă asistența WordPress pentru Ajax prin utilizarea unor API existente care nu implică amestecarea limbilor. 
Iată ce trebuie să facem:
 
Vom crea o funcție responsabilă de adăugarea asistenței Ajax.
 
Vom cupla funcția în wp_enqueue_script acțiune.
 
Vom profita de wp_localize_script API apel pentru a încorpora suportul WordPress pentru Ajax (care vine de la admin-ajax.php).
 
Pare destul de clar, nu-i așa? Rețineți dacă aveți întrebări, oricând le puteți adăuga în comentarii. Consultați următorul cod pentru a vedea dacă puteți urma:
 admin_url ('admin-ajax.php'))); 
Din nou, rețineți că eticheta PHP de deschidere nu va fi necesară în versiunea finală a pluginului, deoarece este aici numai pentru a profita de funcția de evidențiere a sintaxei.
Cu asta ati aruncat o privire wp_localize_script. Înainte de a examina fiecare parametru, să examinăm scopul acestei funcții. Din Cod, versiunea scurtă este după cum urmează:
Localizează un script înregistrat cu date pentru o variabilă JavaScript.
Descrierea mai lungă este importantă, totuși:
Aceasta vă permite să oferiți traduceri localizate în mod corespunzător ale oricăror șiruri de caractere utilizate în scenariul dvs. Acest lucru este necesar deoarece WordPress oferă în prezent doar un API de localizare în PHP, nu direct în JavaScript.
Deși localizarea este utilizarea primară, aceasta poate fi utilizată pentru a face orice date disponibile script-ului dvs. pe care le puteți obține în mod normal numai de pe partea de server a WordPress.
Acum revedeți parametrii pe care îi acceptă:
 
Primul parametru este denumit mâner și este folosit pentru a identifica în mod unic scriptul care este adăugat la pagină.
 
Al doilea parametru este Nume, și acest lucru este important deoarece este modul în care veți identifica scriptul în întregul cod. Veți vedea acest lucru cu mult mai multe detalii mai târziu în tutorial.
 
Al treilea parametru este date parametru. Se referă la o matrice care va fi trimisă în browser ca obiect JavaScript. Deoarece transferăm adresa URL a unei căi către un fișier, va fi furnizat suport Ajax.
 
Observați că primul parametru este ajax-script. Țineți cont de acest lucru atunci când ne îndreptăm atenția spre scrierea și înscrierea propriului nostru JavaScript, deoarece va trebui să folosim încă o dată acest mâner. 
Nu uitați, de asemenea, să notați numele pe care l-ați selectat pentru apelul dvs. la API, deoarece vom folosi acest lucru atunci când lucrăm cu codul clientului mai târziu în acest tutorial.
O notă importantă despre Ajax Support
Observați că folosim doar wp_enqueue_script cârlig și nu folosim admin_enqueue_script. Asta pentru ca ajaxurl este deja definită în tabloul de bord.
Aceasta înseamnă că, dacă căutați să faceți cereri Ajax în zona de administrare a WordPress, atunci nu este nevoie să faceți nimic. Tot ceea ce facem în contextul acestui tutorial este specific pentru front-end-ul site-ului.
Configurarea codului de pe server
Acum este momentul să scrieți o funcție pe care JavaScript-ul dvs. o va apela prin Ajax. Acest lucru poate fi orice doriți să fie, dar în scopul acestui plugin vom seta o funcție care va returna informații despre utilizatorul conectat la site.
Pluginul va face următoarele:
 
Cereți serverului să solicite informații despre utilizatorul curent.
 
Dacă utilizatorul este conectat la site, acesta va returna un răspuns JSON al informațiilor utilizatorului.
 
Dacă utilizatorul nu este conectat, acesta va afișa un cod de eroare.
 
Vom folosi consolă obiect disponibil în majoritatea browserelor moderne, deci asigurați-vă că utilizați Chrome, Safari sau Firefox atunci când lucrați cu sursa JavaScript pe care o veți scrie.
Efectuarea unei cereri
Acum, că am subliniat exact modul în care codul va funcționa ori de câte ori un utilizator face o cerere Ajax către server, să începem să scriem o funcție pentru a face exact acest lucru. O să-l sunăm sa_get_user_information.
Implementarea funcției va veni mai târziu în acest tutorial, dar preluarea principală din codul de mai sus este că ne-am cuplat în ambele wp_ajax_get_current_user_info și wp_ajax_nopriv_get_current_user_info. 
Aceste două cârlige sunt bine documentate în Codex, dar primul cârlig va permite celor care sunt conectați la site să acceseze această funcție. Al doilea cârlig va permite celor care sunt nu conectat la acest site pentru a accesa această funcție.
De asemenea, notați totul după wp_ajax_ și wp_ajax_nopriv_ depinde de dvs., ca dezvoltator, de a defini. Acesta va fi numele funcției pe care o apelați din partea clientului, după cum veți vedea mai târziu în acest tutorial.
Manipularea cererilor eronate
Înainte de implementarea funcției, a fost apelat fișierul sursă JavaScript (care urmează să fie scris) și trebuie să ne asigurăm că suntem capabili să facem față oricăror erori care pot apărea.
În cazul nostru, erorile potențiale pot fi:
 
Nimeni nu este conectat.
 
ID-ul de utilizator nu există în sistem.
 
Este foarte puțin probabil ca al doilea caz să fie adevărat, dar ne va ajuta să aflăm mai multe despre mai multe dintre API-urile WordPress și despre modul în care putem profita de acestea pentru tratarea cererilor eronate.
Primul lucru pe care trebuie să-l înțelegeți este WP_Error. Ca și în cazul multor API, acest lucru este disponibil în Codul:
Exemple de coduri de eroare ale magazinului WP_Error și mesaje care reprezintă una sau mai multe erori și dacă o variabilă este sau nu o instanță a WP_Error poate fi determinată utilizând funcția is_wp_error ().
Constructorul va accepta până la trei parametri (deși vom folosi numai primele două):
 
Primul argument este codul de eroare. Aceasta este ceea ce putem folosi pe partea clientului pentru a analiza și a determina ce sa întâmplat. De asemenea, ne permite să scriem informații într-un fișier jurnal și așa mai departe.
 
Al doilea argument este un mesaj care poate însoți codul de eroare. Acest lucru este util dacă dorim să afișăm un mesaj utilizatorului.
 
Argumentul final este o serie de informații, de obicei coduri de eroare și mesaje. Indiferent, nu vom folosi acest lucru în timpul codului nostru.
 
Apoi, vom trimite rezultatele erorilor înapoi la client folosind o funcție numită wp_send_json_error. Acest lucru este foarte ușor de utilizat:
Trimiteți un răspuns JSON înapoi la o solicitare Ajax, indicând eșecul. Obiectul răspunsului va avea întotdeauna o cheie de succes cu valoarea false. Dacă ceva este trecut la funcția din parametrul $ data, acesta va fi codificat ca valoare pentru o cheie de date.
Prin combinarea ambelor WP_Error și wp_send_json_error, putem crea funcții care ne vor ajuta să furnizăm coduri de eroare la JavaScript care sună pe partea de server.
De exemplu, să presupunem că avem o funcție care oferă o eroare dacă utilizatorul nu este conectat la site. Acest lucru poate fi realizat utilizând următoarea funcție:
Observați că funcția este marcată ca privată, chiar dacă este în spațiul de nume global. Este prefixată cu un subliniere pentru a desemna această funcție ar trebui considerată privată.
Vom revizui acest lucru în următorul articol.
În al doilea rând, trebuie să ne ocupăm de cazul în care utilizatorul nu există. Pentru a face acest lucru, putem crea o funcție care face următoarele:
Acum avem două funcții, fiecare dintre acestea va trimite informații clientului dacă ceva nu a reușit, dar ce facem dacă ambele funcții trec?
Manipularea cererilor de succes
Dacă funcțiile de mai sus nu dau nici o eroare, atunci trebuie să avem o modalitate de a trimite cererea înapoi clientului cu un mesaj de succes și informațiile pe care le solicită.
Mai precis, trebuie să trimitem informațiile înapoi clientului, care include informațiile utilizatorului curent în format JSON.
Pentru a face acest lucru, putem profita de wp_send_json_success mesaj. Face exact ceea ce crezi că ar face și el:
Trimiteți un răspuns JSON înapoi la o solicitare Ajax, indicând succesul. Obiectul răspunsului va avea întotdeauna o cheie de succes cu valoarea adevărată. Dacă ceva este transmis funcției, acesta va fi codificat ca valoare pentru o cheie de date.
Să combinăm munca pe care am făcut-o până acum pentru a scrie o funcție pe care JavaScript o va apela în cele din urmă și care utilizează cele două funcții mai mici pe care le-am plasat mai sus. De fapt, aceasta va fi implementarea funcției pe care am lăsat-o mai devreme în acest tutorial:
Dacă utilizatorul este conectat și utilizatorul există, atunci vom trimite un mesaj de succes clientului care conține reprezentarea JSON a utilizatorului. În acest moment, este timpul să scriem un javascript.
Cererea de pe partea clientului
Mai întâi, adăugați un fișier numit frontend.js la rădăcina directorului plugin-ului. Inițial, ar trebui să includă următorul cod:
; (functie ($) 'use strict'; $ (function () );) (jQuery);
Implementarea funcției va fi acoperită momentan, dar trebuie să ne asigurăm că în acest plugin încadrăm și acest fișier JavaScript. Reveniți la funcție sa_add_ajax_support și adăugați următoarele deasupra apelului la wp_localize_script:
Amintiți-vă că acest script trebuie să aibă același mâner ca cel definat în wp_localize_script. Acum putem revedea fișierul JavaScript și facem apel la codul de pe server la care lucrăm pe parcursul întregului articol.
În frontend.js, adăugați următorul cod:
/ ** * Acest fișier este responsabil pentru setarea solicitării Ajax de fiecare dată când * este încărcată o pagină WordPress. Pagina ar putea fi pagina principală de indexare, o singură pagină sau orice alt tip de informație pe care WordPress o redă. * * Odată ce DOM este gata, va efectua un apel Ajax către server unde * este definită funcția 'get_current_user_info' și se va ocupa de răspunsul * bazat pe informațiile returnate din cerere. * * @ din 1.0.0 * / (functie ($) 'use strict'; $ (function () / * Efectuarea unui apel Ajax printr-o solicitare GET catre URL-ul specificat in apelul * wp_enqueue_script. parametru, treceți un obiect cu * numele acțiunii funcției pe care am definit-o pentru a returna informațiile utilizatorului. * / $ .ajax (url: sa_demo.ajax_url, metoda: 'GET', data: action: 'get_current_user_info' ) .done (functie (raspuns)) / / * Odata ce cererea este terminata, determinati daca a avut succes sau nu. * Daca da, parseaza JSON-ul si apoi reda-l la consola. la consola. * / if (true === response.success) console.log (JSON.parse (răspuns.data)); altceva console.log (response.data););); ) (jQuery);
Având în vedere numărul de comentarii din cod și presupunând că sunteți familiarizat cu scrierea pluginurilor WordPress și că aveți experiență cu Ajax, ar trebui să fie relativ ușor de urmat.
Pe scurt, codul de mai sus face un apel la partea de server atunci când pagina este încărcată și apoi scrie informații la consola browser-ului despre utilizatorul curent. 
Dacă un utilizator este conectat, atunci informațiile sunt scrise în consola sub forma unui obiect JavaScript, deoarece este analizat de la JSON.
Dacă, pe de altă parte, este utilizatorul nu autentificat, apoi un alt obiect va fi scris afisand un cod de eroare impreuna cu mesajul, toate pe care il veti putea vedea in consola.
Concluzie
Până acum, ar trebui să aveți o înțelegere clară a API-urilor WordPress este disponibil pentru a lucra cu solicitările Ajax pentru utilizatorii care sunt conectați la site, iar pentru cei care nu sunt.
În cele din urmă, obiectivul nostru ar trebui să fie acela de a scrie codul cel mai curat și mai ușor de întreținut, astfel încât să avem abilitatea de a continua să lucrăm cu acest cod pe măsură ce ne mișcăm în viitor. În plus, ar trebui să scriem un cod ca acesta, astfel încât alții care pot atinge codul nostru să înțeleagă clar ce încercăm să facem și să folosim cele mai bune practici date mediului nostru.
În acest tutorial, am folosit o formă procedurală de programare pentru tot codul care a fost partajat, demonstrat și furnizat prin intermediul GitHub. Așa cum am menționat mai devreme, nu există nimic în mod inerent în eroare cu acest lucru, dar cred că merită să vedem cum arată acest lucru dintr-o perspectivă orientată pe obiecte.
În tutorialul următor vom analiza refactorizarea acestui cod într-o paradigmă orientată pe obiecte care utilizează de asemenea standarde de codificare WordPress pentru documentarea ulterioară a lucrării noastre și care folosește o organizare clară a fișierelor pentru a face scrierea noastră cât mai curată și mai clară posibil.
Amintiți-vă că puteți să-mi prindeți toate cursurile și tutorialele pe pagina mea de profil și puteți să mă urmați pe blogul meu și / sau Twitter la @tommcfarlin unde vorbesc despre dezvoltarea de software în contextul WordPress și bucurați-vă de conversații cu alții despre aceleași subiecte (precum și alte lucruri).
Între timp, vă rugăm să nu ezitați să lăsați orice întrebări sau comentarii în feed-ul de mai jos și mă voi adresa fiecăruia. 



		
			
	   
	




Cod