Ajax, nebo Asynchronous JavaScript and XML, slouží k komunikaci se skripty na straně serveru a umožňuje načíst dynamický obsah bez nutnosti znovu načíst stránku.

Řekněme, že například stavíte a Webové stránky pro místní charitu a chcete povzbudit pozitivní atmosféru. Můžete přidat tlačítko označené "Ukaž trochu lásky! »S počítadlem na domovské stránce a díky AJAX při každé aktivaci tlačítka (klikl a návštěvník), počítadlo se zvýší bez opětovného načtení stránky.

Toto je příklad, který v tomto kurzu sestavíme.

V tomto tutoriálu se dozvíte více o tom, co je AJAX, jak může být použit a jak s ním vytvářet úžasné funkce na WordPress.

Začněme.

Základy AJAX

• Zdroj AJAX obvykle sleduje následující kroky:
• Zahajte volání AJAX kvůli akci uživatele
• Příjem a zpracování požadavku na serveru
• Zachyťte odpověď a proveďte všechny potřebné akce pomocí JavaScriptu
• Nastavení nového prostředí motivu

Pojďme to uvést do praxe na WordPressu. Náš první příklad zobrazuje jednoduché vyskakovací okno obsahující počet komentářů k článku, když klikneme na nadpis. Použijeme podřízené téma založené na „ dvacet Šestnáct Z WordPress.

Zde je to, co musíte udělat:

Vytvořte novou složku v adresáři Motivy v instalaci WordPress v části „ wp-content „A pojmenujte to„ ajax-test “, vytvořte dva soubory vyžaduje WordPress, konkrétně „ functions.php "," Styles.css "a přidejte nový soubor s názvem" script.js ". Přidejte následující kód do záhlaví šablony stylů CSS (Style.css).

/ * Téma Jméno: Ajax Testování téma Téma URI: http://premium.wpmudev.com Popis: téma pro testování našich znalostí AJAX Autor: Daniel Pataki Autor URI: http://danielpataki.com Template: twentysixteen verze: 1.0.0 licence GNU General Public License či později v2 licence URI: http://www.gnu.org/licenses/gpl-2.0.html * /

Šablona stylů nadřazeného motivu musí být načtena podřízeným motivem. V minulosti se to dělo importem souboru CSS do podřízeného motivu, ale doporučeným způsobem je použít „zařazení do fronty“. Nezapomeňte, že jsme vám ukázali, jak tuto funkci používat.

Přidejte tedy mateřský stylový list a náš soubor JavaScript přímo:

ADD_ACTION ( "wp_enqueue_scripts ',' ajax_test_scripts"); Funkce ajax_test_scripts () {wp_enqueue_style (rodič-styl ", get_template_directory_uri ()" /style.css ".); wp_enqueue_script (. get_stylesheet_directory_uri 'Ajax zkoušek skripty "()" /scripts.js ", array (" jQuery "), 1.0.0", true); }

Pokud máte pocit, že máte energii to posunout o krok dále, najděte pěkný obrázek, ořízněte jej na 880px na 660px a umístěte jej do složky s motivem dítěte a poté jej přejmenujte “ screenshot.png ". Zobrazí se v části vzhledu, když chcete motiv aktivovat.

Protože toto téma dítěte je založeno na „ dvacet Šestnáct A že jsme nic nezměnili (zatím!), Web by měl vypadat přesně jako klasické téma s tématem “ dvacet Šestnáct ".

Přidání tlačítka

Začneme přidáním tlačítka " Ukaž malou lásku! ". Skvělé místo pro jeho zobrazení by bylo na postranním panelu pro tematické články.

Po nějakém výzkumu se ukáže, že postranní panel je vytvořen funkcí s názvem „ twentysixteen_entry_meta () »Která sídlí v adresáři« inc / template-tags.php ".

Tato funkce je „ připojitelný Což znamená, že jej můžeme upravit tak, že ho definujeme v našem vlastním souboru functions.php. Prvním krokem je zkopírovat a vložit celou funkci do našeho vlastního souboru functions.php:

function twentysixteen_entry_meta () {if ('post' === get_post_type ()) {$ author_avatar_size = apply_filters ('twentysixteen_author_avatar_size', 49); printf (' % 1 $ s % 2 $ s % 3 $ s ', get_avatar (get_the_author_meta ('user_email'), $ author_avatar_size), _x ('Autor', 'Použité před jménem autora příspěvku.', 'twentysixteen'), esc_url (get_author_posts_url (get_the_author_meta ('ID'))), get_the_author ()); } if (in_array (get_post_type (), array ('post', 'attachment'))) {twentysixteen_entry_date (); } $ format = get_post_format (); if (current_theme_supports ('post-formats', $ format)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Format', 'Used before post format.', ' twentysixteen ')), esc_url (get_post_format_link ($ format)), get_post_format_string ($ format)); } if ('post' === get_post_type ()) {twentysixteen_entry_taxonomies (); } if (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ ('Zanechat komentář k% s ', 'twentysixteen'), get_the_title ())); ozvěna ' '; }}

Přidejme náš klíč na konec všech metadat:

$ love = get_post_meta (get_the_ID (), 'show_some_love', true); $ love = (prázdný ($ love))? 0: $ láska; ozvěna ' '. $ láska. ' ';

Vysvětlit všechny tento kód:

První řádek načte počet lásek, které článek získal. V některých případech tato data nebudou existovat, jinými slovy, pokud na tlačítko ještě nebylo kliknuto. Z tohoto důvodu používáme

druhý řádek v kódu pro nastavení hodnoty na 0, pokud je hodnota prázdná.

Třetí řádek obsahuje tlačítko, které se skládá z pole obsahujícího obrázek a počet lásek. Zdroj obrázku jsem nechal prázdný, protože tam chci použít SVG. K vytvoření obrazového řádku můžete použít SVG zakódované v base64. To vás ušetří od kladení požadavků a učiní vaše webové stránky Efektivnější.

Použil jsem tento malý dostupný obrázek zdarma odkaz. Zkopírujte a vložte kód, který obdržíte, do zdroje obrázku takto:

$love = get_post_meta( get_the_ID(), 'show_some_love', true );
$love = ( empty( $love ) ) ? 0 : $love;
echo '<span class="love-button"> <img width="28" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0MHB4IiBpZD0iTGF5ZXJfMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0MCA0MCIgd2lkdGg9IjQwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xOS45NzkwMDAxLDkuMTk1MzAwMSAgQzI1LjYzOTIwMDItMS44ODY3LDM4LjUxMTY5OTcsMy4zOTU5OTk5LDM3Ljk0OTE5OTcsMTMuMzAyN0MzNy4zNjM4LDIzLjYxNjE5OTUsMjIuODc0NTAwMywyNy4xNzM3OTk1LDE5Ljk3OTAwMDEsMzQuOTgxODk5MyAgQzE3LjA4MzAwMDIsMjYuOTc5MDAwMSwyLjc4OTU5OTksMjMuODExNTAwNSwyLjAwODMwMDEsMTMuMzAyN0MxLjI3MzksMy40MDc3MDAxLDE0LjkzNTk5OTktMS45MzEyLDE5Ljk3OTAwMDEsOS4xOTUzMDAxeiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZGNTk0RjsiLz48L3N2Zz4="><span class="number">' . $love . '</span></span>';

Také jsem použil trochu CSS pro styling tlačítka, abych mu dal efekt vznášení. Není příliš zřejmé, zda se jedná o tlačítko, ale bude to pro náš jednoduchý test.

.love-tlačítko img {margin-right: 6px; opacita: 0.7; kurzor: bod; } .název-tlačítko img: hover {opacity: 1; }

Spuštění akce

Nakonec se dostaneme k našemu JavaScriptu! Musíme zacílit na naši položku a detekovat kliknutí na ni. Postupujte takto:

(function ($) {$ (document) .on ('click', 'ime button button, function () {alert ("love is shared");})}) (jQuery);

Pokud v tomto okamžiku kliknete na tlačítko, mělo by se zobrazit upozornění JavaScriptu s textem „Láska je sdílena“. "

Požadavky na údaje

Místo tohoto textu musíme vyvolat volání AJAX. Před napsáním kódu pochopíme, co je třeba odeslat.

URL AJAX

Nejprve potřebujeme místo pro odesílání dat. Místo, kam odesíláme údaje, údaje zpracuje a přijme hovor. WordPress má vestavěné místo pro zpracování volání AJAX, které můžeme použít: „ admin-ajax.php "uvnitř" wp-admin ". Tuto adresu URL nemůžeme přidat do našeho skriptu (použití "surového" kódování není přijatelné), takže budeme používat nějaký mazaný wordpress.

Funkce wp_localize_script () Původně byl určen k překladu řetězců v souborech JavaScriptu, což se mu daří. Můžeme jej také použít k předání proměnných do našich souborů JavaScript, v tomto případě URL našeho souboru AJAX. Přidejte do našeho souboru následující kód " funkce Takto:

wp_localize_script ('ajax-test-scripts', 'ajaxTest', pole ('ajax_url' => admin_url ('admin-ajax.php')));

Výsledkem tohoto posledního objektu bude název ajaxTest, který bude obsahovat dané pole v posledním parametru jako vlastnosti. K zadání hodnoty můžeme použít ajaxTest.ajax_url v našem kódu JavaScript.

Identifikátor článku

Jako identifikátor článku zašleme libovolná data (kterou použijeme k identifikaci článku, ke kterému chceme „přidat trochu lásky“). To lze načíst z DOM. Níže se podívejte na strukturu použitou v tématu „Dvacet šestnáct“:

Naše tlačítko má jako jeden ze svých předků „článek“. Tento prvek má třídu a obsahuje číselný identifikátor článku. Ačkoli to není nejelegantnější řešení, můžeme odtud popadnout ID.

$ (Document) E.ON ( 'cvaknutí', '.love tlačítko img', function () {var = parseInt POST_ID ($ (this) .parents ( 'article.post:first'). Attr ( 'id') .Nasadit ( 'post', '')); console.log (id)})

Akce

WordPress také vyžaduje, abychom poslali parametr s názvem akce. Vzhledem k tomu, že všechny akce budou odeslány na admin-ajax, potřebujeme způsob, jak tyto požadavky odlišit, a proto použití tohoto parametru.

Odesílání požadavku AJAX

Nyní můžeme všechno dát dohromady. Musíme vytvořit výzvu AJAX pro „ wp-admin / admin-ajax.php Který obsahuje ID článku a akci. Takto by to mělo vypadat.

(Function ($) {$ (document) E.ON ( 'cvaknutí', '.love tlačítko img', function () {var = parseInt POST_ID ($ (toto) .parents ( 'article.post:first'). . atr ( 'iD') nahradit ( 'post', '')); $ .ajax ({url: Typ ajaxTest.ajax_url 'post', údaje: {akce: 'add_love' POST_ID: POST_ID} , úspěch: funkce (odpověď) {alert ('úspěch, nový počet je' + odpověď)}})})}) (jQuery);

$ .ajax () je použitá funkce, která bere spoustu parametrů. Adresa URL obsahuje cíl, který je v současné době naším souborem ajax-url.php “. Typ je nastaven na „ zveřejnit » jako všechny požadavky zaslané a formulář. Parametr data je objekt, který obsahuje " klíč-hodnota To chceme poslat na server. Později je budeme moci číst pomocí $ _POST ['action'] a $ _POST ['post_id'].

Zpracování žádosti

Normálně musíte soubor upravit " admin-ajax.php », Protože je tam zaslán požadavek. Je to systémový soubor, takže ho nebudeme upravovat. WordPress umožňuje předávat požadavky AJAX pomocí hranatých závorek s parametrem akce. Model je následující:

Pokud jste pojmenovali svou akci add_love Funkci musíte připojit k háku s názvem „ wp_ajax_add_love A / nebo wp_ajax_nopriv_add_love “. Akce NoPriv ”Spustí se pro odhlášené uživatele, jedna spustí pouze pro přihlášené uživatele. V našem případě bychom chtěli použít obojí. Jako rychlý test nastavíme výchozí návratovou hodnotu:

Parametr success je funkce, která se spustí po dokončení volání AJAX. Ukážeme jednoduché upozornění, které ukazuje „Výborně! Nový účet je “a na konec přidána naše odpověď.

add_action ('wp_ajax_add_love', 'ajax_test_add_love'); add_action ('wp_ajax_nopriv_add_love', 'ajax_test_add_love'); funkce ajax_test_add_love () {echo 4; die (); }

Připojili jsme naši funkci k oběma závorkám, jedna byla hotová minout 4 a poté použila funkci " die () “. To je u WordPress nutné, jinak obdržíte 0 na konci každé odpovědi. Pokud nyní kliknete na tlačítko, mělo by se zobrazit následující:

Chcete-li získat počet skutečných lajků, vše, co musíme udělat, je načíst aktuální číslo, zvýšit jej o jednu, uložit do databáze a zobrazit nové číslo.

funkce ajax_test_add_love () {$ love = get_post_meta ($ _POST ['post_id'], 'show_some_love', true); $ love = (prázdná ($ láska))? 0: $ love; $ Láska ++; update_post_meta ($ _POST ['post_id'], 'show_some_love', $ láska); echo $ love; die (); }

Pokud nyní kliknete na tlačítko, mělo by se zobrazit vyskakovací okno „1“. Pokud stránku aktualizujete, mělo by se zobrazit nové číslo. Opětovným kliknutím na tlačítko se zobrazí 2 ". Vše, co musíme udělat, je ujistit se, že se číslo odráží přímo v uživatelském rozhraní.

Pomocí odpovědi proveďte změny v uživatelském rozhraní

Tato část se zdá jednoduchý (protože to je), ale je obecně nejobtížnější dát dohromady. Zatím vše, co musíme udělat, je vyhledat prvek, který obsahuje aktuální číslo, a upravit jeho obsah pomocí odpovědi.

(Function ($) {$ (document) E.ON ( "cvaknutí", ".love tlačítko img ', function () {var = parseInt POST_ID ($ (toto) .parents (" article.post:first "). . attr ( "id") nahradit ( 'po', '')); var $ cislo = $ (this) .parent () najít (. "číslo") $ .ajax ({url :. ajaxTest.ajax_url, Typ: 'po', údaje: {akce: "add_love" POST_ID: POST_ID,}, úspěch: function (odpověď) {$ number.text (reakce);}})})}) (jQuery);

Do našeho předchozího kódu JS jsem přidal pouze dva řádky. Na řádku 5 ukládám prvek, který obsahuje číslo v proměnné $ číslo, Na řádku 14 upravím text tohoto prvku tak, aby se zobrazila odpověď, což je nové číslo.

To je vše, v podstatě byste měli mít možnost vidět tuto novou funkci v akci na vašem vlastním motivu. Pokud máte nějaký problém, dejte nám prosím vědět. Máte další tip, o který se chcete podělit? Udělejte to v sekci komentáře.