Hur AJAX-ify dina WordPress-kommentarer

Annons

Som standard är WordPress-kommentarsystemet svagt otillräckligt - ett av mina största invändningar är att sidan för att publicera en kommentar måste sidan uppdateras. Du kan byta till ett tredjepartssystem som Livefyre [Broken URL Removed] eller Disqus 3 sätt att uppmuntra kommentarer på din Wordpress-bloggAtt få kommentarer på din blogg är en stor motivator för att hålla dig igång med den långa sträckan som bloggar. Att bara veta att någon är ute, uppskattar ditt arbete känns bra, men inte ... Läs mer , men om du föredrar att hålla allt i hus eller göra någon annan typ av anpassning, är det minst du borde att posta kommentarer från AJAX.

Du kan se ett exempel på att det här fungerar här Använda - när du skickar en kommentar lämnar du inte sidan - istället skickar vi den via ett AJAX-samtal och skickar sedan ett snabbt "tack”Notera tillbaka. Läs vidare för en fullständig handledning.

För att använda icke-WordPress-funktioner som AJAX, läs min föregående handledning En handledning om hur du använder AJAX i WordPress

AJAX är en anmärkningsvärd webbteknologi som flyttade oss bortom den enkla "klicklänken, gå till en annan sida" strukturen för Internet 1.0. Det gör det möjligt för webbplatser att dynamiskt hämta och visa innehåll utan användare... Läs mer , och se till att kolla alla WordPress-relaterade artiklar.

Introduktion

Det finns två separata delar för att få AJAX WordPress-kommentarer att fungera, så låt oss förklara dem först för att ge dig en översikt över hela processen.

• Vissa Javascript på sidan som avbryter användaren genom att klicka på Lägg till kommentar skicka-knappen, som också gör det till ett AJAX-samtal och också hanterar svaret.
• En PHP-hanterare som ansluter sig till comment_post-åtgärden

Javascript

Först och främst kommer detta att behövas jQuery, liksom vad som är något spännande i webbutveckling nuförtiden. Om du inte är säker på om det redan laddas, gå vidare och hoppa ner till Javascript-koden och prova det ändå - om du har Firebug och konsolloggen säger "jQuery är odefinierat"När du uppdaterar sidan lägger du till den här raden i din features.php-fil för att se till att den laddas.

funktion 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"), falsk); wp_enqueue_script ( 'jquery'); }} add_action ('wp_print_scripts', 'google_jquery');

Observera att det är ett utarbetat sätt att ladda jQuery eftersom vi använder den senaste versionen från Google CDN: er, som är snabbare och mer upp till datum än det som standard ingår i WordPress - så det kan vara en bra idé att lägga till det i alla fall även om jQuery redan är laddat någon annanstans.

Nu har vi några alternativ för det faktiska Javascript som hanterar kommentarformuläret. Det enklaste är att bara klistra in koden i din single.php mall - förutsatt att du inte har kommenterat för sidor också.

Alternativt kan du klistra in i en befintlig Js fil som används av ditt tema, eller skapa en ny .js fil i din temakatalog. Om du väljer att lägga den i din egen separata .js-fil och inte klistra in den direkt i din temamall, ska du lägga till följande rader i din functions.phpoch notera att filnamnet antas vara ajaxcomments.js i roten till din temamapp.

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

Här är Javascript för att hantera kommentarformuläret (Eller kan du visa det på pastebin):

 // AJAXified kommentarsystem. jQuery ('dokument'). klar (funktion ($) { var commentform = $ ('# commentform'); // hitta kommentarformuläret. commentform.prepend ('
 
'); // lägg till infopanel innan formuläret för att ge feedback eller fel. var statusdiv = $ ('# comment-status'); // definiera infopanel-kommentarformuläret.sänd (funktion () { // serialisera och lagra formdata i en variabel. var formdata = commentform.serialize (); // Lägg till ett statusmeddelande. statusdiv.html ( '
 Behandling...  p>'); // Extrahera åtgärdens URL från kommentarformuläret. var formurl = commentform.attr ('action'); // Postformulär med data. $ .Ajax ({ typ: 'post', url: formurl, data: formdata, error: function (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 Du kanske har lämnat ett av fälten tomma, eller lagt ut för snabbt 
'); }, framgång: funktion (data, textStatus) { if (data == "framgång") statusdiv.html ('
 Tack för din kommentar. Vi uppskattar ditt svar. 
 '); annan. statusdiv.html ('
 Vänta lite innan du publicerar din nästa kommentar 
'); commentform.find ( 'textarea [name = kommentar]') val ( ''); } }); returnera falskt; }); });

För att dela koden skapar vi först jQuery-objekt i kommentarformuläret (som antar att ditt kommentarformulär har standard-css-ID för "kommentarformulär"), och lägga till en tom informationspanel ovanför som vi senare kommer att använda för att visa meddelanden till användaren om framstegen med att publicera sin kommentar.

commentform.submit används för att "kapa" skicka-knappen. Sedan serialiserar vi formulärdata (förvandlas till en lång rad med data), ger en "bearbetning”-Meddelande till användaren i den informationspanelen och gå vidare med en AJAX-begäran. AJAX-begäran är en standardformat, men inte riktigt inom ramen för denna handledning idag - räcker med att säga att det reagerar på antingen en framgång eller fel och raderar formuläret om det lyckas för att förhindra att samma kommentar av misstag publiceras dubbelt. Justera meddelanden och fel efter behov, eller lägg till någon lämplig styling i tematets formatmall om du vill att felmeddelandena ska sticker ut på något sätt. Den sista raden - returnera falskt - förhindrar att formuläret fyller i dets standardåtgärd.

PHP Handler

Slutligen behöver vi något för att förhindra att sidan uppdateras och skickar rätt svar tillbaka till användaren såväl som att meddela administratören om kommentaren måste modereras, eller meddela författaren om en ny kommentar. För detta ansluter vi oss till comment_post handling som inträffar strax efter att den har lagts till i databasen och upptäck om det var en AJAX-begäran. Lägg till detta till din functions.php fil:

(Också tillgänglig vid den här pastebin)

add_action ('comment_post', 'ajaxify_comments', 20, 2); funktion ajaxify_comments ($ comment_ID, $ comment_status) { if (! tom ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Om AJAX begär sedan. omkopplare ($ comment_status) { fall '0': // meddela moderator om ej godkänd kommentar. wp_notify_moderator ($ comment_ID); fall '1': // Godkänd kommentar. eko "framgång"; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ Post = & get_post ($ commentdata [ 'comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); ha sönder; standard: eko "fel"; } utgång; } }

Fläckproblem

Om sidan fortfarande uppdateras istället för att posta via AJAX, är det troligtvis ett av två problem. En - du kanske inte har laddat jQuery. Installera Pyroman Hur man installerar Firebug på IE, Safari, Chrome & Opera Läs mer , eller aktivera Chrome-utvecklarverktyg och kontrollera om det finns fel i konsolloggen. Om jQuery inte hittas, gå tillbaka till JavaScript-avsnittet och läs den första biten när du lägger till jQuery till ditt tema. Den andra möjligheten är att ditt tema gör något speciellt för kommentarformuläret och att ID: n inte längre är "kommentarformulär". Kontrollera källkoden och justera sedan var commentform = $ (‘# commentform’) rad i JavaScript för att vara rätt ID - det kan fungera.

Som alltid är jag runt för att hjälpa till vidare så mycket jag kan, men lägg gärna länkar till en exempel-URL där jag kan ta en snabb titt.