Ajaxové menu na WordPressu

Ajaxové menu na WordPressu

Co a k čemu je AJAX?

Ajax (Asynchronous JavaScript and XML) se dnes na webu běžně používá v situacích, kdy chceme uživatelům nabídnout interakci se serverem a přitom nechceme, aby se celé okno prohlížeče  muselo znovu načítat. Typickým příkladem je třeba chat na Facebooku. Určitě by bylo velmi otravné, kdyby po každé odeslané zprávě celý náš prohlížeč na sekundu zobrazil bílé "prázdno" a potom znovu začal  načítat stránku, na které jsme se nacházeli se všemi těmi obrázky, videi, ... a naším chatovacím okénkem v dolním rohu. A nebylo by to příjemné ani pro servery Facebooku, které by byly zahlcené velkým množstvím zbytečně se opakujících požadavků. V dřevních dobách internetu se tomu dalo předcházet použitím tzv. framů, kterými se dalo okno prohlížeče horizontálně a vertikálně rozdělit na části, do nichž se pak nezávisle načítaly různé HTML (pod)stránky.  Bylo to velmi jednoduché a elegantní řešení, ale mělo i své nevýhody a s příchodem velkých vyhledávačů jako Google se od tohoto systému muselo definitivně upustit v zájmu přehlednějšího "googlování". Pro potřeby nezávislého načítání různých částí stránek se začal používat Javascript(resp. AJAX), který si ze serverů "vezme" strukturovaná data (XML, HTML, JSON,...) a zobrazí je v požadované části stránky. Je sice potřeba trochu více programování, ale na druhou stranu AJAX nabízí spoustu dalších možností využití. Např. "nekonečně" scrollovatelné stránky, našeptávače ve formulářích, již zmíněné chatování, .... V mém případě se AJAX bude hodit také kvůli animovaným prvkům, se kterými na webu rád experimentuji. Díky AJAXu se nemusí přerušovat animace běžící ve smyčce (viz. burger logo) nebo animace následující bezprostředně po kliknutí na nějaký odkaz (např. vysouvací submenu, které se po kliknutí na odkaz plynule zasune zpět).

 

Jak funguje standardní wordpressové menu

Než se pustíme do tvorby AJAXového menu, řekneme si ve zkratce, jak funguje "defaultní" wordpressové menu. Když si zobrazíme zdrojový kód odkazů v menu, uvidíme, že jsou tvořeny běžným HTML tagem <a href="url_prispevku"... Po kliknutí na odkaz se na serveru spustí řetězec wordpressových PHP skriptů, které si požadovanou stránku najdou v MySQL databázi a nachystají ji do podoby(HTML) v jaké pak putuje na uživatelův počítač. Front-end developery a designery bude na straně serveru zajímat hlavně to, co se děje ve složce s jejich šablonou (wp-content/themes/sablona...),  kde se nacházejí javascripty, CSS styly a pomocí PHP se zde "slepují" jednotlivé HTML komponenty.  Najdeme zde tedy i zdrojový kód menu, které budeme chtít předělat z obyčejného HTML menu na dynamické AJAXové menu. Pro tento tutoriál je samozřejmě důležité mít povědomí o hierarchii dané šablony, jelikož každá šablona je trochu jiná. Je potřeba zjistit, ve kterých skriptech se generuje menu, kde obsah příspěvků a komentáře atd. Potom už bude  stačit "naučit" naše staré menu, aby pomocí AJAXu požádalo wordpress o generování pouze těch částí šablony, které chceme.

Příprava

V tomto tutoriálu se bude pracovat se třemi soubory ve složce naší šablony. Prvním bude komponent, ve kterém se generuje menu. U mé šablony je to soubor header.php, ale může to být i v jiném souboru. Dále se bude pracovat se souborem functions.php, který v šablonách slouží, jak už jeho název napovídá, k definování různých praktických funkcí dostupných během celého procesu generování stránky. Třetím souborem bude javascript zajišťující komunikaci mezi uživatelem a serverem. Je třeba si tento soubor vytvořit a pojmenovat ho můžeme třeba menu.js.

Jak bylo zmíněno v předchozí kapitole, wordpressové menu pracuje s obyčejnýmy HTML linky. Jejich "href" atribut obsahuje informaci o tom, která stránka se má vygenerovat a rovnou se tedy nabízí, abychom tento atribut využili  za stejným účelem v našem AJAXovém rozhraní. Rozhodl jsem se však místo toho použít ID číslo tzv. post ID, kterým disponuje každý wordpressový článek či stránka. A to z důvodu, že s tímto ID pak pracují různé PHP funkce a museli bychom ho později stejně nějak získávat ze zmiňovaného "href" atributu (pravděpodobně převodem pomocí funkce url_to_postid() ). Než ho takto pokaždé dohledávat, přišlo praktičtější vygenerovat si hned na začátku ID všech stránek dostupných z našeho menu. Standardně  wordpress toto ID k odkazům v menu nepřidává a proto jsem musel zasáhnout do částí php skriptů, které generují HTML kód menu. V každé šabloně toto může být řešeno trochu jinak. Menu může být generováno buď pomocí tzv. wordpressového loopu a nebo pomocí (custom)walkeru. V případě loopu se použije funkce the_ID() v místě, kde je generován  seznam příspěvků (který chceme předělat na menu). Kód pro vložení post ID do HTML bude vypadat přibližně takto:
soubor header.php (v případě mé šablony):

//wordpress loop
<li>
  <a href="<?php the_permalink() ?>" id="<?php the_ID() ?>">
    <?php the_title(); ?>
  </a>
</li>

Pokud šablona používá custom walker, je HTML kód menu generován v souboru functions.php v objektu, vytvořeném pro dané menu. Jeho definice může být poměrně složitá, ale nás tam budou zajímat v podstatě jen řádky, kde se generuje HTML odkaz, ke kterému "přilepíme" ID článku pomocí kódu níže. Kód ukazuje také to jak získat post ID wordpressových stránek (pages), pro které platí trochu jiná pravidla než pro příspěvky.

v souboru functions.php:

$ID_stranky = get_post_meta( $item->ID, '_menu_item_object_id', true ); // získání post ID 
 $vystup .= '<a href="'. $item->url . '" id="'. $ID_stranky.'">'; // přidání post ID do HTML tagu 

Další informace, kterou musíme vložit do HTML kódu, je cesta k wordpressovému souboru admin-ajax.php.  Tento soubor se nenachází ve složce naší šablony, ale ve složce  wp-admin a proto se v něm určitě nebudeme vrtat. Je primárně určen pro administrační rozhraní wordpressu, kde se stará, jak již jeho název napovídá, o AJAX. Stručně řečeno je to php skript, který komunikuje s javascripty na straně uživatele. Využijeme ho tedy pro naše AJAXové menu a nemusíme se bát, že by se jednalo o nějaký riskantní "hack", protože s takovýmto využitím se počítá i ve WP kodexu. Cestu k tomuto souboru vložíme do HTML kódu pomocí funkce wp_localize_script(), kterou umístíme do souboru functions.php. Kód bude vypadat takto:

wp_localize_script( 'ajax-menu', 'ajaxove_menu', array(
	'ajaxurl' => admin_url( 'admin-ajax.php' )    
	));

V HTML kódu našich stránek se potom objeví cesta k souboru admin-ajax.php použitelná v našem chystaném javascriptu:

/* &lt![CDATA[ */
var ajaxove_menu = {"ajaxurl":"http:\/\/www.muj-server.cz\/muj_blog\/wp-admin\/admin-ajax.php"};
/* ]]> */

Než začneme s javascriptem budeme si ho muset rovněž načíst do stránky. Provedeme to opět v souboru functions.php tentokrát pomocí funkce wp_enqueue_script(), které poskytneme jako parametr absolutní url našeho javascriptového souboru. K tomu poslouží funkce get_template_directory_uri() vypisující url složky s naší šablonou, ke které pak už jen doplníme zbývající cestu k javascriptu - v mém případě je to tedy soubor pojmenovaný menu.js ve složce js.

wp_enqueue_script( 'ajax-menu',  get_template_directory_uri() . '/js/menu.js', array(), '1.0', true );

Povšimňete si parametru 'ajax-menu', který bude sloužit jako reference v AJAXové komunikaci. Když jsme o pár řádků výše vkládali cestu k souboru admin-ajax.php, nastavili jsme zde stejný parametr ve funkci wp_localize_script(). Hodnota tohoto parametru záleží na vás (klidně "muuuj_AJAX"), ale důležité je, aby byla stejná pro admin-ajax.php a náš javascript, kvůli vzájemné komunikaci těchto dvou skriptů.

 

Ajaxové menu

Front-end

Nyní se můžeme pustit do javascriptu. V souboru menu.js si nejprve  vytvoříme události (events) pro všechny linky v našem menu.  Dejme tomu, že naše šablona přiřadí odkazům v našem menu atribut class s hodnotou "trida-odkazu-na-post". Načteme si je tedy všechny do objektu pomocí funkce .getElementsByClassName(). Objekt nazveme postsITEMS a poté pomocí cyklu vytvoříme pro každou jeho položku  událost, která bude následovat po kliknutí myší (onclick). V události nejprve zabráníme prohlížeči, aby začal načítat danou stránku, což  běžně dělá po kliknutí na hypertextový odkaz. Zabráníme mu v tom funkcí preventDefault(). Poté si vytvoříme proměnou page, do níž uložíme ID číslo příspěvku, které jsme si generovali v předchozí kapitole. Pozor na možnou záměnu našeho post ID s HTML atributem id, do nějž jsme si post ID uložili (tedy id=ID). Na závěr události zavoláme funkci AJAX_LOAD(), kterou si zanedlouho vytvoříme. Této funkci předáme proměnou page s číslem požadované stránky. Události pro naše menu tlačítka tedy vytvoříme tímto kódem:

var postsITEMS = document.getElementsByClassName("trida-odkazu-na-post");
for (i=0; i<postsITEMS.length; i++) {
  postsITEMS[i].onclick = function (e) {
	e.preventDefault();
	page = this.getAttribute("id");
	AJAX_LOAD (page);
  }
}

Funkce, kterou jsem nazval AJAX_LOAD(), bude zajišťovat odeslání požadavku na server, přijetí odpovědi a její zpracování. Nebudu skrývat, že jsem se v této fázi dost opřel o skvělý tutorial na sitepoint.com a rovnou přikládám odkaz. Ve funkci AJAX_LOAD() si nejprve vytvoříme požadavek na spojení se serverem. Javascript pro tyto účely disponuje objektem XMLHttpRequest(), který si uložíme do proměnné xhr. Objekt disponuje mj. metodami open, send a vlastností onreadystatechange. Metodou open požádáme server o spuštění souboru admin-ajax.php, jehož url jsme si v předchozí kapitole uložili do proměnné ajaxove_menu. Nastavíme zde také parametr POST, který určuje typ komunikace se serverem. Poté metodou send poskytneme skriptu admin-ajax.php dva údaje - název "akce" a ID požadovaného příspěvku/stránky. Akci jsme si pojmenovali "muj_haak", protože tento typ akcí se v angličtině označuje jako "hooks" - tedy háky, háčky. Zjednodušeně řečeno je hák vlastně funkce, kterou chceme na serveru zavolat. Budeme se tomu věnovat i v další kapitole a pro představu jakou roli hák hraje v našem ajaxovém rozhraní jsem vytvořil i schéma komunikace mezi uživatelem a serverem.  Poté co jsme serveru předali detaily ohledně našeho požadavku, budeme v našem javascriptu čekat na odpověď. K tomu slouží zmíněná vlastnost onreadystatechange tvořená asynchronní funkcí (tzv. callback). V této funkci si tedy nadefinujeme co se má stát, jakmile ze serveru dorazí požadovaná data. Nejprve se pomocí podmínek ujistíme, že se na serveru vše podařilo, což je v http protokolu vyjádřeno číselnými kódy 200 a 4. Poté se můžeme pustit do manipulace s HTML obsahem stránky, protože ten nový už je nachystaný v proměnné xhr.responseText. Stačí tedy jen odebrat aktuální obsah pomocí funkce removeChild a nahradit ho novým HTML kódem.

var page_body = document.getElementById("element_do_ktereho_bude_nactena_stranka");
function AJAX_LOAD (p) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', ajaxove_menu.ajaxurl);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send("action=muj_haak&page="+p); 
  xhr.onreadystatechange = function () {
	var DONE = 4; // readyState 4 means the request is done.
	var OK = 200; // status 200 is a successful return.
	if (xhr.readyState === DONE) {
		if (xhr.status === OK) 
			var currentContent = page_body.childNodes[1];
			page_body.removeChild(currentContent);
			page_body.innerHTML = xhr.responseText;
		} 
	}
					
}

 

 

Back-end

Co je potřeba provést na serveru poté co uživatel kliknul na link v menu si popíšeme nyní. Budeme zde pracovat se souborem functions.php, který najdeme ve složce naší šablony.  Nejprve v něm vytvoříme zmíněnou akci/hák pomocí funkce add_action().  Musíme definovat dvě verze - pro přihlášené a nepřihlášené uživatele našich stránek. K čemu je to dobré se dočtete níže.

add_action( 'wp_ajax_nopriv_muj_haak', 'ajax_vystup' ); // pro neprihlasene uzivatele
add_action( 'wp_ajax_muj_haak', 'ajax_vystup' ); //  pro prihlasene uzivatele

Prvním parametrem  funkce add_action() je název akce, na kterou chceme "zaháknout" naší funkci, která je pak druhým parametrem, a kterou si můžeme pojmenovat třeba "ajax_vystup()".  Zní to teď poněkud zamotaně, takže i zde vám třeba pomůže schéma, které jsem vytvořil.  Dalo by se to rozvést tak, že funkce add_action() tvoří dvojici s funkcí do_action(). Ta může být umístěná na různých místech wordpressového jádra, a my na ní pomocí add_action můžeme "zaháknout" nějakou modifikaci nebo rozšíření, což se například hojně využívá při tvorbě wordpressových pluginů. V našem případě je "do_action(wp_ajax_" umístěna v suboru admin-ajax.php, do kterého se můžeme klidně podívat pro lepší představu o tom, jakým způsobem jsou zde zpracovány proměnné odeslané z našeho javascriptu přes http protokol. Je zde také patrné, jakým způsobem je řešeno rozdělení háků na verze pro přihlášené a nepřihlášené  uživatele našich stránek. Na toto ošetření privilegií by se nemělo zapomínat, protože skript admin-ajax.php, je primárně určený pro administrativní rozhraní wordpressu a tím pádem pro přihlášené privilegované uživatele. Neprivilegovaný uživatel by se pak zneužitím našeho javascriptového menu mohl například dostat k neveřejným článkům. Větší bezpečnostní rizika snad nehrozí. Pokud by jste o nějakém věděli, budu rád, když na to upozorníte v komentářích. V tomto tutoriálu pro jednoduchost použijeme pro přihlášené i nepřihlášené uživatele stejný hák, který jsme si tedy nazvali ajax_vystup().

Funkce ajax_vystup() je tedy zavolána ve chvíli, kdy ajax-admin.php obdrží potřebné informace z našeho javascriptu. Můžeme pak v začít s generováním HTML kódu požadovaného příspěvku. Vše co se v této funkci vypíše příkazem echo, bude po jejím ukončení putovat zpět k uživateli. Existuje mnoho způsobů jak ke generování přistoupit a bude určitě záležet na struktuře konkrétní šablony. Určitě se ale vyplatí využívat už hotové komponenty šablony, pokud nechceme, aby kód naší výstupní funkce příliš naboptnal.

První tři řádky funkce nastaví globální proměnou $post určující jaký příspěvek či stránka se bude generovat. Jako hodnotu této proměnné tedy nastavíme ID příspěvku, které jsme si z našeho menu poslali na server. Zde je dostupné v objektu $_POST, kam bylo uloženo skriptem admin-ajax.php. Po nastavení proměnné $post ještě požádáme wordpress, aby nachystal potřebná data příspěvku pomocí funkce setup_postdata(). Poté již stačí pomocí funkce locate_template() zavolat komponent, ve kterém je generován obsah příspěvku. V případě mé šablony je tvořen souborem contetn.php ve složce template-parts. Podobě jsem postupoval při vypsání komentářů, kde bylo třeba nejprve zjistit jestli jsou komentáře v požadovaném příspěvku zapnuty a poté opět pomocí funkce locate_template() zavolat soubor comments.php.

Na závěr funkce ajax_vystup() je nutné umístit funkci die(), na kterou čeká admin-ajax.php.  Poté je vygenerovaný výstup zaslán zpět "do javascriptu" a vypsán na stránce (viz předchozí kapitola Front-end).

function ajax_vystup() {
  $post_id = $_POST['page'];
  global $post;
  $post = $post_id;
  setup_postdata( $post );
  locate_template( 'template-parts/content.php', TRUE, TRUE );
  if ( comments_open() || get_comments_number() ) { 
    locate_template( 'comments.php', TRUE, TRUE ); 
  }
  die();
}

Co s tlačítky "zpět" a "vpřed"?

V momentě, kdy zprovozníme ajaxové menu, ztratí náš internetový prohlížeč přehled o tom, jak se mění obsah okna, protože jsme přestali používat standardní hypertextové odkazy, podle kterých se prohlížeč orientoval. Přestanou tedy fungovat i tlačítka pro přechod na předchozí/další stránku a my proto musíme tato tlačítka sami "rozchodit" pomocí javascriptu. Ten naštěstí disponuje objekty(window, history, document) umožňujícími manipulaci s historií, úpravu titulku okna či adresního řádku. Nejprve si v našem skriptu menu.js vytvoříme funkci pro ukládání položek do historie. Nazveme ji třeba uprava_historie() a budeme ji volat z události onclick tlačítek našeho menu. Funkci pošleme dva údaje -  titul zvolené menu položky a ID číslo (to samé, se kterým pracuje ajaxové rozhraní). Jádrem funkce uprava_historie() bude metoda pushState. Tou si do historie vložíme zmiňované dva údaje - titul a ID požadované stránky. Tyto dva údaje potřebuje metoda pushState ve formě objektu a proto si vytvoříme objekt stav_historie s proměnnými stranka pro ID a tit pro titul.  Metoda pushState nám pak ještě umožní změnit text v adresním řádku prohlížeče, což  poslouží k lepší orientaci návštěvníků stránek. Do adresního řádku tedy vložíme titul stránky uvozený třeba hash tagem. Na závěr naše funkce uprava_historie() ještě změní titulek okna, který prohlížeč běžně nastavuje podle HTML tagu <title>. V javascriptu můžeme titulek nastavovat v proměnné title objektu document, kam tedy vložíme titul požadované stránky.

Výše zmíněné operace se tedy provádí ihned po kliknutí na tlačítko v menu, což by v případě načítání většího objemu dat(např. u e-shopu) mohlo způsobit situaci, kdy se titulka stránky a adresní řádek změní o pár sekund dříve, než ze serveru dorazí obsah stránky. Potom bude vhodnější tyto operace provést až ve chvíli, kdy ze serveru dorazí data nové stránky. Tzn. ve funkci AJAX_LOAD(), kde také můžeme snadno spouštět nějaký animovaný preloader.

Když už naše menu vkládá položky do historie procházení, můžeme si vytvořit událost, která bude následovat po kliknutí na tlačítka zpět a vpřed. Tato událost je dostupná jako window.onpopstate a je společná pro obě zmiňovaná tlačítka. Událost by v podstatě měla plnit stejnou funkci jako u  tlačítek našeho menu - tj. načítat obsah stránek pomocí funkce AJAX_LOAD(). Zavoláme zde tedy tuto funkci a místo proměnné page jí tentokrát předáme proměnnou stranka, kterou jsme si uložili do objektu history. V události onpopstate je pro nás dostupná takto: event.state.stranka. Pak už jen stačí změnit titulku okna stejným způsobem jako ve funkci uprava_historie(). O úpravu adresního řádku se tentokrát nemusíme starat, protože prohlížeč ji provede automaticky na základě údajů, které jsme již uložili do objektu history.

V události onpopstate bude nutné ještě pomocí podmínky ošetřit situaci, kdy  se návštěvník chce pomocí tlačítka zpět vrátit na první stránku, kterou na našem serveru navštívil. Ta totiž nemá v objektu stav_historie nastavenou žádné ID ani titul. A navíc na ní může být nějaký úvodní obsah, který naše jednoduchá ajaxová funkce není schopná dodat (např. výpis nejnovějších článků atd.). Potřebujeme tedy definovat "defaultní" hodnoty již zmíněného objektu stav_historie. Nastavíme v něm místo ID nějakou hodnotu, podle které pak poznáme, že to byla ta první navštívená stránka. Pro názornost zadáme třeba hodnotu "stratovaci". Pak už zbývá jen nastavit co se ve zmíněné situaci má stát. Nejjednodušší mi přišlo prostě obnovit obsah stránky pomocí funkce location.reload(). Sice se v tomto případě nebude jednat o ajaxové načítání, ale budeme mít jistotu, že návštěvník dostane přesně ten obsah, co viděl na začátku své návštěvy na našem serveru.

var postsITEMS = document.getElementsByClassName("trida-odkazu-na-post");
var stav_historie = { stranka:"startovaci", tit:document.title };  // pocatecni stav - prvni zobrazena stranka
history.replaceState(stav_historie, null, null);  // uprava pocatecniho stavu prohlizece, tak aby jsme ho poznali

window.onpopstate = function(event) {    // udalost spolecna pro tlacitka ZPET i VPRED
  if (event.state.stranka === "startovaci"){  // pokud se vracime na startovaci stranku,
      location.reload();				// nepouzijeme tentokrat AJAX a pouze obnovime stranku... 
	}
  else if (event.state.stranka && event.state.tit) {  // pokud se vracime na jinou nez stratovaci stranku
	   AJAX_LOAD (event.state.stranka);    // pouzijeme nasi ajaxovou funkci a posleme ji ID dane stranky
	   document.title = event.state.tit;   // upravime titulek okna
	} 
};

		
for (i=0; i<postsITEMS.length; i++) {  // udalost tlacitek v menu
  postsITEMS[i].onclick = function (e) {
	e.preventDefault();
	page = this.getAttribute("id");    ///////////////////////
	titul = this.innerHTML;           ///////////////////////
	uprava_historie (page, titul);   // po kliknuti na polozku v menu si upravime historii
	AJAX_LOAD (page);
	}
}
	
function uprava_historie (page, titul) {
  stav_historie = { stranka:page, tit:titul }; //upravime objekt stav_historie
  history.pushState(stav_historie, null , "#"+titul); //vlozime ho do historie a take upravime adress bar
  document.title = titul;                     // upravime titulek okna
}

function AJAX_LOAD (p) {
	......
	}

Jednoduchá server-side cache

Pravděpodobně jste slyšeli o tom, že pro zrychlení wordpressového webu je vhodné používat nějaký cache plugin (např. TotalCache, SuperCache, ...).  Tyto pluginy většinou fungují tak, že uloží vygenerované stránky do nějaké složky na serveru a odtud je pak "servírují" návštěvníkům již jako hotové HTML stránky. Implementovat takové možnosti do našeho ajaxového menu by bylo komplikované a pravděpodobně by ze současného provedení nezbyl "kámen na kameni". Můžeme však poměrně jednoduše upravit naší funkci ajax_vystup() tak, aby alespoň vytvořila cache v MySQL databázi a ukládala do ní obsah stránek, které zrovna generuje. Sice to nebude tak efektivní cache, jako v případě zmíněných pluginů, ale alespoň nějaké zrychlení můžeme očekávat, protože se značně zredukuje množství PHP a SQL operací. Opět nebudu skrývat, že jsem zde vyšel z jiného tutorialu a také hned na okraj podotýkám, že má implementace tohoto řešení by jistě snesla pár vylepšení.

Pustíme se tedy do úpravy naší funkce ajax_vystup v souboru functions.php.  Nejprve bude dobré si pro přehlednost odseparovat generování komentářů do vlastní funkce, kterou si nazveme komentare(). Komentáře(diskuzi) totiž v tomto tutorialu nebudeme ukládat do cache, jelikož je to opět poměrně komplikovaná problematika. Dále budeme pracovat s MySQL databází. Pro lepší porozumění problematice doporučuji pomocí nějakého SQL klienta sledovat co se odehrává v databázi vašeho blogu. Generovaný obsah stránek zde budeme ukládat do tabulky options, kde pro každou stránku vytvoříme záznam, který bude později dohledatelný podle ID dané stránky. Využijeme při tom wordpressových funkcí get_option(), update_option()delete_option() a také PHP output bufferu.

Pořadí operací v upravené funkci ajax_vystup bude následující: podíváme se do databáze, jestli je tam cache verze požadovaného příspěvku. Pokud ano, vypíšeme ji, přidáme komentáře a je hotovo. Pokud ne, vygenerujeme obsah příspěvku tak, jako jsme to dělali doposud, uložíme ho pro příště do databáze a opět přidáme komentáře pomocí funkce komentare().

Pak musíme ještě zajistit to, aby se cache vymazala, poté co upravíme náš příspěvek v adminitraci  wordpressu. Využijeme zde naší znalost wordpressových háků, když na akci save_post zahákneme naší funkci vymazat_cache(). Té už bude známo ID ukládaného příspěvku, protože se s ním pracuje v akci save_post. Takže stačí jen podle tohoto ID najít cache verzi našeho příspěvku a smazat ji pomocí delete_option().

functions.php

add_action('save_post','vymazat_cache');  //vymazani cele cache po ulozeni noveho prispevku
function vymazat_cache($post_id){
 delete_option("stranka_v_cache{$post_id}");  //funkce pro smazání záznamu z databáze
}

function ajax_vystup() {	
  $post_id = $_POST['page'];
  global $post;
  $post = $post_id;
  setup_postdata( $post );
		
  $page_from_cache = get_option( "stranka_v_cache{$post_id}", 0 ); //nacteni obsahu pro dane ID z databaze
	
  if($page_from_cache){          // pokud obsah existuje
	echo $page_from_cache;     // vypiseme ho 
	komentare();               // vypiseme komentare
        die();                         // a ukoncime funkci 
  }
  // Pokud v cache nic neni, vygenerujeme stranku beznym postupem a ulozime do databaze
  ob_start();             // PHP buffer
  locate_template( 'template-parts/content.php', TRUE, TRUE );  //nas bezny zpusob generovani stranky
  $new_cache = ob_get_flush();                                  //ulozeni obsahu do promenne 
  update_option( "stranka_v_cache{$post_id}",$new_cache);       //vytvoreni cache polozky v databazi - nazev obsahuje ID prispevku
  komentare();                                                  // komentare v cache nejsou...
  die();                           //ukoncime funkci
}

 

Závěr

Ajaxové rozhraní by se samozřejmě dalo řešit řadou dalších způsobů a pro někoho bude možná výhodnější využít už hotové řešení v podobě pluginu nebo template.  Příkladem použití tohoto tutoriálu v praxi budiž tento blog, kde jsem ajaxové menu implementoval do  tzv. startovací šablony od Underscores. Tato šablona nazvaná "_s" byla skvělým odrazovým můstkem, protože zahrnovala pouze nejnutnější PHP skripty, Javascripty a zdroj CSS stylů v SASSu. Určitě zde bude potřeba ještě hodně věcí vychytat a budu rád, když se o připomínky a náměty podělíte v diskuzi.

Zdroje

0 thoughts on “Ajaxové menu na WordPressu

  1. hOur site offers a wide variety of non prescription drugs. Take a look at our health site in case you want to feel better with a help generic supplements. http://n3.cbdbesteuro.com/es/el-cannabidiol-se-puede-comprar-sin-receta-185.html Our company provides supreme quality weight loss products. Take a look at our health contributing website in case you want to feel better. http://4yt.cbdbesteuro.com/no/salg-phytocannabinoid-treatment-42823.html Our company offers supreme quality pharmacy. Visit our health contributing site in case you want to feel better. http://h4o.cbdbesteuro.com/es/venta-cbd-productos-de-camo-op-voorschrift-67525.html Our company offers a wide variety of pharmacy. Visit our health contributing website in case you want to look better. http://4yt.cbdbesteuro.com/no/cannabis-kostnad-mxr-83958.html Our company provides a wide variety of non prescription drugs. Visit our health website in case you want to look healthier with a help of health products. http://a0q7.cbdbesteuro.com/es/venta-fitocannabinoide-femenino-en-chile-36910.html Our company offers a wide variety of non prescription products. Visit our health portal in case you want to to improve your health with a help of general health products. http://o7.cbdbesteuro.com/it/fitocannabinoidi-basso-costo-33846.html
    Our site offers a wide variety of non prescription drugs. Look at our health site in case you want to strengthen your health with a help of general health products. http://qv5.cbdbesteuro.com/no/kjp-cbd-hanfprodukte-for-kvinner-94138.html Our company provides supreme quality non prescription products. Visit our health contributing site in case you want to look healthier. http://2vk.cbdbesteuro.com/es/precisa-de-receita-para-comprar-cbd-productos-de-camo-nos-estados-unidos-62087.html Our company offers supreme quality healthcare products. Take a look at our health contributing site in case you want to improve your health. http://2a.cbdbesteuro.com/sv/cannabidiol-priser-rockwool-62092.html Our company provides a wide variety of non prescription products. Look at our health site in case you want to look healthier with a help of generic supplements. http://h4o.cbdbesteuro.com/es/comprar-fitocannabinoide-sin-receta-en-capital-federal-88615.html Our company provides supreme quality health products. Visit our health contributing website in case you want to feel healthier.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *