Vadnica o uporabi AJAX v WordPressu

Oglas

AJAX je izjemna spletna tehnologija, ki nas je preselila mimo preprostega “kliknite povezavo, pojdite na drugo stran"Struktura Internet 1.0.

AJAX, kar pomeni Asinhroni Javascript in XML, omogoča spletnim mestom, da dinamično pridobivajo in prikazujejo vsebino, ne da bi se uporabnik oddaljil od trenutne strani. To vodi do veliko bolj interaktivne uporabniške izkušnje in stvari lahko tudi pospeši, saj ni treba naložiti povsem nove spletne strani. Na srečo je uporaba AJAX v WordPress okolju dokaj enostavna, danes pa vam bom pokazal, kako.

To Ajaxovo vadbo je treba obravnavati kot dokaj napredno in se nadaljuje od zadnjega časa, kjer smo se učili kako uporabljati tabele baz podatkov po meri Delo s tabelami podatkovnih zbirk po meri v WordPressuHiter pregled strani Best of WordPress Vtičniki bo razkril nekaj številnih edinstvenih in nišnih načinov, kako lahko vaš blog še bolj dela. Kaj pa, če že imate bazo podatkov ... Preberi več znotraj WordPress predloge - v mojem primeru je bila uporabljena preprosta obstoječa tabela podatkov o strankah. Ko gre za vstavljanje stvari nazaj v bazo, bomo v WordPressu uporabili malo AJAX magije.

Vsa koda v današnji vadnici se bo torej sklicevala na tisto, kar smo napisali zadnjič, če pa samo iščete, kako narediti AJAX v WordPressu, je enako enako.

Zakaj uporabljati AJAX?

Najpogostejša uporaba AJAX je povezana z obrazci - preverjanje, ali je uporabniško ime uporabnik, ali pa preostanek obrazca napolnite z različnimi vprašanji, odvisno od določenega odgovora. V bistvu AJAX uporabljate kadarkoli želite dogodek (kot uporabnik, če nekaj klikne ali kaj vnese) vezan na a na strani strežnika dejanje, ki se pojavi v ozadje.

Uporabili ga bomo za dodajanje novih vnosov v našo pomembno tabelo baze podatkov po meri strank, toda verjetno lahko najdete kaj bolj zanimivega.

Pregled, kako uporabljati AJAX v WordPressu

1. Uredite predlogo po meri, tako da vključite obrazec ali dogodek JavaScript, ki bo podatke pošiljal prek jQuery AJAX admin-ajax.php vključno s podatki o objavi, ki jih želite posredovati. Prepričajte se, da se jQuery nalaga.
2. Določite funkcijo v temi teme function.php; preberite spremenljivke objav in jih po želji vrnite uporabniku.
3. Dodajte AJAX akcijski kavelj za svojo funkcijo.

Ustvarjanje obrazca

Začnimo z ustvarjanjem preprostega obrazca na sprednji strani za vnos novih podatkov o stranki. Nič zapletenega ni, samo zamenjajte glavni del predloge po meri s to kodo, ki smo jo začeli prejšnji teden, tam, kjer se pojavi preverjanje is_user_logged_in ():

če (is_user_logged_in ()):?> 

Ime:E-naslov:Telefon:Naslov:

Edino, kar se vam lahko zdi čudno, je uporaba skritega vhodnega polja, imenovanega ukrepanje - vsebuje ime funkcije, ki jo bomo sprožili prek AJAX.

Sprejemnik PHP

Nato odprite function.php in dodajte naslednjo vrstico, da zagotovite, da se jQuery nalaga na vašem spletnem mestu:

wp_enqueue_script ('jquery');

Osnovna struktura za pisanje AJAX klica je naslednja:

funkcija myFunction () { //naredi kaj. die (); } dodajanje ('wp_ajax_myFunction', 'myFunction'); dodajanje ('wp_ajax_nopriv_myFunction', 'myFunction');

Zadnji dve vrstici sta kljuka, ki sporoča WordPress "Imam funkcijo, imenovano myFunction, in želim, da jo prisluhnete, ker jo boste poklicali prek AJAX vmesnika." - prva je za uporabnike na ravni administratorja, medtem ko wp_ajax_nopriv_ je za uporabnike, ki niso prijavljeni. Tu je popolna koda za function.php ki jih bomo uporabili za vstavljanje podatkov v našo posebno tabelo za stranke, kar bom razložil na kratko:

wp_enqueue_script ('jquery'); funkcija addCustomer () {globalno $ wpdb; $ name = $ _POST ['ime']; $ phone = $ _POST ['telefon']; $ email = $ _POST ['email']; $ address = $ _POST ['naslov']; if ($ wpdb-> insert ('stranke', matrika ( 'ime' => $ ime, 'email' => $ email, 'naslov' => $ naslov, 'telefon' => $ telefon. )) FALSE) {echo "Napaka"; } drugače { odmev "Stranka" ". $ name. "" uspešno dodan, ID vrstice je ". $ wpdb-> insert_id; } die (); } dodajanje ('wp_ajax_addCustomer', 'addCustomer'); dodajanje ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // ni zares potreben

Tako kot prej, to razglasimo globalni $ wpdb da nam omogoči neposreden dostop do baze podatkov. Nato zgrabimo POST spremenljivke, ki vsebujejo podatke obrazca. Funkcija je obdana v stavku IF $ wpdb-> vstavite, kar uporabljamo za vstavljanje podatkov v našo tabelo. Ker WordPress zagotavlja posebne funkcije za vstavljanje rednih objav in metapodatkov, je to $ wpdb-> vstavite metoda se običajno uporablja samo za tabele po meri. Ti lahko več o tem preberite na Codexu, toda v osnovi je potrebno vstaviti ime tabele, ki mu sledi an matrika od pari stolpcev / vrednosti.

The LAŽNO preveri, ali funkcija vstavljanja ni uspela, in če je tako, odda »napaka“. V nasprotnem primeru uporabniku samo pošljemo sporočilo Stranka X je bila dodanain odmeva $ wpdb-> insert_id spremenljivko, ki označuje samodejno povečanje spremenljivka zadnjega postopka vstavljanja, ki se je zgodil (ob predpostavki, da nastavite polje, ki se samodejno poveča, na primer ID).

Končno die () bo razveljavila privzeto umreti (0) ki jo ponuja WordPress - to ni nujno, vendar je brez tega ne boste dobili 0 doda na konec vsega, kar pošljete nazaj v predlogo.

Javascript

Zadnji korak je čarobni bit - dejanski Javascript, ki bo sprožil AJAX klic. Opazili boste, da je v obrazcu, ki smo ga dodali prej, prazno polje ostalo prazno. To je zato, ker bomo s klicem AJAX to preglasili Splošni način za to bi bil:

jQuery.ajax ({vrsta: "POST", url: "/wp-admin/admin-ajax.php", // naši podatki datoteke datoteke za obdelavo PHP: "myDataString", uspeh: funkcija (rezultati) {// naredite nekaj s vrnjeni podatki})};

To je osnovna struktura AJAX klica, ki ga bomo uporabljali, vendar zagotovo ni edini način, kako to lahko storite. Morda se sprašujete, zakaj se sklicujemo wp-admin tukaj, čeprav bo to na sprednjem delu mesta. Tukaj je samo AJAX upravljavec prebiva, ne glede na to, ali ga uporabljate za sprednje ali skrbniške funkcije - zmedeno, vem. Naslednjo kodo prilepite neposredno v predlogo za stranke:

V prvi vrstici priključimo funkcijo ajaxSubmit na obrazec, ki smo ga naredili prej - torej, ko uporabnik klikne prijavo, gre prek naše posebne funkcije AJAX. Brez tega naša oblika ne bo nič. V našem ajaxSubmit () funkcija, prva stvar, ki jo naredimo je serializirati () oblika. To samo vzame vse vrednosti obrazca in jih pretvori v en dolg niz, ki ga bo naš PHP razčlenil pozneje. Če se vse izkaže pravilno, vrnemo vrnjene podatke v DIV z idom povratnih informacij.

To je to. Shranite vse, osvežite in poskusite poslati nekaj podatkov obrazca. Če imate težave, si lahko ogledate tu je celotna koda predloge strani (temelji na privzeti enaindvajseti temi)in kodo, ki jo želite dodati function.php tukaj(ne zamenjajte, samo dodajte to na koncu).

Stvari, ki jih je treba imeti v mislih

Varnost: Ta koda še ni pripravljena in je namenjena samo učenju. Pustili smo eno ključno točko in to je uporaba wp-nonce - enkratna koda, ustvarjena s strani WordPress, ki zagotavlja, da zahteva AJAX prihaja samo od tam, kjer je bila predvidena; geslo, če hočete. Brez tega bi vašo funkcijo lahko učinkovito izkoristili za vstavljanje naključnih podatkov. Vendar napadi vbrizgavanja SQL niso problem, ker smo poizvedbe preusmerili prek WordPress-a $ wpdb-> vstavite funkcija - WordPress očisti vse vložke za vas in jih naredi varne.

Posodabljanje tabele strank: Trenutno vrnemo samo potrditveno sporočilo, vendar se tabela strank ne posodablja - dodatne vnose boste videli le, če osvežite stran (kateri tip premaga namen tega vsega prek AJAX-a). Oglejte si, ali lahko naredite novo funkcijo AJAX, ki lahko dinamično oddaja tabelo.

Validacija vnosa: ker se s podatki obrazca ne potrdi, je dejansko mogoče dodati prazne vnose ali več vnosov, če prevečkrat pritisnete. Koristno bi bilo nekaj potrditve vnosa v poljih obrazcev, ko jih počistite, ko jih izpolnite, pa tudi SQL za preverjanje e-poštne številke ali telefonske številke, ki v bazi podatkov še ne obstaja.

To je to od mene ta teden - če imate težave s te vadbo, se obrnite na komentarje in po najboljših močeh vam bom pomagal; ali če to poskušate na nek način prilagoditi, se obrnite na ideje. Upam, da bo to resnično pokazalo, koliko lahko naredite znotraj WordPressa, tako da preprosto kombinirate malo JavaScript, PHP in MySQL. Kot vedno ne pozabite preveriti vseh ostalih Članki v WordPressu.