Hvordan AJAX-ify dine WordPress-kommentarer

Annonse

Som standard er WordPress-kommenteringssystemet ulykkelig utilstrekkelig - en av de største innvendingene mine er at siden for å legge ut en kommentar, må siden oppdateres. Du kan bytte til et tredjepartssystem som Livefyre [Broken URL Removed] eller Disqus 3 måter å oppmuntre til kommentarer på din Wordpress-bloggÅ få kommentarer på bloggen din er en stor motivator for å fortsette med den lange tiden som blogger. Bare det å vite at noen er der ute, å sette pris på arbeidet ditt føles bra, men ikke ... Les mer , men hvis du foretrekker å holde alt i hus eller gjøre en annen form for tilpasning, er det å legge inn kommentarer fra AJAX det minste du bør gjøre.

Du kan se et eksempel på at dette fungerer her Benytte seg av - når du legger ut en kommentar, vil du ikke forlate siden. I stedet sender vi den gjennom et AJAX-anrop, og deretter sender du en rask "Takk skal du haMerk deg tilbake. Les videre for en full tutorial.

Hvis du bruker ikke-WordPress-funksjoner som AJAX, kan du lese mine

forrige opplæring En veiledning om bruk av AJAX i WordPressAJAX er en bemerkelsesverdig webteknologi som beveget oss utover den enkle "klikklenken, gå til en annen side" strukturen til Internett 1.0. Det gjør det mulig for nettsteder å hente og vise innhold dynamisk uten bruker... Les mer , og husk å sjekke ut alle WordPress-relaterte artikler.

Introduksjon

Det er to separate deler for å få AJAX WordPress-kommentarer til å fungere, så la oss forklare dem først for å gi deg en oversikt over hele prosessen.

• Noen Javascript på siden som avskjærer brukeren ved å klikke på Legg til en kommentar sende-knappen, som også gjør det til et AJAX-anrop og også håndterer svaret.
• En PHP-behandler som kobles til kommentaren / innlegget

Javascript

For det første vil dette trenge jQuery, og det gjør noe eksternt spennende innen nettutvikling i dag. Hvis du ikke er sikker på om den allerede er lastet inn, fortsett og hopp ned til Javascript-koden og prøv den uansett - hvis du har Firebug og konsollloggen sier "jQuery er ubegrensetNår du oppdaterer siden, legger du til denne linjen i funksjonsfilen-filen for å sikre at den lastes inn.

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

Merk at det er en utførlig måte å laste inn jQuery fordi vi bruker den nyeste versjonen fra Google CDN-er, som er raskere og mer opp til dato enn den som er inkludert som standard med WordPress - så det kan være en god idé å legge til det uansett, selv om jQuery allerede er lastet andre steder.

Nå, for det faktiske Javascript som vil håndtere kommentarskjemaet, har vi noen få alternativer. Det enkleste er å bare lime inn koden i din single.php mal - forutsatt at du ikke har kommentert aktivert også for sider.

Alternativt kan du lime inn i en eksisterende JS fil brukt av temaet ditt, eller lag en ny .js fil i temakatalogen. Hvis du velger å legge den i din egen separate .js-fil og ikke lime den direkte inn i temamalen, må du legge til følgende linjer i functions.php, og legg merke til at filnavnet antas å være ajaxcomments.js i roten til temamappen.

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

Her er Javascript for å håndtere kommentarskjemaet (eller det kan du se den på pastebin):

 // AJAXified commenting system. jQuery ('dokument'). klar (funksjon ($) { var commentform = $ ('# commentform'); // finn kommentarskjemaet. commentform.prepend ('
 
'); // legg til infopanel før skjemaet for å gi tilbakemelding eller feil. var statusdiv = $ ('# comment-status'); // definere infopanel commentform.submit (funksjon () { // serialisere og lagre skjemadata i en variabel. var formdata = commentform.serialize (); // Legg til en statusmelding. statusdiv.html ( '
 Processing...  p>'); // Trekk ut URL fra kommentarform. var formurl = commentform.attr ('handling'); // Innleggsskjema med data. $ .Ajax ({ type: 'post', url: formurl, data: formdata, error: function (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 Du har kanskje forlatt et av feltene blanke, eller lagt ut for raskt 
'); }, suksess: funksjon (data, textStatus) { if (data == "suksess") statusdiv.html ('
 Takk for kommentaren din. Vi setter pris på svaret ditt. 
 '); ellers. statusdiv.html ('
 Vent litt før du legger ut neste kommentar 
'); commentform.find ( 'tekstfelt [name = comment]') val ( ''); } }); return falsk; }); });

For å bryte koden oppretter vi først jQuery-objekter i kommentarskjemaet (som forutsetter at kommentarskjemaet ditt har standard css-ID for “kommentarskjema”), og legge til et tomt infopanel over det som vi senere vil bruke til å vise meldinger til brukeren om fremdriften med å legge inn kommentaren.

commentform.submit brukes til å "kapre" sendeknappen. Deretter serialiserer vi skjemadataene (gjør det om til en lang datalinje), gir en "Behandling”-Melding til brukeren i det infopanelet, og fortsett med en AJAX-forespørsel. AJAX-forespørselen er en standardformat, men egentlig ikke i omfanget av denne opplæringen i dag - nok til å si at det reagerer på enten en suksess eller feil, og blankt ut skjemaet hvis det lykkes for å forhindre at den samme kommentaren legges ut ved et uhell to ganger. Juster meldingene og feilene etter behov, eller legg til noen passende styling i temas stilark hvis du vil at feilmeldingene skal skille seg ut på en eller annen måte. Den siste linjen - returner falsk - forhindrer at skjemaet fullfører standardhandlingen.

PHP Handler

Til slutt trenger vi noe for å forhindre at siden oppdateres og sender riktig svar tilbake til brukeren samt varsle administratoren hvis kommentaren må modereres, eller varsle forfatteren om en ny kommentar. For dette hekter vi oss inn i comment_post handling som skjer rett etter at den er lagt til databasen, og oppdage om det var en AJAX-forespørsel. Legg dette til din functions.php fil:

(Også tilgjengelig på denne pastinbiten)

add_action ('comment_post', 'ajaxify_comments', 20, 2); funksjon ajaxify_comments ($ comment_ID, $ comment_status) { if (! tom ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Hvis AJAX ber om det. bryter ($ comment_status) { sak '0': // varsle moderator om ikke godkjent kommentar. wp_notify_moderator ($ comment_ID); sak '1': // Godkjent kommentar. ekko "suksess"; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ Post = & get_post ($ commentdata [ 'comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); gå i stykker; standard: ekko "feil"; } exit; } }

Spotproblemer

Hvis siden fortsatt er forfriskende i stedet for å legge ut via AJAX, vil det sannsynligvis være ett av to problemer. Én - det er ikke sikkert at du har lastet jQuery. Installere Firebug Slik installerer du Firebug på IE, Safari, Chrome & Opera Les mer , eller aktiver Chrome-utviklerverktøyene, og sjekk konsollloggen for feil. Hvis jQuery ikke blir funnet, kan du gå tilbake til JavaScript-delen og lese den første biten når du legger til jQuery til temaet ditt. Den andre muligheten er at temaet ditt gjør noe spesielt med kommentarskjemaet, og at ID-en ikke lenger er "kommentarform". Kontroller kildekoden, og juster deretter var commentform = $ (‘# commentform’) linje i JavaScript for å være riktig ID - som kan fungere.

Som alltid er jeg rundt for å hjelpe videre så mye jeg kan, men legg ut lenker til en eksempel-URL der jeg kan se raskt.