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

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. Mohli byste přejít na systém třetích stran, jako je Livefyre nebo Disqus 3 způsoby, jak povzbudit komentáře k vašemu blogu Wordpress 3 způsoby, jak povzbudit komentáře k vašemu blogu Wordpress Získání komentářů na vašem blogu je skvělým motivátorem, aby vám pokračoval v dálkovém dopravě, který je blogování. Jen s vědomím, že je někdo venku, oceníte, že se vaše práce cítí skvěle, ale ne…, ale pokud byste raději nechali všechno v domě nebo provedli nějaký jiný druh přizpůsobení, 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 hovoru AJAX a poté rychle pošleme “Děkuji” poznámka zpět. Celý kurz si přečtěte.

Pro použití funkcí mimo WordPress jako AJAX si prosím přečtěte můj předchozí tutoriál Výukový program o používání AJAXu v WordPressu Výukový program o použití AJAXu ve WordPressu AJAX je pozoruhodná webová technologie, která nás posunula nad rámec jednoduchých “klikněte na odkaz, přejděte na jinou stránku” struktura internetu 1.0. Umožňuje webům dynamicky načítat a zobrazovat obsah bez uživatele ... a nezapomeňte si prohlédnout 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řebovat jQuery, stejně jako cokoli vzdáleně vzrušujícího ve vývoji webových aplikací v dnešní době. Pokud si nejste jisti, zda se již načítá, pokračujte a přeskočte na kód Javascript a zkuste to stejně - pokud máte Firebug a v protokolu konzoly se říká “jQuery není definováno” když aktualizujete stránku, přidejte tento řádek do souboru function.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"), false); wp_enqueue_script ('jquery');  add_action ('wp_print_scripts', 'google_jquery');

Poznámka: Jedná se o komplikovaný způsob načtení jQuery, protože budeme používat nejnovější verzi z CDN Google, která je rychlejší a aktuálnější než ta, která je ve výchozím nastavení součástí WordPress - takže by mohl být dobrý nápad přidat ji stejně i když jQuery je již načten 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 template - 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 přidat následující řádky do své šablony motivu. function.php, a všimněte si, že název souboru je předpokládán 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 si ji můžete prohlédnout na pastebinu):

// AJAXified komentářový systém jQuery ('document'). Ready (function ($) var commentform = $ ('# commentform'); // najděte formulář komentáře commentform.prepend (''); // // panel před přidáním) formulář k poskytnutí zpětné vazby nebo chyb 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ává se… 
'); // Extrahujte URL akce z formatformu var formurl = commentform.attr ('action'); // Post Form s údaji $ .ajax (type: '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říspěvky příliš rychle
'); , success: function (data, textStatus) if (data == "success") statusdiv.html ('
Děkuji za Váš komentář. Vážíme si vaší odpovědi.
'); else statusdiv.html ('
Počkejte prosím, než odešlete svůj další komentář
'); commentform.find ('textarea [name = comment]'). val (");); return false;););

Abychom kód rozebrali, nejprve vytváříme objekty jQuery formuláře komentáře (což předpokládá, že váš formulář komentáře má výchozí ID CSS “komentář”), 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 Odeslat. Pak serializujeme data formuláře (proměníme je v jednu dlouhou řadu dat), dáme a “zpracovává se” zprávu na tomto informačním panelu a pokračujte s požadavkem AJAX. Požadavek AJAX je standardní formát, ale dnes ve skutečnosti není v rozsahu tohoto tutoriálu - stačí říci, že reaguje na úspěch nebo chybu, a pokud je úspěšný, nevyplní formulář, aby zabránil náhodnému zveřejnění stejného komentáře dvakrát. Upravte zprávy a chyby podle potřeby, 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 pokud to komentář vyžaduje, informujeme administrátora nebo upozorníme autora na nový komentář. Za tímto účelem se připojíme comment_post akce, ke které dojde ihned po přidání do databáze, a zjistit, zda se jednalo o požadavek AJAX. Přidejte to do svého function.php soubor:

(K dispozici také v tomto pastebinu)

add_action ('comment_post', 'ajaxify_comments', 20, 2); function ajaxify_comments ($ comment_ID, $ comment_status) if (! empty ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') // If AJAX Request comment_status) case '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";  exit; 

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 Jak nainstalovat Firebug na IE, Safari, Chrome & Opera nebo povolit vývojové nástroje Chrome a zkontrolujte chyby v protokolu konzoly. Pokud jQuery nebyl nalezen, 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 dělá něco zvláštního pro formulář komentáře a jeho ID již není “komentář”. Zkontrolujte zdrojový kód a poté upravte var commentform = $ ('# commentform') řádek v JavaScriptu jako správné ID - to by mohlo fungovat.

Jako vždy jsem tu, abych pomohl co nejvíce dále, ale prosím pošlete odkazy na příklad URL, kde se mohu rychle podívat.