WordPress – tvorba šablony od A do Z – 19.díl – Ajax


Dnes se podíváme trochu na to, jak se dá ve WordPressu jednoduše pracovat s Ajaxem. Ukážeme si jednoduchý způsobm, jak přes WordPress Ajax API pošleme dotaz na server a ten nám potřebná data vrátí zpět. Nebudu se tu dnes zabývat příliš mnoho složitostmi – chtěl bych Vás tímto dnešním dílem pouze nasměrovat, jak postupovat. Využití Ajaxu je velmi široký záběr na jeden díl. Dost „keců“ – jdeme na to.

WordPress Ajax API

Poměrně dobře zpracovanou dokumentaci již tradičně naleznete na WordPress Codexu, kterou má Ajax API hezky popsanou. Na codexu se sice hodně píše o tom, jak používat API v pluginech, ale to nám nevadí – pro použití v šabloně je to prakticky stejné.

Princip fungování API

  1. Založím si Hooku, která bude odchytávat mé dotazy z Javascriptu a posílat je na správnou funkci
  2. Napíšu si funkci, která provede zpracování mého požadavku na straně serveru – PhP (třeba)
  3. Dostanu zpět data do Javascriptu a data zpracuji.

Začal bych rád trochu od prostředka – začátek Ajaxu tam sice není, ale definice a stavba celého procesu ano.


add_action( 'wp_ajax_kt_send_me_data', 'kt_sending_data_callback' );

function kt_sending_data_callback(){
	$html = "Hello Word!"

	die($html);
}

Co touto částí kódu říkám? Přidávám si novou akci. Formát Ajax akce vypadá „wp_ajax_{my_action_name}“. Tím říkám, že to, co je za wp_ajax_, je název mé akce, které bude API v případě volání Ajaxem z Javascriptu hledat. Pokud název akce najde, zavolá její callback funkci, kterou jsem si nazval „kt_sending_data_callback“. Funkce mi pouze vrátí string v podobě „Hello World!“.

Jak bude vypadat Javascript?


jQuery('#click-dom-element').click(function() {
	var data = {
		action: "kt_send_me_data",
	};

	jQuery.post(ajaxurl, data, function(response) {
		jQuery('#html-dom-element').html(response);
	});
});

Tento kód bude obsahem našeho načteného JS souboru nebo může být zapsán přímo v HTML stránce. Co se  v něm odehrává? Pomocí jQuery jsem přidal jednoduchou událost na click nějakého DOM elementu – třeba nastylované jako tlačítko. Následně jsem si založil pole data, do kterého jsem přidal klíč „action“ a do něj hodnotu „kt_send_me_data“. To je právě ta část, kdy říkáme, že hledáme akci „kt_send_me_dat“, kterou jsme si definovali o blok výše. Akce následně zavolá callback funkci a pošle zpět do JS proměnnou HTML. Data budeme mít uložené v proměnné „response“, kterou pak celou jako obsah vypíšeme do jiného DOM elementu. A je to !

Jak poslat Ajaxem data z prohlížeče?



jQuery('#click-dom-element').click(function() {

	postId = jQuery(this).attr("id");

	var data = {
		action: "kt_send_me_data",
		postid: postId
	};

	jQuery.post(ajaxurl, data, function(response) {
		jQuery('#html-dom-element').html(response);
	});
});

Ještě uvedu příklad, jak jednoduše poslat z prohlížeče data na server. V naší call_back funkci pak budou tyto údaje dostupné v globální proměnné $_REQUEST[{hash_name}]. V našem případě budeme mít tedy postId uložené v $_REQUEST[„postid“]. Opět jednoduché, že?

Pozor na Ajax povolený přístup!

WordPress API také myslelo na jeho přístup. Action hook kterou jsem popsal výše může zavolat pouze ten uživatel, který je do příslušného WordPressu přihlášen. Pokud chcete zhotovit Ajax funkci a načítat data pro běžné návštěvníky, je k tomu přistupovat pomocí jiné Hooky.



add_action( 'wp_ajax_my_{action}', 'callback_funkce' ); // pro přihlášené uživatele
add_action( 'wp_ajax_nopriv_{my_action}', 'callback_funkce' ); // pro všechny návštěvníky

Budete se možná divit, ale to je vše. Více toho po nás WordPress nechce – je tedy už pouze na nás, abychom vymysleli, co si budeme pomocí Ajaxu „tahat“ ze serveru a zobrazovat to v naší šabloně. Stačí definovat název akce.

Závěrem

Dneska jsme se naučili využívat WordPress Ajax API. Je už jenom na Vás, na co vše ho budete používat. U nás ho hodně používáme na tahání dat z jiných aplikací, ukládání nastavení či posílání různých komentářů. Hodně se ale vyhýbáme tahání dat pomocí Ajaxu, které si chce uživatel přečíst. Hůře se pak generují linky, na které by mohl někdo odkazovat – byť už na to technologie jsou – ale říkali jsme si proč.

Tomáš Kocifaj, KTStudio.cz

, , ,

  1. #1 Lukas 13.10.2015 - 11:36

    Dudou ještě nějaké články? Přimlouvám se za ně.

    • #2 Tomáš Kocifaj 13.10.2015 - 11:58

      Ahoj Lukáší,

      jsem rád, že se ti naše články líbí. V článcích budeme klidně rádi pokračovat – v rámci našich časových možností. Problém byl ale ten, že jsme neměli dostatečný počet témat, které bychom publikovali. Pokud je něco, co tě zajímá, klidně nám to napiš a pokud to bude vhodné, určitě něco připravíme.

      Věnujeme se teď hodně našemu projekut http://www.wpframework.cz/, ale rádi si pro naše čtenáře najdeme čas.

Komentáře jsou uzavřeny.