Kako AJAX-a ako imate svoje WordPress komentare

Prema zadanim postavkama, sustav komentiranja WordPressa strašno je neprimjeren - jedna od mojih najvećih zamjerki je da je za objavljivanje komentara stranicu potrebno osvježiti. Mogli biste se prebaciti na sustav treće strane poput Livefyre ili Disqus 3 načina za poticanje komentara na svom Wordpress blogu 3 načina za poticanje komentara na svom Wordpress blogu Dobivanje komentara na svom blogu odličan je motivator da nastavite dalje s dugim potezom koji je blogging. Znajući da je netko vani, cijeniti vaš rad osjeća se sjajno, ali ne ... ali ako biste radije držali sve u kući ili radili neku drugu prilagodbu, najmanje je što biste trebali činiti postavljati komentare AJAX-a.

Primjer ovog rada možete vidjeti ovdje na Iskoristiti - kad objavite komentar, nećete napustiti stranicu - umjesto toga, poslat ćemo ga putem AJAX poziva, a zatim ćemo brzo poslati “Hvala vam” napomena natrag. Pročitajte cijeli tutorial.

Za korištenje funkcija koje nisu WordPress kao AJAX, pročitajte moj prethodni tutorial Tutorial o korištenju AJAX-a u WordPress-u Tutorial o korištenju AJAX-a u WordPress-u AJAX je izvanredna web tehnologija koja nas je odmaknula od jednostavnog “kliknite vezu, idite na drugu stranicu” struktura Interneta 1.0. Omogućuje web lokacijama da dinamično dohvaćaju i prikazuju sadržaj bez korisnika ..., i provjerite sve članke koji se odnose na WordPress.

Uvod

Potrebna su dva odvojena dijela za rad AJAX WordPress komentara, pa ćemo vam prvo objasniti kako biste dobili pregled cijelog postupka.

• Neki Javascript na stranici koji presijeca korisnika koji klikne na Dodaj komentar gumb za prijavu, što ga čini i AJAX pozivom, a također rukuje odgovor.
• PHP rukovatelj koji se uključuje u komentar_post akcije

Javascript

Prvo, ovo će trebati jQuery, kao i sve što danas djeluje uzbudljivo u webu. Ako niste sigurni da li se već učitava, idite naprijed i preskočite do Javascript koda i svejedno ga isprobajte - ako imate Firebug i zapisnik konzole kaže “jQuery nije definiran” kada osvježite stranicu, dodajte ovaj redak u datoteku function.php da biste osigurali da se učitava.

funkcija 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"), netočno); wp_enqueue_script ( 'jquery');  dodavanje datoteke ('wp_print_scripts', 'google_jquery');

Napominjemo, to je složen način učitavanja jQuery-a jer ćemo koristiti najnoviju verziju Googleovih CDN-ova, koja je brža i ažuriranija od one koja je podrazumijevano uključena u WordPress - tako da bi bilo dobro da to dodamo čak i ako je jQuery već učitan negdje drugdje.

Sada, za stvarni Javascript koji će obraditi obrazac za komentare, imamo nekoliko opcija. Najlakše je jednostavno zalijepiti kod u svoj single.php predložak - pod pretpostavkom da vam nisu omogućene komentare ni za stranice.

Možete i zalijepiti u postojeći .js datoteku koju koristi vaša tema ili izradite novi .js datoteku u direktoriju tema. Ako ga odlučite staviti u svoju zasebnu .js datoteku, a ne zalijepiti je izravno u predložak teme, obavezno dodajte sljedeće retke u svoj functions.php, i imajte na umu da se naziv datoteke podrazumijeva ajaxcomments.js u korijenu mape teme.

dodavanje ('init', 'ajaxcomments_load_js', 10); funkcija ajaxcomments_load_js () wp_enqueue_script ('ajaxcomments', get_stylesheet_directory_uri (). '/ ajaxcomments.js'); 

Ovdje je Javascript za obradu obrasca za komentar (ili ga možete pogledati na pastebinu):

// AJAXified sustav za komentiranje jQuery ('dokument'). Spreman (funkcija ($) var commentform = $ ('#formformform'); // pronađite obrazac za komentar commentform.prepend (''); // dodajte informacijsku ploču prije obrazac za pružanje povratnih informacija ili pogrešaka. var statusdiv = $ ('# comment-status'); // definira infopanel commentform.submit (function () // serializira i sprema podatke obrasca u varijablu var formdata = commentform.serialize ( ); // Dodaj poruku o statusu statusdiv.html ('
Obrada… 
); // Izdvojite URL radnje iz komentara var formurl = commentform.attr ('akcija'); // Objava s podacima $ .ajax (vrsta: 'pošta', url: formurl, podaci: formdata, pogreška: funkcija (XMLHttpRequest, textStatus, errorThrown) statusdiv.html ('
Jedno ste polje možda ostavili prazno ili prebrzo objavljujete
); , uspjeh: funkcija (podaci, textStatus) if (data == "uspjeh") statusdiv.html ('
Hvala na komentaru. Cijenimo vaš odgovor.
); else statusdiv.html ('
Pričekajte neko vrijeme prije nego što objavite svoj sljedeći komentar
); commentform.find ('textarea [ime = komentar]'). val (");); return false;););

Da bismo razbili kôd, prvo stvaramo jQuery objekte u obrascu za komentar (što pretpostavlja da vaš obrazac za komentar sadrži zadani ID css od “commentform”), i iznad njega se doda prazna info ploča koju ćemo kasnije koristiti za prikazivanje poruka korisniku o napretku u objavljivanju komentara.

commentform.submit koristi se za "otmicu" gumba za slanje. Zatim serializiramo podatke obrasca (pretvorimo ih u jedan dugi niz podataka), dajemo “Obrada” poruku korisniku na toj informacijskoj ploči i nastavite s AJAX zahtjevom. Zahtjev AJAX je standardni format, ali danas nije baš u dosegu ovog vodiča - dovoljno je reći da reagira ili na uspjeh ili na grešku i ispunjava obrazac ako bude uspješan da spriječi da se isti komentar dvaput slučajno objavi. Prilagodite poruke i pogreške po potrebi ili dodajte odgovarajući stil u listu stila svoje teme ako želite da se poruke pogreške nekako izdvajaju. Posljednji redak - vratiti lažno - sprječava da obrazac dovrši zadanu radnju.

PHP Handler

I na kraju, potrebno je nešto što će spriječiti da se stranica osvježi i korisniku poslati odgovarajući odgovor, kao i obavijestiti administratora ako komentar treba moderirati ili obavijestiti autora novog komentara. Za to smo uključeni u comment_post radnju koja se događa neposredno nakon dodavanja u bazu podataka i otkrivanje je li to bio AJAX zahtjev. Dodajte to svom functions.php datoteka:

(Također dostupno na ovoj pastebin)

dodavanje ('komentar_post', 'ajaxify_comments', 20, 2); funkcija ajaxify_comments ($ comment_ID, $ comment_status) if (! prazno ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') // Ako AJAX Zahtjev za prebacivanje onda (prekidač comment_status) case '0': // obavijestiti moderatora o neodobrenom komentaru wp_notify_moderator ($ comment_ID); slučaj '1': // Odobreni komentar odjekuje "uspjeh"; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ Nakon = get_post ($ commentdata [ 'comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); pauza; zadano: odjek "greška";  Izlaz; 

Problemi s mjestima

Ako se stranica još uvijek osvježava, umjesto da objavljuje putem AJAX-a, vjerojatno će to biti jedan od dva problema. Prvo - možda nemate učitan jQuery. Instaliranje Firebuga Kako instalirati Firebug na IE, Safari, Chrome i Opera Kako instalirati Firebug na IE, Safari, Chrome i Opera ili omogućiti alate za razvojne programere Chromea i provjerite ima li zapisa u konzoli pogreške. Ako jQuery nije pronađen, vratite se natrag na JavaScript dio i pročitajte prvi dio o dodavanju jQuery svojoj temi. Druga je mogućnost da vaša tema napravi nešto posebno u obrascu za komentar, a ID više nije “commentform”. Provjerite izvorni kôd, a zatim podesite var commentform = $ ('# komentar komentara') linija u JavaScript-u da bude točan ID - što bi moglo funkcionirati.

Kao i uvijek, spreman sam da pomognem što više, ali pošaljite linkove na primjer URL gdje mogu brzo pogledati.