Sådan AJAX-ify dine WordPress-kommentarer

Som standard er WordPress-kommenteringssystemet desværre utilstrækkeligt - et af mine største indvendinger er, at siden for at sende en kommentar, skal siden opdateres. Du kan skifte til et tredjepartssystem som Livefyre eller Disqus 3 måder at tilskynde til kommentarer på din Wordpress Blog 3 måder at tilskynde til kommentarer på din Wordpress-blog At få kommentarer til din blog er en stor motivator til at holde dig i gang med det lange træk, der er blogging. Bare det at vide, at der er nogen derude, at værdsætte dit arbejde føles godt, men ikke…, men hvis du foretrækker at holde alt i hus eller lave en anden form for tilpasning, er det at placere kommentarer af AJAX det mindste, du skal gøre.

Du kan se et eksempel på dette arbejde her Gøre brug af - Når du sender en kommentar, forlader du ikke siden - i stedet sender vi den gennem et AJAX-opkald og sender derefter et hurtigt “tak skal du have” note tilbage. Læs videre for en fuld tutorial.

For at bruge ikke-WordPress-funktioner som AJAX, skal du læse min forrige tutorial. En tutorial om brug af AJAX i WordPress En tutorial om brug af AJAX i WordPress AJAX er en bemærkelsesværdig webteknologi, der flyttede os ud over det enkle “klik på link, gå til en anden side” strukturen af ​​Internettet 1.0. Det giver websteder mulighed for dynamisk at hente og vise indhold uden brugeren…, og sørg for at tjekke alle de WordPress-relaterede artikler.

Introduktion

Der er to separate dele, der er nødvendige for at få AJAX WordPress-kommentarer til at fungere, så lad os forklare dem først for at give dig et overblik over hele processen.

• Nogle Javascript på siden, der opfanger brugeren ved at klikke på Tilføj kommentar indsend knap, der også gør det til et AJAX-opkald og også håndterer svaret.
• En PHP-handler, der tilslutter sig kommentaren indlægs handling

Javascript

For det første har dette brug for jQuery, ligesom alt, hvad der er fjernt spændende inden for webudvikling i dag. Hvis du ikke er sikker på, om det allerede er indlæst, skal du gå videre til Javascript-koden og prøve det alligevel - hvis du har Firebug og konsolloggen siger “jQuery er ikke defineret” Når du opdaterer siden, skal du tilføje denne linje til din features.php-fil for at sikre, at den indlæses.

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

Bemærk, det er en detaljeret måde at indlæse jQuery på, fordi vi bruger den nyeste version fra Google CDN'er, som er hurtigere og mere ajourført end den, der er inkluderet som standard med WordPress - så det kan være en god ide at tilføje det alligevel selvom jQuery allerede er indlæst et andet sted.

Nu for det faktiske Javascript, der håndterer kommentarformularen, har vi et par muligheder. Det nemmeste er bare at indsætte koden i din single.php skabelon - forudsat at du ikke har aktiveret kommentarer til sider også.

Alternativt kan du indsætte i en eksisterende .js fil brugt af dit tema, eller opret en nyt .js fil i dit temakatalog. Hvis du vælger at placere den i din egen separate .js-fil og ikke indsætte den direkte i din temaskabelon, skal du sørge for at tilføje følgende linjer til din functions.php, og bemærk, at filnavnet antages at være ajaxcomments.js i roden af ​​din temamappe.

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

Her er Javascript til håndtering af kommentarformularen (eller du kan se det på pastebin):

// AJAXified commenting system jQuery ('dokument'). Klar (funktion ($) var commentform = $ ('# commentform'); // find kommentarformularen commentform.prepend (''); // tilføj infopanel før formularen til at give feedback eller fejl var statusdiv = $ ('# comment-status'); // definere infopanel commentform.submit (funktion () // serialiser og gem formulardata i en variabel var formdata = commentform.serialize ( ); // Tilføj en statusmeddelelse statusdiv.html ('
Forarbejdning… 
'); // Uddrag handlings-URL fra kommentarform var formurl = commentform.attr ('handling'); // Postformular med data $ .ajax (type: 'post', url: formurl, data: formdata, fejl: funktion (XMLHttpRequest, textStatus, errorThrown) statusdiv.html ('
Du har måske efterladt et af felterne tomt, eller du har sendt for hurtigt
'); , succes: funktion (data, textStatus) if (data == "succes") statusdiv.html ('
Tak for din kommentar. Vi værdsætter dit svar.
'); else statusdiv.html ('
Vent et stykke tid, inden du sender din næste kommentar
'); commentform.find ('textarea [name = comment]'). val (");); returner falsk;););

For at nedbryde koden opretter vi først jQuery-objekter i kommentarformularen (som antager, at din kommentarformular har standard-css-id på “commentform”), og tilføje et tomt informationspanel derover, som vi senere vil bruge til at vise meddelelser til brugeren om, hvor langt det er at indsende deres kommentar.

commentform.submit bruges til at 'kapre' indsendelsesknappen. Derefter serialiserer vi formulardataene (gør dem om til en lang række data), giver en “Forarbejdning” besked til brugeren i det infopanel, og gå videre med en AJAX-anmodning. AJAX-anmodningen er et standardformat, men ikke rigtig inden for rammerne af denne tutorial i dag - nok til at sige, at den reagerer på enten en succes eller en fejl, og udskriver formularen, hvis den lykkes for at forhindre, at den samme kommentar ved et uheld blev sendt to gange. Juster meddelelserne og fejlene efter behov, eller tilføj noget passende styling til dit temas stilark, hvis du gerne vil have, at fejlmeddelelserne på en eller anden måde skiller sig ud. Den sidste linje - vende tilbage falsk - forhindrer, at formularen udfylder sin standardhandling.

PHP Handler

Til sidst har vi brug for noget for at forhindre, at siden opdateres og sender det passende svar tilbage til brugeren, såvel som at underrette administratoren, hvis kommentaren skal modereres, eller underrette forfatteren om en ny kommentar. Til dette kobles vi ind i comment_post handling, der sker lige efter, at den er føjet til databasen, og detekterer, om det var en AJAX-anmodning. Føj dette til din functions.php fil:

(Også tilgængelig på denne 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') // Hvis AJAX Anmod derefter comment_status) sag '0': // underrett moderator om ikke godkendt kommentar wp_notify_moderator ($ comment_ID); sag '1': // Godkendt kommentar ekko "succes"; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ Post = & get_post ($ commentdata [ 'comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); pause; standard: ekko "fejl";  Afslut; 

Spot-problemer

Hvis siden stadig er forfriskende i stedet for at sende via AJAX, vil det sandsynligvis være et af to problemer. Én - du har måske ikke indlæst jQuery. Installer Firebug Sådan installeres Firebug på IE, Safari, Chrome & Opera Sådan installeres Firebug på IE, Safari, Chrome & Opera, eller aktiverer Chrome-udviklerværktøjer, og kontroller konsolloggen for fejl. Hvis jQuery ikke findes, skal du gå tilbage til afsnittet JavaScript og læse den første bit om tilføjelse af jQuery til dit tema. Den anden mulighed er, at dit tema gør noget specielt med kommentarformularen, og dets ID er ikke længere “commentform”. Kontroller kildekoden, og juster derefter var commentform = $ ('# commentform') linje i JavaScript for at være det korrekte ID - det kan muligvis fungere.

Som altid er jeg ude for at hjælpe videre så meget som jeg kan, men send venligst links til et eksempel på en URL, hvor jeg kan kaste et hurtigt kig.