Výukový program o používání AJAX ve WordPressu

reklama

AJAX je pozoruhodná webová technologie, která nás posunula mimo jednoduchou „klikněte na odkaz, přejděte na jinou stránku“Struktura Internet 1.0.

AJAX, což znamená Asynchronní Javascript a XML, umožňuje webům dynamicky načítat a zobrazovat obsah, aniž by se uživatel vzdálil od aktuální stránky. To vede k mnohem interaktivnějšímu dojmu uživatelů a může to také urychlit, protože nemusí být načtena celá nová webová stránka. Naštěstí je používání AJAX docela snadné v prostředí WordPress a dnes vám ukážu, jak na to.

Tento výukový program Ajax by měl být považován za poměrně pokročilý a pokračuje od poslední doby, kdy jsme se dozvěděli jak používat vlastní databázové tabulky Práce s tabulkami vlastních databází ve WordPressuRychlá kontrola stránky Best of WordPress Plugins odhalí některé z mnoha jedinečných a úzce specializovaných způsobů, jak zlepšit práci blogu. Co když už máte databázi ... Přečtěte si více z šablony WordPress - v mém příkladu byla použita jednoduchá existující tabulka zákaznických dat. Pokud však jde o vkládání věcí zpět do databáze, budeme v rámci WordPress využívat trochu magie AJAX.

Celý kód v dnešním tutoriálu se proto bude odkazovat na to, co jsme napsali naposledy, ale pokud hledáte pouze to, jak dělat AJAX ve WordPress, pak je stejně relevantní.

Proč používat AJAX?

Nejběžnější použití AJAXu se týká formulářů - kontrola, zda je přijato uživatelské jméno, nebo vyplnění zbytku formuláře různými otázkami v závislosti na konkrétní odpovědi, kterou uvedete. V podstatě však používáte AJAX, kdykoli chcete událost (jako uživatel, který něco klikne nebo něco zadá) vázáno na na straně serveru akce, ke které dochází v systému Pozadí.

Budeme jej používat k přidávání nových položek do naší důležité přizpůsobené tabulky zákaznických databází, ale pravděpodobně přijdete s něčím více vzrušujícím.

Přehled použití AJAX ve WordPressu

1. Upravte svou vlastní šablonu tak, aby zahrnovala událost formuláře nebo javascriptu, do které budou data odesílána prostřednictvím jQuery AJAX admin-ajax.php včetně jakýchkoli údajů o příspěvcích, které chcete předat. Ujistěte se, že se načítá jQuery.
2. Definujte funkci v motivu function.php; číst proměnné příspěvku a v případě potřeby něco vrátit uživateli.
3. Přidat Akční háček AJAX pro vaši funkci.

Vytvoření formuláře

Začněme vytvořením jednoduchého formuláře na front-endu pro zadávání nových zákaznických údajů. Není to nic složitého, stačí nahradit hlavní část vaší vlastní šablony tímto kódem, který jsme začali minulý týden, kolem kterého se objevuje kontrola is_user_logged_in ():

if (is_user_logged_in ()):?> 

Název:E-mailem:Telefon:Adresa:

Jediná věc, která by vám mohla připadat zvláštní, je, že existuje skryté vstupní pole zvané akce - obsahuje název funkce, kterou spustíme přes AJAX.

Přijímač PHP

Dále otevřete function.php a přidejte následující řádek, abyste zajistili, že se na váš web načítá jQuery:

wp_enqueue_script ('jquery');

Základní struktura pro psaní volání AJAX je následující:

function myFunction () { //dělej něco. zemřít(); } add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');

Poslední dva řádky jsou akční háčky, které říkají WordPress "Mám funkci nazvanou myFunction a chci, abys ji poslouchal, protože se to bude volat přes rozhraní AJAX" - první je pro uživatele na úrovni správce, zatímco wp_ajax_nopriv_ je pro uživatele, kteří nejsou přihlášeni. Zde je kompletní kód function.php že použijeme k vložení dat do naší tabulky speciálních zákazníků, což krátce vysvětlím:

wp_enqueue_script ('jquery'); function addCustomer () {global $ wpdb; $ name = $ _POST ['name']; $ phone = $ _POST ['phone']; $ email = $ _POST ['email']; $ address = $ _POST ['address']; if ($ wpdb-> insert ('customers', array ( 'name' => $ name, 'email' => $ email, 'address' => $ address, 'phone' => $ phone. )) FALSE) {echo "Error"; } jinde { echo "Customer". $ name. "'úspěšně přidáno, ID řádku je". $ wpdb-> insert_id; } zemřít(); } add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // není to opravdu potřeba

Stejně jako předtím i my prohlašujeme globální $ wpdb k přímému přístupu k databázi. Pak jsme chytili POŠTA proměnné, které obsahují data formuláře. V příkazu IF je funkce $ wpdb-> insert, což je to, co používáme pro vkládání dat do naší tabulky. Protože WordPress poskytuje specifické funkce pro vkládání pravidelných příspěvků a metadat, toto $ wpdb-> insert metoda se obecně používá pouze pro vlastní tabulky. Můžeš přečtěte si o tom více v Codexu, ale v podstatě to vezme název tabulky, která má být vložena, následovaný pole z páry sloupců / hodnot.

NEPRAVDIVÉ zkontroluje, zda funkce vložení selhala, a pokud ano, vydává „chyba“. Pokud ne, posíláme pouze zprávu uživateli Byl přidán zákazník X, a ozvěna $ wpdb-> insert_id proměnná, která označuje proměnná auto-increment poslední operace vložení, která se stala (za předpokladu, že jste nastavili pole, které se automaticky zvyšuje, například ID).

Konečně, zemřít() přepíše výchozí nastavení zemřít (0) poskytované WordPress - to není samo o sobě podstatné, ale bez něj se nedostanete 0 připojeno na konec všeho, co pošlete zpět do šablony.

Javascript

Posledním krokem je magický bit - skutečný Javascript, který zahájí volání AJAX. Všimněte si, že ve formuláři, který jsme přidali dříve, bylo pole akce prázdné. Je to proto, že to překonáme naším hovorem AJAX. Obecným způsobem, jak toho dosáhnout, by bylo:

jQuery.ajax ({typ: "POST", url: "/wp-admin/admin-ajax.php", // data souboru s popisovačem PHP: "myDataString", success: function (results) {// něco s vrácená data})};

Toto je základní struktura volání AJAX, kterou budeme používat, ale rozhodně to není jediný způsob, jak to udělat. Možná vás zajímá, proč to máme na mysli wp-admin zde, i když to bude na front-end webu. To je místo, kde Obsluha AJAX bydliště, ať už jej používáte pro přední nebo administrativní funkce - matoucí, vím. Vložte následující kód přímo do zákaznické šablony:

V prvním řádku připojujeme naši funkci ajaxSubmit k formuláři, který jsme vytvořili dříve - takže když uživatel klepne na odeslání, přejde přes naši speciální funkci AJAX. Bez tohoto, náš formulář nebude dělat nic. V našem ajaxSubmit () funkce, první věc, kterou děláme, je serializovat () formulář. Toto prostě vezme všechny hodnoty formuláře a změní je na jeden dlouhý řetězec, který naše PHP bude analyzovat později. Pokud to všechno dopadne dobře, vložíme vrácená data do DIV s id zpětné vazby.

A je to. Uložte vše, obnovte a zkuste odeslat některá data formuláře. Pokud máte problémy, můžete si to prohlédnout celý kód šablony stránky zde (na základě výchozího motivu dvacet jedenáct)a kód, který chcete přidat function.php zde(nenahrazujte, stačí přidat na konec).

Co byste měli mít na paměti

Bezpečnostní: Tento kód není připraven k produkci a slouží pouze pro účely učení. Vynechali jsme jeden klíčový bod, a to je použití wp-nonce - jednorázový kód vygenerovaný programem WordPress, který zajišťuje, že požadavek AJAX pochází pouze z místa, kde byl zamýšlen; klíč, pokud chceš. Bez toho by vaše funkce mohla být efektivně využita k vložení náhodných dat. SQL injekční útoky však nejsou problémem, protože jsme dotazy směrovali přes WordPress $ wpdb-> insert funkce - WordPress pro vás vyčistí všechny vstupy a zajistí jejich bezpečnost.

Aktualizace tabulky zákazníků: Momentálně posíláme pouze potvrzovací zprávu, ale tabulka zákazníků se neaktualizuje - další položky se zobrazí, pouze pokud aktualizujete stránku (jaký druh překonává účel toho všeho prostřednictvím AJAX). Zjistěte, zda můžete vytvořit novou funkci AJAX, která dokáže dynamicky výstup tabulky.

Ověření vstupu: protože u dat formuláře nedochází k ověření, je možné přidat příliš mnoho prázdných nebo více záznamů, pokud stisknete příliš mnohokrát. Užitečné by bylo ověření vstupu do polí formuláře, jejich vymazání po dokončení a také SQL pro kontrolu e-mailu nebo telefonního čísla, které v databázi již neexistuje.

To je ode mě tento týden - pokud máte nějaké problémy s dodržováním tohoto tutoriálu, pak se neváhejte spojit prostřednictvím komentářů a udělám vše, co bude v našich silách, abych vám pomohl; nebo pokud se to snažíte nějakým způsobem přizpůsobit, klidně mě odrazte. Doufám, že to opravdu ukazuje, kolik toho můžete udělat v rámci WordPress jednoduše kombinací malého JavaScriptu, PHP a MySQL. Jako vždy, nezapomeňte vyzkoušet všechny naše ostatní Články WordPress.