How To AJAX-ify Your WordPress Comments

Standaard is het commentaarsysteem van WordPress hopeloos ontoereikend - een van mijn grootste bezwaren is dat om een ​​reactie te plaatsen, de pagina moet worden vernieuwd. Je zou kunnen overschakelen naar een systeem van derden zoals Livefyre of Disqus 3 manieren om reacties op je Wordpress Blog aan te moedigen 3 manieren om reacties op je Wordpress Blog aan te moedigen Reacties op je blog krijgen is een geweldige motivator om je op weg te helpen met de lange termijn die is bloggen. Gewoon weten dat iemand daar is, het waarderen van je werk voelt geweldig, maar niet ... Lees meer, maar als je liever alles in huis hebt of een ander soort aanpassing doet, dan is het plaatsen van opmerkingen door AJAX het minste wat je zou moeten doen.

U kunt hier een voorbeeld van zien werken Gebruikmaken van - wanneer je een reactie post, verlaat je de pagina niet - in plaats daarvan sturen we hem via een AJAX-oproep en sturen we een snel “dank je” let op. Lees verder voor een volledige tutorial.

Voor het gebruik van niet-WordPress-functies als AJAX, lees mijn vorige zelfstudie A Zelfstudie over het gebruik van AJAX in WordPress A Tutorial over het gebruik van AJAX In WordPress AJAX is een opmerkelijke webtechnologie die ons verder heeft gebracht dan de eenvoudige “klik op link, ga naar een andere pagina” structuur van het internet 1.0. Hiermee kunnen websites inhoud dynamisch ophalen en weergeven zonder de gebruiker ... Lees meer, en zorg ervoor alle WordPress-gerelateerde artikelen te bekijken.

Invoering

Er zijn twee afzonderlijke onderdelen die nodig zijn om AJAX WordPress-opmerkingen te laten werken, dus laten we die eerst uitleggen om u een overzicht van het hele proces te geven.

• Sommige Javascript op de pagina die de gebruiker onderschept die op de Voeg commentaar toe submit-knop, waarmee het ook een AJAX-aanroep is en ook het antwoord afhandelt.
• Een PHP-handler die inhaakt in de actie comment_post

Javascript

Allereerst zal dit jQuery nodig hebben, net als alles wat op afstand opwindend is in webontwikkeling tegenwoordig. Als je niet zeker weet of het al wordt geladen, ga je gang en ga je naar de Javascript-code om het toch te proberen - als je Firebug hebt en het consolelogboek zegt “jQuery is undefined” wanneer u de pagina vernieuwt, voegt u deze regel toe aan uw functions.php-bestand om te controleren of deze wordt geladen.

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

Let op, dat is een uitgebreide manier om jQuery te laden, omdat we de nieuwste versie van Google CDN's zullen gebruiken, die sneller en actueler is dan degene die standaard bij WordPress wordt geleverd - dus het zou een goed idee kunnen zijn om dat toch toe te voegen zelfs als jQuery al elders is geladen.

Nu, voor de daadwerkelijke Javascript die het commentaarformulier zal behandelen, hebben we een paar opties. Het makkelijkste is om de code gewoon in je te plakken single.php sjabloon - ervan uitgaande dat u ook voor pagina's geen reacties heeft ingeschakeld.

Je kunt ook in een bestaande plakken .js bestand gebruikt door uw thema, of maak een nieuwe .js bestand in uw themamap. Als u ervoor kiest om het in uw eigen afzonderlijke JS-bestand te plaatsen en het niet rechtstreeks in uw themasjabloon te plakken, moet u de volgende regels toevoegen aan uw functions.php, en let op dat de bestandsnaam wordt verondersteld te zijn ajaxcomments.js in de hoofdmap van uw themamap.

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

Hier is de Javascript om het commentaarformulier af te handelen (of je kunt het bekijken op pastebin):

Om de code te breken, maken we eerst jQuery-objecten van het reactieformulier (die ervan uitgaat dat je commentaarformulier de standaard CSS-ID van heeft “commentform”), en een leeg infopaneel erboven toevoegen dat we later zullen gebruiken om berichten aan de gebruiker te tonen over de voortgang van het plaatsen van hun reactie.

commentform.submit wordt gebruikt om de submit-knop te 'kapen'. Vervolgens serialiseren we de formuliergegevens (verander het in één lange gegevenslijn), geef een “Verwerken” bericht aan de gebruiker in dat infopaneel en ga verder met een AJAX-verzoek. Het AJAX-verzoek is een standaardindeling, maar niet echt in het bereik van deze zelfstudie van vandaag - het is voldoende om te zeggen dat het op een succes of fout reageert en het formulier leegmaakt als het succesvol is om te voorkomen dat dezelfde reactie twee keer per ongeluk wordt gepost. Pas de berichten en fouten aan, of voeg een geschikte stijl toe aan de stylesheet van uw thema als u wilt dat de foutmeldingen op de een of andere manier opvallen. De laatste regel - return false - voorkomt dat het formulier de standaardactie voltooit.

PHP-handler

Ten slotte hebben we iets nodig om te voorkomen dat de pagina wordt vernieuwd en de juiste reactie naar de gebruiker terug te sturen, evenals om de beheerder op de hoogte te stellen als de opmerking moet worden gemodereerd of de auteur van een nieuwe opmerking op de hoogte moet stellen. Hiervoor haken we in op de comment_post actie die plaatsvindt net nadat deze aan de database is toegevoegd en detecteer of het een AJAX-verzoek was. Voeg dit toe aan uw functions.php het dossier:

(Ook verkrijgbaar bij deze pastebin)

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') // Als AJAX-verzoek vervolgens overschakelt ($ comment_status) case '0': // notificeer moderator van niet goedgekeurde opmerking wp_notify_moderator ($ comment_id); case '1': // Approved comment echo "success"; $ commentdata = & get_comment ($ comment_id, ARRAY_A); $ Bericht = & get_post ($ commentdata [ 'comment_post_ID']); wp_notify_postauthor ($ comment_id, $ commentdata ['comment_type']); breken; standaard: echo "error";  Uitgang; 

Spot problemen

Als de pagina nog steeds wordt vernieuwd in plaats van via AJAX wordt geplaatst, is dit waarschijnlijk een van de twee problemen. Eén - mogelijk is jQuery niet geladen. Firebug installeren Firebug installeren op IE, Safari, Chrome en Opera Installeren van Firebug op IE, Safari, Chrome & Opera Lees meer of schakel Chrome-ontwikkelaarstools in en controleer het consolelogboek op fouten. Als jQuery niet wordt gevonden, gaat u terug naar de sectie JavaScript en leest u het eerste bit over het toevoegen van jQuery aan uw thema. De tweede mogelijkheid is dat je thema iets speciaals doet aan het commentaarformulier en dat het ID niet langer is “commentform”. Controleer de broncode en pas vervolgens de var commentform = $ ('# commentform') regel in JavaScript om de juiste ID te zijn - dat zou kunnen werken.

Zoals altijd blijf ik zo veel mogelijk verder helpen, maar plaats links naar een voorbeeld-URL waar ik snel een kijkje kan nemen, of post op het MakeUseOf Answers-forum als de opmerkingen van dit bericht zijn gesloten. Genieten AJAXified de opmerkingen!

Ontdek meer over: Online reageren, programmeren, Webontwikkeling.