Un tutorial despre utilizarea AJAX în WordPress

Publicitate

AJAX este o tehnologie web remarcabilă care ne-a mutat dincolo de simplul „faceți clic pe link, accesați o altă pagină”Structura din Internet 1.0.

AJAX, care înseamnă Javascript și XML asincron, permite site-urilor să preia și să afișeze dinamic conținutul fără ca utilizatorul să se îndepărteze de pagina curentă. Acest lucru duce la o experiență de utilizator mult mai interactivă și poate accelera lucrurile, deoarece nu este necesară încărcarea unei noi pagini web. Din fericire, utilizarea AJAX este destul de ușor de făcut din mediul WordPress, iar astăzi vă voi arăta cum.

Acest tutorial Ajax ar trebui să fie considerat destul de avansat și continuă din ultima perioadă în care am învățat cum se utilizează tabele de baze de date personalizate Lucrul cu tabele de baze de date personalizate în WordPressO scanare rapidă a paginii Cele mai bune pluginuri WordPress vă va dezvălui câteva dintre multe moduri unice și de nișă prin care puteți face blogul dvs. să funcționeze mai greu. Ce se întâmplă dacă aveți deja o bază de date de ... Citeste mai mult

din interiorul unui șablon WordPress - în exemplul meu, a fost utilizat un simplu tabel de date despre clienți. Cu toate acestea, când vine vorba de inserarea lucrurilor în baza de date, vom folosi o mică magie AJAX în WordPress.

Prin urmare, toate codurile din tutorialul de astăzi vor face referire la ceea ce am scris ultima dată, dar dacă nu uitați doar să faceți AJAX în WordPress, atunci este la fel de relevant.

De ce să folosiți AJAX?

Cea mai frecventă utilizare a AJAX este legată de formulare - verificarea dacă este luat un nume de utilizator sau popularea restului formularului cu întrebări diferite, în funcție de un anumit răspuns. Practic, totuși, utilizați AJAX ori de câte ori doriți un eveniment (cum ar fi un utilizator care face clic pe ceva sau introduceți ceva) legat de a partea de server acțiune care are loc în fundal.

O vom folosi pentru a adăuga noi intrări la tabelul nostru important de baze de date pentru clienți, dar probabil veți găsi ceva mai interesant.

Prezentare generală a modului de utilizare a AJAX în WordPress

1. Editați șablonul personalizat pentru a include un formular sau un eveniment javascript care va trimite date prin jQuery AJAX admin-ajax.php inclusiv orice date de postare pe care doriți să le transmiteți. Asigurați-vă că se încarcă jQuery.
2. Definiți o funcție din tema dvs. function.php; citiți variabilele post și întoarceți ceva înapoi utilizatorului, dacă doriți.
3. Adăugați un Cârlig de acțiune AJAX pentru funcția ta.

Crearea formularului

Să începem prin crearea unui formular simplu pe front-end pentru a introduce noi detalii despre clienți. Nu este nimic complicat, înlocuiți doar partea principală a șablonului dvs. personalizat cu acest cod pe care l-am început săptămâna trecută, în jurul locului în care are loc verificarea is_user_logged_in ():

if (is_user_logged_in ()):?> 

Nume:E-mail:Telefon:Abordare:

Singurul lucru care ar putea arăta ciudat este faptul că există utilizarea unui câmp de introducere ascuns numit acțiune - aceasta conține numele funcției pe care o vom declanșa prin AJAX.

Receptorul PHP

Apoi, deschideți-vă functions.php și adăugați următoarea linie pentru a vă asigura că jQuery este încărcat pe site-ul dvs.:

wp_enqueue_script ( 'jquery');

Structura de bază pentru scrierea unui apel AJAX este următoarea:

function myFunction () { //Fă ceva. a muri(); } add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');

Aceste ultime două rânduri sunt cârlige de acțiune care spun WordPress „Am o funcție numită myFunction și vreau să o ascultați pentru că va fi apelată prin interfața AJAX” - primul este pentru utilizatorii de nivel admin, în timp ce wp_ajax_nopriv_ este pentru utilizatorii care nu s-au autentificat. Iată codul complet pentru functions.php pe care o vom folosi pentru a insera date în tabelul nostru special de clienți, ceea ce voi explica în scurt timp:

wp_enqueue_script ( 'jquery'); function addCustomer () {global $ wpdb; $ nume = $ _POST ['nume']; $ telefon = $ _POST ['telefon']; $ email = $ _POST ['e-mail']; $ adresa = $ _POST ['adresa']; în cazul în care (( "clienților $ wpdb-> Inserare, matrice ( 'nume' => $ nume, 'email' => $ email, 'adresa' => $ adresa, 'telefon' => $ telefon. )) FALSE) {ecou "Eroare"; } altfel { ecou „Client”. $ nume. "" S-a adăugat cu succes, ID-ul rândului este ". $ wpdb-> insert_id; } a muri(); } add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // nu chiar este nevoie

La fel ca până acum, declarăm global $ wpdb pentru a ne oferi acces direct la baza de date. Ne apucăm apoi de POST variabile care conțin datele formularului. Funcția este înconjurată de o declarație IF $ Wpdb-> Inserare, care este ceea ce folosim pentru a insera date în tabelul nostru. Deoarece WordPress oferă funcții specifice pentru inserarea postărilor obișnuite și a datelor meta, aceasta este $ Wpdb-> Inserare metoda este utilizată în general numai pentru tabele personalizate. Poti citiți mai multe despre asta pe Codex, dar practic este nevoie să fie introdus numele tabelului, urmat de un mulțime de perechi coloană / valoare.

FALS verifică dacă funcția de inserare a eșuat și, dacă da, iese „eroare“. Dacă nu, noi trimitem doar un mesaj utilizatorului Clientul X a fost adăugatși răsunând $ Wpdb-> insert_id variabilă, care indică variabilă auto-increment din ultima operație de inserare care s-a întâmplat (presupunând că ați setat un câmp care crește automat, precum un ID).

In cele din urma, a muri() va trece peste valoarea implicită moare (0) oferit de WordPress - acest lucru nu este esențial ca atare, dar fără el, veți obține 0 anexat la sfârșitul a tot ceea ce trimiteți înapoi la șablon.

Javascriptul

Ultimul pas este bitul magic - Javascript-ul real care va iniția apelul AJAX. Veți observa că în formularul pe care l-am adăugat mai devreme, câmpul de acțiune a fost lăsat necompletat. Acest lucru se datorează faptului că vom trece peste acest lucru cu apelul nostru AJAX. Modul general de a face acest lucru ar fi:

jQuery.ajax ({type: "POST", url: "/wp-admin/admin-ajax.php", // datele noastre de fișiere handler PHP: "myDataString", succes: funcție (rezultate) {// faceți ceva cu date returnate})};

Aceasta este structura de bază a apelului AJAX pe care îl vom folosi, dar cu siguranță nu este singurul mod în care îl puteți face. S-ar putea să vă întrebați de ce ne referim wp-admin aici, chiar dacă acest lucru va fi în partea frontală a site-ului. Acesta este doar locul în care Stivuitor AJAX locuiește, indiferent dacă îl folosești pentru funcții frontale sau admin - confuz, știu. Lipiți următorul cod direct în șablonul clientului:

În prima linie, ne atașăm funcția ajaxSubmit la formularul pe care l-am făcut mai devreme - așa că atunci când utilizatorul face clic pe trimitere, trece prin funcția noastră specială AJAX. Fără aceasta, forma noastră nu va face nimic. În a noastră ajaxSubmit () funcție, primul lucru pe care îl facem este să serialize () forma. Aceasta ia doar toate valorile formei și le transformă într-un șir lung pe care PHP-ul nostru îl va analiza mai târziu. Dacă totul funcționează corect, vom introduce datele returnate în DIV cu id-ul de feedback.

Asta e. Salvați totul, reîmprospătați și încercați să trimiteți câteva date de formular. Dacă aveți probleme, puteți vedea codul complet al șablonului de pagină aici (bazat pe tema implicită douăzeci și unsprezece)și codul la care trebuie adăugat funcții.php aici(nu înlocuiți, adăugați doar la sfârșit).

Lucruri de păstrat în minte

Securitate: Acest cod nu este gata de producție și este destinat numai învățării. Am lăsat un punct cheie și asta este utilizarea unui wp-nonce - un cod unic generat de WordPress care asigură că cererea AJAX vine numai de unde a fost destinată; o cheie dacă vrei. Fără asta, funcția dvs. ar putea fi exploatată eficient pentru a insera date aleatorii. Cu toate acestea, atacurile de injecție SQL nu sunt o problemă, deoarece am trimis interogări prin WordPress $ Wpdb-> Inserare funcție - WordPress curăță toate intrările pentru dvs. și le face sigure.

Actualizarea tabelului de clienți: În momentul de față, trimitem înapoi doar un mesaj de confirmare, dar tabelul clienților nu se actualizează - veți vedea intrările suplimentare doar dacă reîncărcați pagina (ce fel învinge scopul de a face toate acestea prin AJAX). Vedeți dacă puteți face o nouă funcție AJAX care poate ieși dinamic tabelul.

Validare intrare: deoarece nu există nicio validare cu datele din formular, este posibil să adăugați intrări necompletate sau mai multe intrări dacă apăsați de prea multe ori. Ar fi utile unele validări de intrare în câmpurile formularului, ștergerea acestora la finalizare, precum și SQL pentru a verifica adresa de e-mail sau numărul de telefon care nu există deja în baza de date.

Asta e de la mine săptămâna asta - dacă ați avut probleme în urma acestui tutorial, atunci nu ezitați să contactați prin comentarii și voi face tot posibilul să vă ajut; sau dacă încercați să personalizați acest lucru într-un fel, nu ezitați să ne respingeți ideile. Sper că acest lucru va arăta cu adevărat cât de mult puteți face din WordPress doar prin combinarea puțin JavaScript, PHP și MySQL. Ca oricând, nu uitați să le verificați pe toate celelalte noastre Articole WordPress.