How To AJAX-ify Uw WordPress-opmerkingen

Advertentie

Standaard is het WordPress-reactiesysteem jammerlijk ontoereikend - een van mijn grootste bezwaren is dat om een ​​opmerking te plaatsen, de pagina moet worden vernieuwd. Je zou kunnen overschakelen naar een systeem van derden zoals Livefyre [Broken URL Removed] of Disqus 3 manieren om reacties op uw Wordpress-blog aan te moedigenHet ontvangen van reacties op uw blog is een geweldige motivator om u bezig te houden met bloggen op de lange termijn. Gewoon weten dat er iemand is, het waarderen van je werk voelt geweldig, maar niet ... Lees verder , maar als je liever alles in huis houdt of een andere vorm van aanpassing doet, dan is het plaatsen van opmerkingen van AJAX het minste wat je moet doen.

U kunt hier een voorbeeld van zien werken Gebruikmaken van - wanneer u een opmerking plaatst, verlaat u de pagina niet - in plaats daarvan sturen we deze via een AJAX-oproep en sturen we vervolgens snel 'dank u'Antwoord terug. Lees verder voor een volledige tutorial.

Lees mijn voor het gebruik van niet-WordPress-functies als AJAX

vorige tutorial Een tutorial over het gebruik van AJAX in WordPressAJAX is een opmerkelijke webtechnologie die ons verder heeft gebracht dan de simpele 'kliklink, ga naar een andere pagina' structuur van het internet 1.0. Hiermee kunnen websites inhoud dynamisch ophalen en weergeven zonder de gebruiker... Lees verder , en zorg ervoor dat u alle WordPress-gerelateerde artikelen bekijkt.

Invoering

Er zijn twee afzonderlijke delen nodig 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 door op te klikken Voeg commentaar toe knop Verzenden, waardoor het ook een AJAX-oproep is en ook het antwoord verwerkt.
• Een PHP-handler die aansluit bij de actie comment_post

Javascript

Ten eerste zal dit nodig zijn jQuery, net als alles wat op dit moment op afstand spannend is in webontwikkeling. Als je niet zeker weet of het al wordt geladen, ga je gang en ga je naar de JavaScript-code en probeer je het toch - als je Firebug hebt en het consolelogboek zegt:jQuery is niet gedefinieerd"Wanneer u de pagina vernieuwt, voegt u deze regel toe aan uw functions.php-bestand om ervoor te zorgen dat 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 gebruiken, die sneller is en meer up-to-date is. datum dan degene die standaard bij WordPress zit - dus het kan een goed idee zijn om die toch toe te voegen, zelfs als jQuery al is geladen ergens anders.

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

Als alternatief kunt u 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 niet rechtstreeks in uw themasjabloon te plakken, voeg dan de volgende regels toe aan uw functies.php, en let op de bestandsnaam 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 het Javascript om het commentaarformulier af te handelen (of je kan bekijk het op pastebin):

 // AJAXified reactiesysteem. jQuery ('document'). ready (function ($) { var commentform = $ ('# commentform'); // vind het commentaarformulier. commentform.prepend ('
 
'); // voeg infopaneel toe vóór het formulier om feedback of fouten te geven. var statusdiv = $ ('# comment-status'); // definieer het infopanel commentform.submit (function () { // serialiseer en bewaar formuliergegevens in een variabele. var formdata = commentform.serialize (); // Voeg een statusbericht toe. statusdiv.html ('
 Verwerking... 
'); // Extractie-URL uit commentaarformulier. var formurl = commentform.attr ('actie'); // Postformulier met gegevens. $ .ajax ({ type: 'post', url: formurl, data: formdata, error: function (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 Mogelijk hebt u een van de velden leeg gelaten of plaatst u te snel 
'); }, success: function (data, textStatus) { if (data == "succes") statusdiv.html ('
 Bedankt voor je reactie. We stellen uw reactie op prijs. 
 '); anders. statusdiv.html ('
 Wacht even voordat je je volgende reactie plaatst 
'); commentform.find ('textarea [name = comment]'). val (''); } }); false teruggeven; }); });

Om de code op te splitsen, maken we eerst jQuery-objecten van het reactieformulier (die ervan uitgaat dat uw commentaarformulier de standaard css-ID heeft van "commentaarformulier")en erboven een leeg infopaneel toe te voegen dat we later zullen gebruiken om berichten aan de gebruiker weer te geven over de voortgang van het plaatsen van hun opmerking.

commentform.submit wordt gebruikt om de verzendknop te 'kapen'. Vervolgens serialiseren we de formuliergegevens (maken er een lange regel van gegevens van), geven we een “Verwerken”Bericht aan de gebruiker in dat infopaneel en ga je gang met een AJAX-verzoek. Het AJAX-verzoek is een standaard formaat, maar niet echt in het bereik van deze tutorial vandaag - volstaat om te zeggen dat het reageert op een succes of fout en maakt het formulier leeg als het succesvol is om te voorkomen dat dezelfde opmerking per ongeluk wordt gepost tweemaal. Pas de berichten en fouten waar nodig aan, of voeg een passende styling toe aan het stijlblad van uw thema als u wilt dat de foutmeldingen op de een of andere manier opvallen. De laatste regel - false teruggeven - voorkomt dat het formulier de standaardactie voltooit.

PHP-handler

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

(Ook beschikbaar op deze pastebin)

add_action ('comment_post', 'ajaxify_comments', 20, 2); functie ajaxify_comments ($ comment_ID, $ comment_status) { if (! empty ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Als AJAX Request Then. schakelaar ($ comment_status) { case '0': // moderator op de hoogte stellen van niet-goedgekeurde opmerking. wp_notify_moderator ($ comment_ID); case '1': // Goedgekeurd commentaar. echo "succes"; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ post = & get_post ($ commentdata ['comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); breken; standaard: echo "fout"; } Uitgang; } }

Spot problemen

Als de pagina nog steeds wordt vernieuwd in plaats van te posten via AJAX, is dit waarschijnlijk een van de twee problemen. Een - je hebt mogelijk geen jQuery geladen. Installeren Firebug Hoe Firebug te installeren op IE, Safari, Chrome & Opera Lees verder of schakel Chrome-ontwikkelaarstools in en controleer het consolelogboek op fouten. Als jQuery niet wordt gevonden, ga dan terug naar het JavaScript-gedeelte en lees het eerste stukje over het toevoegen van jQuery aan je thema. De tweede mogelijkheid is dat uw thema iets speciaals doet met het reactieformulier en dat het ID niet langer 'commentaarformulier' is. Controleer de broncode en pas vervolgens de aan var commentform = $ (‘# commentform’) regel in het JavaScript om de juiste ID te zijn - dat zou kunnen werken.

Zoals altijd ben ik er om zoveel mogelijk verder te helpen, maar plaats alstublieft links naar een voorbeeld-URL waar ik snel een kijkje kan nemen.