Jak AJAX-ify vaše WordPress Komentáře

reklama

Ve výchozím nastavení je systém komentářů WordPress žalostně neadekvátní - jednou z mých největších námitek je, že k odeslání komentáře je třeba stránku obnovit. Můžete přejít na systém třetí strany, jako je Livefyre [Broken URL Removed] nebo Disqus 3 způsoby, jak povzbudit komentáře k vašemu blogu WordpressZískávání komentářů k vašemu blogu je skvělým motivátorem, aby vás udržel dál s dálkovým spojováním blogů. Jen s vědomím, že je někdo venku, oceňování vaší práce je skvělé, ale ne ... Přečtěte si více , ale pokud byste raději nechali všechno doma, nebo si udělali nějaké jiné úpravy, zveřejnění komentářů od AJAX je to nejméně, co byste měli udělat.

Zde můžete vidět příklad této práce MakeUseOf - když vložíte komentář, neopustíte stránku - místo toho ji pošleme prostřednictvím volání AJAX a poté zašleme „Děkuju“Na vědomí. Celý kurz si přečtěte.

Chcete-li používat funkce jiné než WordPress jako AJAX, přečtěte si prosím moje předchozí kurz Výukový program o používání AJAX ve WordPressu

AJAX je pozoruhodná webová technologie, která nás posunula nad rámec jednoduchého „kliknutí na odkaz, přejít na jinou stránku“ struktura internetu 1.0. Umožňuje webům dynamicky načítat a zobrazovat obsah bez uživatel... Přečtěte si více a nezapomeňte se podívat na všechny články související s WordPress.

Úvod

K tomu, aby fungovaly komentáře AJAX WordPress, jsou zapotřebí dvě samostatné části, takže vám nejprve vysvětlíme ty, které vám poskytnou přehled celého procesu.

• Nějaký Javascript na stránce, který zachytí uživatele kliknutím na Přidat komentář tlačítko Odeslat, díky němuž je také volání AJAX a také zpracovává odpověď.
• Popisovač PHP, který se zapojuje do akce comment_post

Javascript

Za prvé, bude to potřeba jQuery, stejně jako cokoli vzdáleně vzrušujícího v dnešním vývoji webových aplikací. Pokud si nejste jisti, zda se již načítá, pokračujte a přeskočte na kód Javascript a zkuste to i tak - pokud máte Firebug a v protokolu konzoly se uvádí „jQuery není definováno“Po aktualizaci stránky přidejte tento řádek do souboru features.php, abyste zajistili jeho načítání.

function google_jquery () { if (! is_admin ()) {wp_deregister_script ('jquery'); wp_register_script ('jquery', (" http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"), Nepravdivé); wp_enqueue_script ('jquery'); }} add_action ('wp_print_scripts', 'google_jquery');

Toto je komplikovaný způsob načtení jQuery, protože budeme používat nejnovější verzi Google CDN, která je rychlejší a více datum, než je datum, které je ve výchozím nastavení součástí WordPress - proto by bylo dobré přidat, že přestože je jQuery již načteno někde jinde.

Nyní, pro skutečný Javascript, který zvládne formulář komentáře, máme několik možností. Nejjednodušší je vložit kód do svého single.php šablona - za předpokladu, že nemáte povoleno komentáře ani pro stránky.

Nebo můžete vložit do existujícího .js soubor používaný vaším motivem, nebo vytvořte nový .js soubor v adresáři motivu. Pokud se rozhodnete umístit jej do svého vlastního samostatného souboru .js a nevkládat jej přímo do šablony motivu, nezapomeňte do svého motivu přidat následující řádky. function.phpa všimněte si, že název souboru je ajaxcomments.js v kořenové složce motivu.

add_action ('init', 'ajaxcomments_load_js', 10); function ajaxcomments_load_js () {wp_enqueue_script ('ajaxcomments', get_stylesheet_directory_uri (). '/ ajaxcomments.js'); }

Zde je Javascript pro zpracování formuláře komentáře (nebo můžete podívejte se na pastebin):

 // AJAXifikovaný systém komentářů. jQuery ('document'). ready (funkce ($) { var commentform = $ ('# commentform'); // najděte formulář komentáře. commentform.prepend ('
 
'); // přidejte informační panel před formulář, abyste poskytli zpětnou vazbu nebo chyby. var statusdiv = $ ('# comment-status'); // definuje infopanel commentform.submit (function () { // serializovat a ukládat data formuláře do proměnné. var formdata = commentform.serialize (); // Přidat stavovou zprávu. statusdiv.html ('
 Zpracování... 
'); // Extrahujte URL akce z komentáře. var formurl = commentform.attr ('action'); // Zašlete formulář s údaji. $ .ajax ({ typ: 'post', url: formurl, data: formdata, error: function (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 Možná jste nechali jedno z polí prázdné nebo jste odeslali příliš rychle 
'); }, success: function (data, textStatus) { if (data == "success") statusdiv.html ('
 Děkujeme za váš komentář. Vážíme si vaší odpovědi. 
 '); jiný. statusdiv.html ('
 Počkejte prosím, než odešlete svůj další komentář 
'); commentform.find ('textarea [name = comment]'). val (''); } }); návrat false; }); });

Abychom kód rozbili, nejprve vytváříme objekty jQuery formuláře pro komentáře (což předpokládá, že váš formulář s komentářem má výchozí ID CSS „commentform“), a nad něj přidáme prázdný informační panel, který později použijeme k zobrazení zpráv uživateli o průběhu zveřejňování jejich komentáře.

commentform.submit se používá k „únosu“ tlačítka odeslání. Následně serializujeme data formuláře (přeměníme je v jeden dlouhý řádek dat),zpracovává se“Pro uživatele na tomto informačním panelu a pokračujte s požadavkem AJAX. Požadavek AJAX je standardní formát, ale ne ve skutečnosti v rámci tohoto tutoriálu dnes - stačí říci, že reaguje na úspěch nebo chyba a mezery ve formuláři, pokud jsou úspěšné, aby zabránily náhodnému zveřejnění stejného komentáře dvakrát. Podle potřeby upravte zprávy a chyby nebo přidejte vhodný styling do šablony stylů svého motivu, pokud chcete, aby se chybové zprávy nějak odlišovaly. Poslední řádek - vrátit nepravdivé - zabrání vyplnění výchozí akce formuláře.

PHP Handler

Nakonec potřebujeme něco, abychom zabránili obnovování stránky a poslali příslušnou odpověď zpět uživateli a také upozornit administrátora, pokud je třeba komentář moderovat, nebo upozornit autora nového komentáře. Za tímto účelem se připojíme comment_post akce, ke které dojde ihned po přidání do databáze, a zjistí, zda se jednalo o požadavek AJAX. Přidejte to do svého function.php soubor:

(Také dostupný v tomto pastebinu)

add_action ('comment_post', 'ajaxify_comments', 20, 2); funkce ajaxify_comments ($ comment_ID, $ comment_status) { if (! empty ($ _ SERVER ['HTTP_X_REQUESTED_WITH'])) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Pokud tedy požadavek AJAX. switch ($ comment_status) { případ '0': // upozornit moderátora na neschválený komentář. wp_notify_moderator ($ comment_ID); případ '1': // Schválený komentář. echo "úspěch"; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ post = & get_post ($ commentdata ['comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); přestávka; default: echo "error"; } výstup; } }

Spotové problémy

Pokud se stránka místo aktualizace prostřednictvím AJAX stále obnovuje, pravděpodobně se jedná o jeden ze dvou problémů. Jeden - možná nemáte jQuery načten. Nainstalujte Firebug Jak nainstalovat Firebug na IE, Safari, Chrome a Opera Přečtěte si více , nebo povolte vývojářské nástroje Chrome a zkontrolujte chyby v protokolu konzoly. Pokud jQuery nenalezen, vraťte se zpět do sekce JavaScriptu a přečtěte si první bit o přidání jQuery do svého motivu. Druhou možností je, že vaše téma udělá něco zvláštního pro formulář komentáře a jeho ID již není „formulář komentáře“. Zkontrolujte zdrojový kód a poté upravte var commentform = $ ('# commentform') řádek v JavaScriptu, aby to bylo správné ID - to by mohlo fungovat.

Jako vždy se snažím pomáhat, jak jen to půjde, ale prosím pošlete odkazy na příklad URL, kde se mohu rychle podívat.