Sådan AJAX-ify dine WordPress-kommentarer

Reklame

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 [Broken URL Removed] eller Disqus 3 måder at tilskynde til kommentarer til din Wordpress-blogAt få kommentarer til din blog er en stor motivator til at holde dig i gang med det lange træk, der blogger. Bare det at vide, at der er nogen derude, at værdsætte dit arbejde føles godt, men ikke ... Læs mere , men hvis du foretrækker at holde alt i huset eller foretage en anden form for tilpasning, er det at indsende kommentarer fra 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”Noter tilbage. Læs videre for en fuld tutorial.

For at bruge ikke-WordPress-funktioner som AJAX, skal du læse mine

forrige tutorial En tutorial til brug af AJAX i WordPressAJAX er en bemærkelsesværdig webteknologi, der flyttede os ud over det enkle "kliklink, gå til en anden side" strukturen af ​​Internettet 1.0. Det giver websteder mulighed for dynamisk at hente og vise indhold uden bruger... Læs mere , 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ægshandlingen

Javascript

Først og fremmest vil dette have brug for jQuery, ligesom noget, der er fjernt spændende inden for webudvikling i dag. Hvis du ikke er sikker på, om den allerede er indlæst, skal du gå videre til Javascript-koden og prøve den 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 op til dato 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 andre steder.

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 kommentarsystem. jQuery ('dokument'). klar (funktion ($) { var commentform = $ ('# commentform'); // find kommentarformularen. commentform.prepend ('
 
'); // Tilføj infopanel inden formularen for at give feedback eller fejl. var statusdiv = $ ('# kommentar-status'); // definere infopanel commentform.submit (funktion () { // serialisere og gemme formulardata i en variabel. var formdata = commentform.serialize (); // Tilføj en statusmeddelelse. statusdiv.html ( '
 Behandler...  p>'); // Uddrag handlingswebadresse fra kommentarform. var formurl = commentform.attr ('handling'); // Send formular med data. $ .Ajax ({ type: 'post', url: formurl, data: formdata, error: function (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. 
 '); andet. statusdiv.html ('
 Vent et stykke tid, inden du sætter din næste kommentar 
'); commentform.find ( 'textarea [name = kommentar]') val ( '').; } }); vende tilbage falsk; }); });

For at nedbryde koden opretter vi først jQuery-objekter i kommentarformularen (som antager, at din kommentarformular har standard-css-id'et for “kommentarformular”), og tilføje et tomt infopanel over det, 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' afsendelsesknappen. Derefter serialiserer vi formulardataene (gør det til en lang række data), giver en "Forarbejdning”-Meddelelse til brugeren i det infopanel, og gå videre med en AJAX-anmodning. AJAX-anmodningen er en standardformat, men ikke rigtig inden for rammerne af denne tutorial i dag - nok til at sige, at det reagerer på enten en succes eller fejl, og udfyld formularen, hvis det lykkes for at forhindre, at den samme kommentar ved et uheld blev sendt to gange. Juster meddelelserne og fejlene efter behov, eller tilføj en 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 dets standardhandling.

PHP Handler

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

(Også tilgængelig ved denne pastin)

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 anmoder derefter. kontakt ($ 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; } }

Spotproblemer

Hvis siden stadig er forfriskende i stedet for at sende via AJAX, er det sandsynligvis et af to problemer. Én - du har måske ikke indlæst jQuery. Installere Firebug Sådan installeres Firebug på IE, Safari, Chrome & Opera Læs mere , eller aktiver 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 kommentarformen, og dets ID er ikke længere "kommentarform". Kontroller kildekoden, og juster derefter var commentform = $ (‘# commentform’) linje i JavaScript for at være det rigtige ID - det kan muligvis fungere.

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