WordPress je jednou z nejoblíbenějších platforem pro vytváření a správu webových stránek. Jednou z funkcí tohoto systému správy obsahu je schopnost snadno vytvářet a přidávat formuláře na web. Aby však byly formuláře uživatelsky přívětivější a snadno použitelné, má smysl přidat funkci Ajax dotazů k jejich odeslání bez restartování stránky.
Vytvoření Ajax formuláře na Wordpressu se může zdát jako obtížný úkol pro lidi bez zkušeností s programováním. Díky jednoduchému a rozsáhlému rozhraní WordPress API se však vytváření této formy stává poměrně jednoduchou záležitostí. V tomto článku se podíváme na kroky potřebné k vytvoření Ajax formuláře na Wordpressu bez použití pluginů.
Než začnete, ujistěte se, že máte na svém webu WordPress účet správce a základní znalosti o vytváření a úpravách témat WordPress. Nyní přejděme k samotnému procesu vytváření formuláře ajax na Wordpressu.
Co je to Ajax forma?
Vytvoření Ajax formuláře na WordPress vám umožní provádět pomocí JavaScriptu a PHP požadavky na server bez restartování stránky. Místo toho, aby uživatel viděl bílou stránku se stažením, jsou data odeslána na server a nový obsah se dynamicky načte, což uživateli zachová pokrok a použitelnost.
Implementace formuláře Ajax na WordPressu může být užitečná při mnoha příležitostech, jako je zasílání komentářů, zpětné vazby, předplatné newsletteru a další. Poskytuje možnost aktualizovat obsah stránky v reálném čase, aniž byste museli restartovat celou stránku. Tím se zkracuje čekací doba na výsledky a poskytuje plynulejší a intuitivnější uživatelský zážitek.
Výhody použití Ajax formy
- Bez restartování stránky: Ajax formulář vám umožňuje odesílat data na server, aniž byste museli restartovat celou stránku. Díky tomu je přechod uživatele plynulejší a pohodlnější.
- Vylepšená uživatelská zkušenost: díky své asynchronní a dynamické povaze umožňuje Ajax tvar okamžitě aktualizovat pouze požadované části stránky, aniž by to ovlivnilo jiné prvky, takže používání webu je rychlejší a uživatelsky přívětivější.
- Zpětná vazba v reálném čase: Ajax formuláře vám umožňují získat zpětnou vazbu ze serveru okamžitě, aniž byste museli stránku restartovat. To uživatelům umožňuje okamžitě vidět výsledky svých akcí a také zpracovávat chyby nebo zadávat úpravy v reálném čase.
- Větší flexibilita a možnosti: Ajax formuláře umožňují složitější a interaktivnější akce, jako je kontrola vstupu za běhu, náhled informací, načítání dat bez restartování stránky a další. To dává vývojářům větší svobodu při vytváření jedinečného a zajímavého uživatelského zážitku.
Jak vytvořím Ajax formulář na Wordpressu?
Vytvoření formuláře Ajax na Wordpressu vám umožní využívat všechny výhody této technologie, aniž byste museli instalovat další pluginy. Zde je jednoduchý a efektivní způsob, jak vytvořit Ajax formulář na vašem WordPress webu.
Krok 1: Vytvořte šablonu stránky pro formulář. Budete potřebovat soubor formuláře (například form.php), který bude obsahovat celý kód formuláře. V tomto souboru můžete přidat potřebné prvky HTML, jako je input, textarea a tlačítko pro odeslání formuláře.
Krok 2: Proveďte změny v souboru functions.php vaše téma WordPress. Přidejte následující kód:
Tento kód přidává požadované soubory JavaScript a konfiguruje objekt ajax_form_object, který obsahuje adresu URL pro odesílání požadavků Ajax a adresu URL pro přesměrování uživatele po odeslání formuláře.
Krok 3: Vytvořte soubor ajax-form.js ve složce vašeho tématu WordPress. Vložte do tohoto souboru následující kód:
Tento kód zpracovává událost odeslání formuláře a odešle požadavek Ajax na server. Po úspěšném zpracování žádosti bude uživatel přesměrován na zadanou stránku.
Krok 4: Vložte následující kód do souboru formuláře (form.php) pro přidání speciální třídy a identifikátoru do formuláře:
Krok 5: Přidejte následující kód do souboru functions.php vaše téma WordPress:
Tento kód zpracovává požadavek Ajax pro odeslání formuláře a vrátí odpovídající odpověď na dotaz. Musíte přidat svůj vlastní kód pro zpracování formuláře uvnitř funkce ajax_form_submit ().
Nyní máte na svém WordPress webu Ajax formulář, který odesílá data bez restartování stránky. Můžete jej dále nakonfigurovat přidáním dalších polí, validací formuláře atd., pomocí poskytnutého kódu v článku a dokumentaci WordPress.
Začínáme s Ajax formou
Vytvoření Ajax formuláře na Wordpressu bez použití pluginů bude vyžadovat některé základní znalosti o práci s JavaScriptem a PHP. V této části se podíváme na základní kroky potřebné k zahájení práce s formou Ajax.
Prvním krokem bude vytvoření formuláře HTML, který budeme odesílat pomocí dotazu Ajax. V souboru šablony WordPress (například v souboru page.php) je třeba přidat následující kód:
">
V kódu jsme vytvořili běžný HTML formulář se dvěma vstupními poli (název a e-mail) a tlačítkem pro odeslání. Důležité je, že jsme přidali atributy id a name pro každé pole, abychom mohli přistupovat k hodnotám polí pomocí JavaScriptu.
Přidali jsme také skryté pole action s hodnotou "ajax_form_submit", aby WordPress věděl, jakou funkci PHP volat, když obdrží dotaz Ajax. Použili jsme také funkce wp_nonce_field Chcete-li do formuláře přidat ochranný Token, abyste zabránili výměně dat na serveru.
V další části se podíváme na vytvoření příslušné funkce PHP, která zpracuje Ajax dotaz a odešle e-mail s hodnotami polí.
Odesílání dat Ajax-formuláře
K odesílání dat Ajax formuláře na WordPress bez použití pluginů budeme muset použít vestavěné funkce WordPress a JavaScript.
Nejprve přidáme obslužnou rutinu události na tlačítko odeslat formulář pomocí JavaScriptu.
document.querySelector('#my-form-submit-button').addEventListener('click', function() );Poté vytvoříme funkci, která bude spuštěna při odesílání formuláře. Tato funkce bude k odesílání dat používat funkci ajax z WordPressu.
function ajaxFormSubmit()Nyní musíme na server přidat obslužnou rutinu pro náš dotaz. Za tímto účelem vytvoříme funkci v souboru functions.php vašeho tématu.
function my_ajax_form_handler() true);wp_send_json($response);>add_action('wp_ajax_my_ajax_form', 'my_ajax_form_handler');add_action('wp_ajax_nopriv_my_ajax_form', 'my_ajax_form_handler');A nakonec musíme přidat skript PHP pro zpracování dotazu do našeho formuláře na webu.
Toto je příklad jednoduchého způsobu, jak vytvořit a odeslat Ajax formulář na WordPress bez použití dalších pluginů. Možná budete muset před odesláním formuláře na server přidat další logiku zpracování dat nebo další kontroly, v závislosti na vašich potřebách.
Získávání a zpracování dat Ajax-formuláře
Chcete-li získat a zpracovat data odeslaná prostřednictvím formuláře Ajax na Wordpressu, musíte do souboru functions přidat příslušnou obslužnou rutinu.php vašeho tématu. Tento obslužný program bude proveden, když je formulář odeslán.
Prvním krokem je použití standardního háku "wp_ajax", který se používá ke zpracování Ajax dotazů ve WordPressu. Při odesílání formuláře vytvoříme funkci, která bude pro tohoto Hooka vyvolána.
Uvnitř funkce můžete získat data odeslaná pomocí dotazu Ajax pomocí globálního objektu $_POST. Můžete například získat hodnotu pole "name" Z formuláře pomocí $_POST['name'].
Jakmile získáte data, můžete provést potřebné zpracování, jako je validace. Pokud jsou data přípustná, můžete je uložit do databáze nebo s nimi udělat něco jiného.
Na konci obslužného programu je nutné vrátit odpověď zpět do prohlížeče. K tomu můžete použít funkci wp_send_json_success () nebo wp_send_json_error (), které odesílají odpověď ve formátu JSON.
Pokud byla například vaše data úspěšně zpracována, můžete odeslat odpověď ve formě:
wp_send_json_success ('data jsou úspěšně zpracována.' );
Pokud dojde k chybě při zpracování dat, můžete odeslat odpověď ve formě:
wp_send_json_error ('došlo k chybě při zpracování dat.' );
Jakmile vytvoříte obslužnou rutinu v souboru functions.php, můžete přidat odpovídající JavaScript kód pro odeslání dotazu Ajax z vašeho formuláře. Více si o tom můžete přečíst v předchozích částech článku.