Un primer pe Ajax în Frontendul WordPress Înțelegerea procesului

Câteva articole în urmă, am dat un primer pe Ajax în tabloul de bord WordPress, dar comentariile conduc la o discuție despre cum să faceți acest lucru pe interfața WordPress (și cum să o faceți corect).

Vă recomandăm să revizuiți seria anterioară pentru a obține o idee despre locul în care mergem, dar în acest articol vom oferi o scurtă trecere în revistă a ceea ce este Ajax, cum funcționează, cum se instalează pe front , și înțelegerea cârligelor pe care le oferă WordPress.

În următorul articol, vom construi un mic proiect care pune teoria în practică. Vom trece prin codul sursă și vom asigura, de asemenea, că este disponibil și pe GitHub.

Între timp, să începem să revizuim Ajax și facilitățile oferite de WordPress pentru noi.


Un Ajax Refresher

În acest moment, Ajax nu este nou. De fapt, este greu să găsești un site web modern și / sau o aplicație web care să nu o includă deja, așa că o să păstrez acest scurt și până la punctul.

În general, Ajax este ceea ce ne permite să facem actualizări parțiale ale paginilor.

Aceasta înseamnă că putem actualiza o parte (sau părți) a unei pagini fără ca un utilizator să trebuiască să actualizeze întreaga pagină. Ciclul de viață se mută de obicei în felul următor:

  • Un utilizator declanșează o acțiune pe site. Poate că fac clic pe un buton, dau clic pe un link sau ceva similar.
  • Fără reîmprospătarea paginii, datele sunt trimise serverului.
  • Serverul procesează datele și trimite datele înapoi.
  • Site-ul Web apoi gestionează datele returnate - răspunsul - și actualizează pagina în consecință.

Relativ ușor de înțeles, corect?


Ajax în WordPress

Pentru a înțelege acest proces în WordPress, trebuie să aruncăm o privire la câteva idei care sunt mai concrete decât "utilizatorul face ceva" și "actualizează pagina în consecință".

Cu aceasta a spus, majoritatea dintre noi sunt familiarizați cu acțiunile, filtrele și sistemele de cârlig, care ne permit să facem WordPress, hm, cârligul în ciclul de viață al paginii WordPress pentru a introduce funcționalitatea noastră sau pentru a procesa date înainte de redare. Dacă nu, vă rugăm să revizuiți WordPress Hooks - ambele acțiuni și filtre - deoarece această serie presupune că aveți un nivel de familiaritate cu ambele.

Prezentarea Ajax în WordPress urmează un proces în trei etape. Este literalmente o rețetă care poate fi urmată de fiecare dată când doriți să introduceți o acțiune asincronă.

Înainte de a mă uita la rețeta menționată, permiteți-mi să definească câteva termeni pentru începători și pentru cei dintre voi care se familiarizează cu Ajax:

  • Eveniment - Aceasta înseamnă că sa întâmplat ceva. În mod literal, ar putea însemna că utilizatorul a redimensionat fereastra browserului, utilizatorul a tastat ceva într-un câmp de introducere sau utilizatorul a dat clic pe un element.
  • Cerere - Acesta este ceea ce browserul trimite serverului. Aceasta poate conține un set de date pe care serverul trebuie să le proceseze; în caz contrar, poate fi doar un semnal că utilizatorul a declanșat un eveniment.
  • Organizatorul evenimentului - Aceasta este o funcție care răspunde când sa întâmplat ceva. Aceasta este, de obicei, o funcție care se află pe server și procesează datele trimise după declanșarea evenimentului de mai sus.
  • Raspuns - Acestea sunt datele pe care manipulatorul de evenimente le returnează browserului și care se utilizează pentru actualizarea paginii.

Cu aceasta a spus, aici este reteta care este folosit pentru a formula o cerere Ajax în contextul WordPress (atât în ​​tabloul de bord, cât și în teme sau pe frontend):

  1. Introduceți un element pe care utilizatorul îl va face clic și va configura un handler de evenimente utilizând JavaScript pentru a trimite solicitarea.
  2. Definiți modulul de tratare a evenimentului în functions.php fișier dacă lucrați cu o temă sau în cazul dvs. plugin.php dacă lucrați cu un plugin.
  3. Scrieți JavaScript pentru a gestiona răspunsul de la distribuitorul evenimentului.

Acțiuni necesare și filtre

Pentru cei dintre dvs. care au citit seria mea anterioară despre Ajax în tabloul de bord sau care sunt familiarizați cu Ajax în WordPress, probabil că sunteți deja familiarizați cu fișierele și cârligele necesare pentru implementarea lui Ajax.

Specific:

  • ajaxurl este adresa URL furnizată de WordPress la care trimitem cererea noastră.
  • wp_ajax_my_action este cârligul pe care-l folosim pentru a vă implica în operatorul nostru de evenimente.

Pentru o reîmprospătare completă, asigurați-vă că ați terminat proiectul pe GitHub.

Implementarea Ajax pe partea cu care se confruntă publicul este foarte asemănătoare, dar necesită două lucruri:

  • Importarea bibliotecii Ajax WordPress
  • Două cârlige - una dintre ele este aceeași cu cea menționată mai sus.

În următoarea postare, vom petrece timp uitându-ne la modul de a importa biblioteca Ajax WordPress și cum să profitați de ea, dar cheia de înțeles în restul postului sunt cele două cârlige care sunt necesare pentru înființarea manipulatoare de evenimente.

wp_ajax_my_action Cârlig

wp_ajax_my_action cârligul este același cu cel pe care îl folosim atunci când lucrăm cu Ajax în tabloul de bord. Aceasta ne permite să oferim acțiuni Ajax activate utilizatorilor care sunteți logat în WordPress.

Asta înseamnă că veți folosi acest cârlig dacă doriți să introduceți funcționalitatea Ajax utilizatorilor care sunt administratori, editori, contribuitori sau membri ai unui site.

Amintiți-vă că nu declarați wp_ajax_my_action exact așa cum este. În schimb, sufixul "my_action"trebuie înlocuit cu numele metodei. Deci, dacă aveți o funcție cu semnătura:

 funcția my_custom_handler ()  // end my_custom_handler

Apoi, cârligul corespunzător ar arăta astfel:

 funcția my_custom_handler ()  // end my_custom_handler add_action ('wp_ajax_my_custom_handler', 'my_custom_handler');

Desigur, nu este întotdeauna ideal să restricționăm funcționalitatea utilizatorilor conectați la site.

wp_ajax_nopriv_my_action Cârlig

wp_ajax_nopriv_my_action este foarte similar cu wp_ajax_my_action cârlig, cu excepția unui singur lucru:

Ai folosi acest cârlig dacă doriți să introduceți utilizatorilor funcționalitatea Ajax fără a fi nevoie să vă conectați la site.

Funcționează exact în același mod și este supusă exact acelorași reguli, cu excepția "publicului țintă", ca să spun așa. Aceasta înseamnă că vă puteți defini funcțiile astfel:

 funcția my_custom_handler ()  // end theme_custom_handler add_action ('wp_ajax_nopriv_my_custom_handler', 'my_custom_handler');

Simplu, corect?

Dar există o preocupare de securitate aici: pentru că deschideți anumite funcții utilizatorilor care nu sunt conectați, atunci funcțiile cheie de securitate, cum ar fi valorile nonce, nu vor funcționa neapărat, deci trebuie să fiți foarte selectiv în ceea ce privește ceea ce " o să le permiteți oamenilor să facă dacă nu sunt logați pe site.

Ca regulă generală, întotdeauna spun că utilizatorii care nu sunt conectați la site nu ar trebui să aibă acces la modificarea - adică, modificarea, actualizarea, ștergerea sau adăugarea - oricăror date pe site. Sigur, este puțin restrictiv, dar este vorba despre datele de pe blog, site sau aplicație.

De ce să sacrificați asta?


Un exemplu de lucru

În următorul post, vom examina un exemplu de lucru care va permite utilizatorilor conectați la site să marcheze postările pe care le-au citit.

Între timp, asigurați-vă că vă apropiați de următoarele articole, deoarece acestea vor ajuta la consolidarea postului următor:

  • WordPress Filter Reference
  • Referință de acțiune WordPress
  • Ajax în Pluginuri
  • Un primer pe Ajax în tabloul de bord WordPress
Cod