Hur man AJAX-ify dina WordPress kommentarer

Som standard är WordPress-kommentarsystemet väldigt otillräckligt - en av mina största invändningar är att för att skicka en kommentar måste sidan uppdateras. Du kan byta till ett tredjepartssystem som Livefyre eller Disqus 3 sätt att uppmuntra kommentarer till din Wordpress-blogg 3 sätt att uppmuntra kommentarer till din Wordpress-blogg Få kommentarer på din blogg är en utmärkt motivator för att hålla dig på med den långa tid som blogga. Bara att veta att någon är ute och uppskattar att ditt arbete är bra, men inte ... Läs mer, men om du föredrar att hålla allt hemma eller göra någon annan form av anpassning, så är det minst du borde skriva in kommentarer från AJAX..

Du kan se ett exempel på det här arbetet 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 en snabb “tack” notera tillbaka. Läs vidare för en fullständig handledning.

För att använda icke-WordPress-funktioner som AJAX, läs mina tidigare handledning. En handledning om hur man använder AJAX i WordPress. En handledning om hur man använder AJAX. I WordPress AJAX är en anmärkningsvärd webbteknologi som flyttat oss bortom det enkla “klicka länk, gå till en annan sida” strukturen på Internet 1.0. Det gör det möjligt för webbplatser att dynamiskt hämta och visa innehåll utan användaren ... Läs mer, och var noga med att kolla in alla WordPress-relaterade artiklar.

Introduktion

Det finns två separata delar som behövs för att få AJAX WordPress-kommentarer att fungera, så kan vi förklara de första som ger dig en överblick över hela processen.

• Några JavaScript på sidan som avlyssnar användaren att klicka på Lägg till kommentar Skicka knappen, som också gör det till ett AJAX-samtal och hanterar också svaret.
• En PHP-hanterare som hakar i kommandot_post-åtgärden

Javascript

Först och främst kommer det att behöva jQuery, liksom vad som helst som är något spännande i webbutveckling nuförtiden. Om du inte är säker på om den redan laddas, fortsätt och hoppa ner till Javascript-koden och prova ändå - om du har Firebug och konsolloggen säger “jQuery är odefinierad” När du uppdaterar sidan lägger du till den här raden i din functions.php-fil för att säkerställa 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"), felaktigt); wp_enqueue_script ( 'jquery');  add_action ('wp_print_scripts', 'google_jquery');

Obs! Det här är ett utförligt sätt att ladda jQuery eftersom vi använder den senaste versionen från Google CDN, vilket är snabbare och mer aktuellt än det som vanligtvis ingår i WordPress - så det kan vara en bra idé att lägga till det ändå även om jQuery redan är laddad någon annanstans.

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

Alternativt kan du klistra in i en befintlig .js fil som används av ditt tema, eller skapa en nya .js filen i din temakatalog. Om du väljer att lägga den i din egen separata .js-fil och inte klistra in den direkt i tememalmallen, var noga med att lägga till följande rader i din functions.php, och notera att filnamnet antas vara ajaxcomments.js i roten till din temmapp.

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

Här är Javascript för att hantera kommentarformuläret (eller du kan se den på pastebin):

För att bryta ner koden skapar vi först jQuery-objekt i kommentarformen (som antar att ditt formulär har standard css ID för “commentform”), och lägger till en tom informationspanel ovanför den som vi senare använder för att visa meddelanden till användaren om hur det går att lägga in deras kommentar.

commentform.submit används för att "kapa" inläggsknappen. Vi serialiserar sedan formulärdata (gör det till en lång rad data), ge en “bearbetning” meddelande till användaren i den informationspanelen och fortsätt med en AJAX-förfrågan. AJAX-förfrågan är ett standardformat, men inte riktigt inom ramen för denna handledning idag - tillräckligt för att säga att den reagerar på antingen en framgång eller ett fel och blanketter ut formuläret om det lyckades förhindra att samma kommentar uppges av misstag via två gånger. Justera meddelanden och fel, beroende på vad som är lämpligt, eller lägg till någon lämplig styling i ditt temans stilbearbetning om du vill att felmeddelandena ska stå ut på något sätt. Den sista raden - returnera falskt - förhindrar att formuläret fyller i standardinsatsen.

PHP Handler

Slutligen behöver vi något för att förhindra att sidan uppdateras och skicka det lämpliga svaret tillbaka till användaren samt att meddela admin om kommentaren behöver moderera eller meddela författaren till en ny kommentar. För detta hakar vi in ​​i comment_post åtgärd som inträffar strax efter att den lagts till i databasen och upptäcker om det var en AJAX-förfrågan. Lägg till detta i din functions.php fil:

(Finns även på denna pastebin)

add_action ('comment_post', 'ajaxify_comments', 20, 2); funktionen ajaxify_comments ($ comment_ID, $ comment_status) if (! tom ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') // Om AJAX-förfrågan sedan byta comment_status) case '0': // meddela moderator av okontrollerad kommentar wp_notify_moderator ($ comment_ID); fallet '1': // Godkänt kommentarseko "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: echo "error";  utgång; 

Spotproblem

Om sidan fortfarande uppdateras istället för att skicka via AJAX, är det troligt att det är ett av två problem. En - du kanske inte har jQuery laddad. Installera Firebug Installera Firebug på IE, Safari, Chrome & Opera Så här installerar du Firebug på IE, Safari, Chrome och Opera Läs mer, eller aktivera verktygen för Chrome-utvecklare och kolla på konsolloggen för fel. Om jQuery inte hittas, gå tillbaka till JavaScript-avsnittet och läs den första biten när du lägger till jQuery i ditt tema. Den andra möjligheten är att ditt tema gör något speciellt för kommentarformuläret och det är ID-numret inte längre “commentform”. Kontrollera källkoden och justera sedan var commentform = $ ('# commentform') linje i JavaScript för att vara rätt ID - som kan fungera.

Som alltid är jag ute för att hjälpa till så mycket som möjligt, men vänligen posta länkar till ett exempel på webbadress där jag kan ta en snabb titt eller posta i forumet MakeUseOf Answer om det här inläggets kommentarer stängs. Njut av AJAXified kommentarerna!

Utforska mer om: Online Kommentar, Programmering, Webbutveckling.