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.
Î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:
Relativ ușor de înțeles, corect?
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:
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):
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:
Î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?
Î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: