Wordpress og webutvikling

Slik AJAX-ify dine WordPress-kommentarer

Slik AJAX-ify dine WordPress-kommentarer / Wordpress og webutvikling

Som standard er WordPress-kommentarsystemet utilfredsstillende. En av mine største innvendinger er at du må legge inn en kommentar, siden må oppdateres. Du kan bytte til et tredjepartssystem som Livefyre eller Disqus 3 måter å oppmuntre kommentarer til Wordpress Blog 3 måter å oppmuntre kommentarer til Wordpress Blog Få kommentarer til bloggen din er en god motivator for å holde deg på med det lange tråkket som er blogging. Bare å vite at noen er der ute, setter pris på at arbeidet ditt føles bra, men ikke ... Les mer, men hvis du foretrekker å holde alt hjemme eller gjøre noe annet, er det minst du bør gjøre å legge inn kommentarer fra AJAX..

Du kan se et eksempel på dette arbeidet her på Benytte seg av - når du legger inn en kommentar, vil du ikke forlate siden - i stedet sender vi den gjennom et AJAX-anrop, og send deretter en rask “Takk skal du ha” notat tilbake. Les videre for en full opplæring.

For å bruke ikke-WordPress-funksjoner som AJAX, vennligst les min forrige veiledning. En veiledning om bruk av AJAX i WordPress. En veiledning om bruk av AJAX. I WordPress AJAX er en bemerkelsesverdig webteknologi som flyttet oss utover det enkle “klikk lenke, gå til en annen side” struktur av Internett 1.0. Det gjør det mulig for nettsteder å dynamisk hente og vise innhold uten brukeren ... Les mer, og sørg for å sjekke ut alle WordPress-relaterte artiklene.

Introduksjon

Det er to separate deler som trengs for å få AJAX WordPress-kommentarer til å virke, så vi kan forklare de første for å gi deg en oversikt over hele prosessen.

  • Noen JavaScript på siden som avbryter brukeren å klikke på Legg til en kommentar Send-knappen, som også gjør det til et AJAX-anrop, og håndterer svaret.
  • En PHP-håndterer som knytter seg til kommentaren comment_post

Javascript script~~POS=HEADCOMP

For det første, dette kommer til å trenge jQuery, som gjør noe eksternt spennende i webutvikling i dag. Hvis du ikke er sikker på om den allerede er lastet, gå videre og hopp ned til Javascript-koden og prøv det uansett - hvis du har Firebug og konsollloggen forteller “jQuery er udefinert” Når du oppdaterer siden, legger du til denne linjen i din functions.php-fil for å sikre at den lastes.

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

Merk, det er en grundig måte å laste på jQuery fordi vi bruker den nyeste versjonen fra Google CDN-er, som er raskere og mer oppdatert enn den som er inkludert som standard med WordPress - så det kan være lurt å legge til det uansett selv om jQuery allerede er lastet andre steder.

Nå, for det aktuelle Javascript som skal håndtere kommentarformularen, har vi noen alternativer. Det enkleste er å bare legge inn koden i din single.php mal - forutsatt at du ikke har kommentarer aktivert for sider også.

Alternativt kan du lime inn i en eksisterende .js fil som brukes av temaet ditt, eller opprett en nye .js filen i temakatalogen din. Hvis du velger å sette den inn i din egen separate .js-fil og ikke lim den direkte inn i temalmalen, må du legge til følgende linjer i din functions.php, og merk at filnavnet antas å være ajaxcomments.js i roten til temamappen din.

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

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

For å bryte koden ned, oppretter vi først jQuery-objekter av kommentarformularen (som antar at ditt kommentarskjema har standard css ID for “commentform”), og legger til et tomt infopanel over det som vi senere bruker til å vise meldinger til brukeren om fremdriften med å legge inn sin kommentar.

commentform.submit er vant til å "kapre" innleveringsknappen. Vi serialiserer deretter skjemadataene (slå den inn i en lang linje med data), gi en “Behandling” melding til brukeren i det infopanelet, og fortsett med en AJAX-forespørsel. AJAX-forespørselen er et standardformat, men egentlig ikke i omfanget av denne opplæringen i dag. Det er nok å si at det reagerer på enten en suksess eller en feil, og blanks ut skjemaet hvis det lykkes å hindre at den samme kommentaren tilfeldigvis blir lagt opp to ganger. Juster meldingene og feilene som passer, eller legg til noen passende styling i temaets stilark hvis du vil at feilmeldingene skal skje på en eller annen måte. Den siste linjen - returner falsk - hindrer skjemaet fra å fullføre standardinnstillingen.

PHP Handler

Til slutt trenger vi noe for å forhindre at siden oppdateres og sende den riktige responsen tilbake til brukeren, samt å varsle administrasjonen hvis kommentaren trenger å moderere eller varsle forfatteren av en ny kommentar. For dette henger vi inn i comment_post handling som oppstår like etter at den er lagt til i databasen, og oppdager om det var en AJAX-forespørsel. Legg dette til din functions.php fil:

(Også tilgjengelig på denne pastebin)

add_action ('comment_post', 'ajaxify_comments', 20, 2); funksjonen ajaxify_comments ($ comment_ID, $ comment_status) if (! tom ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') // Hvis AJAX-forespørsel deretter bytt comment_status) case '0': // varsle moderator av uautorisert 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 å sende gjennom AJAX, er det sannsynligvis et av to problemer. En - du har kanskje ikke jQuery lastet. Installer Firebug Slik installerer du Firebug på IE, Safari, Chrome og Opera Slik installerer du Firebug på IE, Safari, Chrome og Opera Les mer, eller aktiver Chrome utviklerverktøy, og kontroller konsollloggen for feil. Hvis jQuery ikke er funnet, gå tilbake til JavaScript-delen og les den første biten når du legger til jQuery i temaet ditt. Den andre muligheten er at temaet ditt gjør noe spesielt for kommentarskjemaet, og det er ikke lenger ID “commentform”. Kontroller kildekoden, og juster deretter var commentform = $ ('# commentform') linje i JavaScript for å være riktig ID - det kan fungere.

Som noen gang er jeg rundt for å hjelpe meg så mye som mulig, men vennligst legg inn linker til et eksempel-nettadresse der jeg kan se et raskt blikk, eller poste på forumet MakeUseOf Svar hvis dette innleggets kommentarer er stengt. Nyt AJAXified kommentarene!

Utforsk mer om: Online Kommentar, Programmering, Webutvikling.