Ako AJAX-ify vaše WordPress Komentáre

Reklama

V predvolenom nastavení je systém komentovania WordPress žalostne neadekvátny - jednou z mojich najväčších výhrad je, že na uverejnenie komentára je potrebné stránku obnoviť. Môžete prepnúť na systém tretej strany, ako je napríklad Livefyre [Broken URL Removed] alebo Disqus 3 spôsoby, ako stimulovať komentáre k vášmu blogu WordpressZískanie komentárov k vášmu blogu je skvelým motivačným faktorom, ktorý vás upozorní na diaľkovú komunikáciu, ktorá je blogovaním. Len s vedomím, že niekto tam je, oceňuje vašu prácu, cíti sa skvele, ale nie ... Čítaj viac , ale ak by ste radšej ponechali všetko v dome alebo urobili nejaký iný druh prispôsobenia, uverejňovanie komentárov od AJAX je to najmenšie, čo by ste mali urobiť.

Tu vidíte príklad tejto práce Použiť - keď uverejníte komentár, neopustíte stránku - namiesto toho ju pošleme prostredníctvom hovoru AJAX a potom pošleme „Ďakujem“Na vedomie. Celý tutoriál si môžete prečítať ďalej.

Ak chcete používať funkcie iné ako WordPress ako AJAX, prečítajte si prosím moje

predchádzajúci kurz Výukový program o používaní AJAX vo WordPressAJAX je pozoruhodná webová technológia, ktorá nás posunula nad rámec jednoduchého odkazu „kliknite na odkaz, choďte na inú stránku“ Štruktúra internetu 1.0. Umožňuje webovým stránkam dynamicky načítať a zobraziť obsah bez obsahu Užívateľ ... Čítaj viac a nezabudnite sa pozrieť na všetky články súvisiace s WordPress.

úvod

Na to, aby fungovali komentáre AJAX WordPress, sú potrebné dve samostatné časti, takže vám ich najskôr vysvetlíme, aby sme vám poskytli prehľad celého procesu.

• Niektoré Javascript na stránke, ktoré zachytávajú užívateľa kliknutím na Pridať komentár tlačidlo odoslania, vďaka ktorému je tiež hovorom AJAX a spracováva aj odpoveď.
• Obslužný program PHP, ktorý sa zapojí do akcie comment_post

Javascript

Po prvé, bude to potrebné jQuery, rovnako ako čokoľvek, čo je dnes v oblasti vývoja webových aplikácií vzrušujúce. Ak si nie ste istí, či sa už načíta, pokračujte a preskočte na kód jazyka Javascript a skúste to aj tak - ak máte Firebug a v protokole konzoly sa uvádza „jQuery nie sú definované“Po aktualizácii stránky pridajte tento riadok do súboru functions.php, aby ste sa uistili, že sa načítava.

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');

Upozorňujeme, že ide o prepracovaný spôsob načítania jQuery, pretože používame najnovšiu verziu z CDN Google, ktorá je rýchlejšia a rýchlejšia dátum, ktorý je predvolene zahrnutý v programe WordPress - preto by bolo dobré pridať, že aj napriek tomu, že je už načítaný jQuery, inde.

Teraz, pre skutočný Javascript, ktorý zvládne formulár komentárov, máme niekoľko možností. Najjednoduchšie je vložiť kód do svojho kódu single.php šablóna - za predpokladu, že nemáte povolené komentáre ani pre stránky.

Prípadne môžete vložiť do existujúceho JS súbor, ktorý používa vaša téma, alebo vytvorte súbor nový .js súbor v adresári tém. Ak sa rozhodnete vložiť ho do vlastného samostatného súboru .js a nevkladať ho priamo do šablóny témy, nezabudnite do svojho motívu pridať nasledujúce riadky. functions.phpa všimnite si, že názov súboru je ajaxcomments.js v koreňovom adresári priečinka s témami.

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

Tu je Javascript na spracovanie formulára pre komentár (alebo môžete zobraziť to na pastebine):

 // AJAXifikovaný systém komentovania. jQuery ('document'). ready (funkcia ($) { var commentform = $ ('# commentform'); // nájdete formulár komentárov. commentform.prepend ('
 
'); // pridajte informačný panel pred formulár, aby ste poskytli spätnú väzbu alebo chyby. var statusdiv = $ ('# comment-status'); // definuje infopanel commentform.submit (function () { // serializuje a ukladá dáta formulára do premennej. var formdata = commentform.serialize (); // Pridajte stavovú správu. statusdiv.html ( '
 Spracovanie...  p>'); // Extrahujte webovú adresu akcie z formulára s komentármi. var formurl = commentform.attr ('action'); // Pošlite formulár s údajmi. $ .Ajax ({ typ: 'post', url: formurl, data: formdata, error: function (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 Možno ste nechali jedno z polí prázdne alebo uverejňovali príliš rýchlo 
'); }, success: function (data, textStatus) { if (data == "úspech") statusdiv.html ('
 Ďakujeme za váš komentár. Ceníme si vašu odpoveď. 
 '); inde. statusdiv.html ('
 Pred uverejnením nasledujúceho komentára počkajte chvíľu 
'); commentform.find ( 'textová [názov = komentár]') val ( ''); } }); návrat nepravdivý; }); });

Aby sme kód rozobrali, najprv vytvárame objekty jQuery formulára s komentármi (ktorý predpokladá, že váš formulár komentárov má predvolené ID CSS „commentform“)a nad ňu pridajte prázdny informačný panel, ktorý neskôr použijeme na zobrazenie správ používateľovi o postupe uverejňovania ich komentárov.

commentform.submit sa používa na „ukradnutie“ tlačidla odoslania. Následne serializujeme údaje formulára (premeníme ich na jeden dlhý riadok údajov),spracovanie“Pre používateľov na tomto informačnom paneli a pokračujte s požiadavkou AJAX. Požiadavka AJAX je štandardný formát, ale v súčasnosti nie v rozsahu tohto tutoriálu - stačí povedať, že reaguje na úspech alebo chyba a prázdne formuláre, ak sa im podarí zabrániť náhodnému uverejneniu toho istého komentára dvakrát. Podľa potreby upravte správy a chyby, alebo ak chcete, aby sa chybové správy nejakým spôsobom vyznačovali, pridajte do šablóny štýlov vhodné štýly. Posledný riadok - návrat nepravdivý - zabráni dokončeniu predvolenej akcie formuláru.

Ovládač PHP

Nakoniec potrebujeme niečo, aby sme zabránili obnoveniu stránky a poslali príslušnú odpoveď späť používateľovi ako aj upozornenie správcu, ak je potrebné komentár zmierniť, alebo upozornenie autora nového komentára. Z tohto dôvodu sme sa pripojiť k internetu comment_post akcia, ktorá nastane hneď po jej pridaní do databázy a zistí, či to bola žiadosť AJAX. Pridajte toto do svojho functions.php file:

(Tiež dostupný v tomto pastebine)

add_action ('comment_post', 'ajaxify_comments', 20, 2); fungujú ajaxify_comments ($ comment_ID, $ comment_status) { if (! empty ($ _ SERVER ['HTTP_X_REQUESTED_WITH'])) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Ak potom žiadosť AJAX. switch ($ comment_status) { prípad '0': // upozorniť moderátora na neschválený komentár. wp_notify_moderator ($ comment_ID); prípad '1': // Schválený komentár. echo „úspech“; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ Post = & get_post ($ commentdata [ 'comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); prestávka; predvolená hodnota: echo "error"; } východ; } }

Problémy na mieste

Ak sa stránka namiesto uverejňovania prostredníctvom AJAX stále obnovuje, pravdepodobne ide o jeden z dvoch problémov. Jeden - možno nemáte nainštalovaný jQuery. Inštalácia Firebug Ako nainštalovať Firebug na IE, Safari, Chrome a Opera Čítaj viac , alebo povoľte vývojárske nástroje prehliadača Chrome a skontrolujte chyby v protokole konzoly. Ak sa jQuery nenájde, vráťte sa späť do sekcie JavaScript a prečítajte si prvý kúsok o pridaní jQuery do svojej témy. Druhou možnosťou je, že vaša téma robí pre formulár s komentármi niečo zvláštne a jeho ID už nie je „formulár s komentármi“. Skontrolujte zdrojový kód a potom upravte var commentform = $ ('# commentform') riadok v JavaScripte, aby bol správnym ID - čo by mohlo fungovať.

Ako vždy som tu, aby som ešte viac pomohol, ale pošlite nám odkazy na príklad adresy URL, kde sa môžem rýchlo pozrieť.