Opetusohjelma AJAX: n käytöstä WordPressissä

Mainos

AJAX on merkittävä verkkotekniikka, joka muutti meidät yksinkertaisesta ”napsauta linkkiä, siirry toiselle sivulle"Rakenne Internet 1.0.

AJAX, joka tarkoittaa Asynkroninen Javascript ja XML, antaa verkkosivustoille mahdollisuuden noutaa ja näyttää sisältöä dynaamisesti käyttäjän poistumatta nykyiseltä sivulta. Tämä johtaa paljon vuorovaikutteisempaan käyttökokemukseen ja voi myös nopeuttaa asioita, koska kokonaan uutta verkkosivua ei tarvitse ladata. Onneksi AJAX: n käyttö on melko helppoa WordPress-ympäristössä, ja tänään aion näyttää kuinka.

Tätä Ajax-opetusohjelmaa on pidettävä melko edistyneenä, ja sitä jatketaan viimeisimmästä ajasta lähtien, kun opimme Kuinka käyttää mukautettuja tietokantataulukoita Mukautettujen tietokantataulukoiden käyttäminen WordPressissäPikahaku Best of WordPress Plugins -sivulta paljastaa joitain monista ainutlaatuisista ja kapeista tavoista, joilla voit tehdä blogisi työskentelystä vaikeampaa. Entä jos sinulla on jo tietokanta ... Lue lisää WordPress-mallin sisällä - esimerkissäni käytettiin yksinkertaista olemassa olevaa asiakastietojen taulukkoa. Asioiden lisäämiseksi takaisin tietokantaan kuitenkin käytämme vähän AJAX-taikuutta WordPressissä.

Kaikissa tämän päivän opetusohjelmassa olevissa koodeissa viitataan siis viimeksi kirjoittamaamme, mutta jos etsit vain miten tehdä AJAX WordPressissä, se on yhtä merkityksellinen.

Miksi käyttää AJAX: ää?

Yleisin AJAX-käyttö liittyy lomakkeisiin - tarkistetaan, otetaanko käyttäjänimi, tai täytetään loput lomakkeet erilaisilla kysymyksillä antamasi vastauksen mukaan. Periaatteessa kuitenkin käytät AJAX: ää aina kun haluat tapahtuman (kuten käyttäjän napsauttamalla jotain tai kirjoittamalla jotain) sidottu a palvelimen puolella toiminta, joka tapahtuu tausta.

Aiomme käyttää sitä lisätäksesi uusia merkintöjä tärkeään räätälöityyn asiakaskantataulukkoomme, mutta voit todennäköisesti löytää jotain mielenkiintoista.

Katsaus AJAX: n käyttämiseen WordPressissä

1. Muokkaa mukautettua mallia sisällyttääksesi lomakkeen tai javascript-tapahtuman, joka toimittaa tietoja jQuery AJAX: n kautta admin-ajax.php mukaan lukien kaikki postitiedot, jotka haluat välittää. Varmista, että jQuery on ladattu.
2. Määritä teema teemaasi function.php; lukea postimuuttujat ja palauttaa jotain takaisin käyttäjälle, jos haluat.
3. Lisää AJAX-toimintakoukku toiminnollesi.

Lomakkeen luominen

Aloitetaan luomalla käyttöliittymään yksinkertainen lomake uusien asiakkaiden tietojen syöttämistä varten. Se ei ole mitään monimutkaista, vain korvaa mukautetun mallin pääosa tällä viikolla aloittamallamme koodilla, noin is_user_logged_in () -tarkistuksen kohdalla:

if (is_user_logged_in ()):?> 

Nimi:Sähköposti:Puhelin:Osoite:

Ainoa asia, joka voi näyttää outolta, on se, että käytetään piilotettua syöttökenttää, nimeltään toiminta - tämä sisältää sen toiminnon nimen, jonka AJAX: n kautta käynnistämme.

PHP-vastaanotin

Seuraavaksi avaa functions.php ja lisää seuraava rivi varmistaaksesi, että jQuery ladataan sivustollesi:

wp_enqueue_script (jquery ');

Perusrakenne AJAX-puhelun kirjoittamiseen on seuraava:

toiminto myFunction () { //tee jotain. kuolla(); } add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');

Nämä kaksi viimeistä linjaa ovat toimintakoukkuja, jotka kertovat WordPressistä "Minulla on toiminto nimeltään myFunction, ja haluan sinun kuuntelevan sitä, koska sitä kutsutaan AJAX-käyttöliittymän kautta" - ensimmäinen on järjestelmänvalvojan tason käyttäjille, wp_ajax_nopriv_ on tarkoitettu käyttäjille, jotka eivät ole kirjautuneena sisään. Tässä on täydellinen koodi kohteelle functions.php jota aiomme käyttää tietojen lisäämiseen erityisasiakkaidemme taulukkoon, jonka selitän pian:

wp_enqueue_script (jquery '); toiminto addCustomer () {global $ wpdb; $ nimi = $ _POST ['nimi']; $ phone = $ _POST ['puhelin']; $ email = $ _POST ['email']; $ osoite = $ _POST ['osoite']; if ($ wpdb-> Lisää ( 'asiakkaiden, array ( 'name' => $ name, 'email' => $ email, 'address' => $ address, 'phone' => $ phone. )) FALSE) {echo "Virhe"; } muuten { kaiku "Asiakas" ". $ nimi. "'Lisätty onnistuneesti, rivin tunnus on.. $ wpdb-> insert_id; } kuolla(); } add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // ei oikeastaan ​​tarvita

Kuten aiemmin, julistamme globaali $ wpdb antaa meille suora pääsy tietokantaan. Sitten tartumme LÄHETTÄÄ muuttujat, jotka sisältävät lomaketiedot. IF-lauseen ympäröimä on funktio $ Wpdb-> Lisää, jota käytämme tietojen lisäämiseen taulukkoomme. Koska WordPress tarjoaa erityisiä toimintoja säännöllisten viestien ja metatietojen lisäämiseen, tämä $ Wpdb-> Lisää menetelmää käytetään yleensä vain mukautettuihin taulukoihin. Sinä pystyt lue lisää siitä Codexissa, mutta pohjimmiltaan se vie lisättävän taulukon nimen, jota seuraa ryhmä of sarake / arvo-parit.

VÄÄRÄ tarkistaa, onko lisäystoiminto epäonnistunut, ja jos on, niin se antaa ”virhe“. Jos ei, lähetämme vain viestin käyttäjälle Asiakas X lisättiinja kaikuvat $ Wpdb-> insert_id muuttuja, joka ilmaisee automaattinen lisäysmuuttuja viimeisimmästä lisäysoperaatiosta, joka tapahtui (olettaen, että olet asettanut kentän, joka kasvaa automaattisesti, kuten tunnus).

Lopuksi kuolla() ohittaa oletuksen kuolla (0) tarjoaa WordPress - tämä ei ole sinänsä välttämätöntä, mutta ilman sitä aiot saada 0 liitteenä kaiken, jonka lähetät takaisin mallipohjaan.

Javascript

Viimeinen vaihe on maaginen bitti - todellinen Javascript, joka aloittaa AJAX-puhelun. Huomaat, että toimintakentä jätettiin tyhjäksi aiemmin lisäämässä muodossa. Tämä johtuu siitä, että aiomme korvata tämän AJAX-puhelumme kanssa. Yleinen tapa tehdä tämä olisi:

jQuery.ajax ({tyyppi: "POST", URL: "/wp-admin/admin-ajax.php", // PHP-käsittelijän tiedostotiedot: "myDataString", menestys: toiminto (tulokset) {// tee jotain palautetut tiedot})};

Se on käyttämämme AJAX-puhelun perusrakenne, mutta ei varmasti ainoa tapa, jolla voit tehdä sen. Saatat ihmetellä, miksi me tarkoitamme wp-admin täällä, vaikka tämä on sivuston etuosassa. Tämä on juuri missä AJAX-käsittelijä asuu riippumatta siitä, käytätkö sitä etu- tai järjestelmänvalvojan puoleisiin toimintoihin - sekava, tiedän. Liitä seuraava koodi suoraan asiakaspohjaan:

Ensimmäisessä rivissä liitämme ajaxSubmit-toimintomme aikaisempaan muotoon - joten kun käyttäjä napsauttaa lähetä, se menee erityisen AJAX-toimintomme kautta. Ilman tätä muoto ei tee mitään. Meidän ajaxSubmit () Ensimmäinen asia, jonka teemme sarjallistaa() lomake. Tämä vain ottaa kaikki muotoarvot ja muuttaa ne yhdeksi pitkäksi merkkijonoksi, jonka PHP-jäsenemme jäsentää myöhemmin. Jos kaikki menee oikein, laitamme palautetut tiedot DIV: hen palautteen tunnuksella.

Se siitä. Tallenna kaikki, päivitä ja yritä lähettää lomaketietoja. Jos sinulla on ongelmia, voit tarkastella täällä olevan sivumallin täydellinen koodi (perustuu oletusarvoiseen kaksitoista yksitoista teemaa), ja lisättävä koodi function.php täältä(älä korvaa, lisää vain tämä loppuun).

Asiat, jotka tulee pitää mielessä

turvallisuus: Tätä koodia ei voida valmistaa, ja se on tarkoitettu vain oppimiseen. Olemme jättäneet pois yhden avainkysymyksen, ja se on a: n käyttö WP-seksuaalirikollinen - WordPressin muodostama kertaluonteinen koodi, joka varmistaa, että AJAX-pyyntö tulee vain sieltä, mihin se oli tarkoitettu; salasana, jos haluat. Ilman sitä toimintoasi voidaan tehokkaasti käyttää hyväksi satunnaisen datan lisäämiseksi. SQL-injektiohyökkäykset eivät kuitenkaan ole ongelma, koska reititimme kyselyt WordPressin kautta $ Wpdb-> Lisää toiminto - WordPress puhdistaa kaikki tulot puolestasi ja tekee niistä turvallisia.

Asiakastaulukon päivittäminen: Tällä hetkellä lähetämme vain vahvistusviestin, mutta asiakastaulukkoa ei päivitetä - lisämerkinnät näet vain, jos päivität sivua (millainen tappio aikoo tehdä tämän kaiken AJAX: n kautta). Katso, voitko tehdä uuden AJAX-toiminnon, joka pystyy tuottamaan taulukon dynaamisesti.

Tulon validointi: koska lomaketietojen kanssa ei käytetä validointia, on todella mahdollista lisätä tyhjiä merkintöjä tai useita merkintöjä, jos painat liian monta kertaa. Jotkut syötevahvistukset lomakekenttiin, niiden tyhjentäminen, kun ne on täytetty, samoin kuin SQL tarkistaa sähköposti- tai puhelinnumero, jota ei vielä ole tietokannassa, olisi hyödyllistä.

Se on minulta tällä viikolla - jos sinulla on ollut ongelmia tämän opetusohjelman seuraamisen kanssa, ota rohkeasti yhteyttä kommenttien kautta ja teen parhaani auttaakseni sinua; tai jos yrität muokata tätä jollain tavalla, voit poistua ideoista minulta. Toivon, että tämä todella näyttää kuinka paljon voit tehdä WordPressistä yksinkertaisesti yhdistämällä vähän JavaScriptiä, PHP: tä ja MySQL: tä. Kuten koskaan, älä unohda tarkistaa kaikkia muita WordPress-artikkelit.