Kako AJAX-a ako imate svoje WordPress komentare

Oglas

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. Možete prebaciti na sustav treće strane poput Livefyre [Prekinuti URL uklonjen] ili Disqus 3 načina za poticanje komentara na vašem Wordpress bloguDobivanje komentara na svom blogu izvrstan je motivator za nastavak dugog poteškoća koje bloganje vodi. Samo znajući da je netko vani, cijeniti vaš rad osjeća se sjajno, ali ne ... Čitaj više , ali ako biste radije držali sve kod kuće ili vršili neku drugu vrstu prilagodbe, najmanje je što biste trebali činiti postavljanje komentara od strane AJAX-a.

Primjer ovog rada možete vidjeti ovdje na Iskoristiti - kad objavite komentar, nećete napustiti stranicu - umjesto toga, poslat ćemo ga AJAX pozivom i poslati brzo „Hvala vam"Bilješka. Pročitajte cijeli tutorial.

Za korištenje funkcija koje nisu WordPress kao AJAX, pročitajte moju prethodni udžbenik Tutorial o korištenju AJAX-a u WordPress-u

AJAX je izvanredna internetska tehnologija koja nas je odmaknula od jednostavne veze "klik, idi na drugu stranicu" struktura Interneta 1.0. Omogućuje web lokacijama da dinamično dohvaćaju i prikazuju sadržaj bez korisnik... Čitaj više , i svakako provjerite sve članke koji se odnose na WordPress.

Uvod

Potrebna su dva odvojena dijela za rad na AJAX WordPress komentarima, pa vam prvo objasnimo one koji će vam dati pregled cijelog postupka.

• Neki Javascript na stranici koji presreće korisnike koji kliknu na Dodaj komentar gumb za prijavu, što ga čini i AJAX pozivom, a ujedno obrađuje odgovor.
• PHP rukovatelj koji se uključuje u komentar_post akcije

Javascript

Prvo, ovo će trebati jQuery, kao i sve što danas ima na daljinu uzbudljivo. Ako niste sigurni je 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"), false); wp_enqueue_script ( 'jquery'); }} dodavanje datoteke ('wp_print_scripts', 'google_jquery');

Imajte na umu da je to složeni način učitavanja jQuery-a, jer ćemo koristiti najnoviju verziju Googleovih CDN-ova, što je brže i veće datum od onog koji je podrazumijevano uključen u WordPress - pa bi bilo možda dobro dodati to svejedno čak i ako je jQuery već učitan 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 nemate omogućen komentar 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 želite 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 podrazumijeva naziv datoteke 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 možete pogledajte na pastebinu):

 // AJAXified sustav komentiranja. jQuery ('dokument'). spreman (funkcija ($) { var commentform = $ ('# komentar komentara'); // pronaći obrazac za komentar. commentform.prepend ('
 
'); // dodajte informacijsku ploču prije obrasca kako biste pružili povratne informacije ili pogreške. var statusdiv = $ ('# komentar-status'); // definirati infopanel commentform.submit (function () { // serializirati i pohraniti podatke oblika u varijablu. var formdata = commentform.serialize (); // Dodajte poruku o statusu. statusdiv.html ( '
 Obrada...  p>'); // Izdvoji URL radnje iz komentara. var formurl = commentform.attr ('akcija'); // Objava s podacima. $ .Ajax ({ vrsta: 'post', URL: formurl, podaci: formdata, error: function (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 Možda ste jedno od polja ostavili prazno ili prebrzo objavljujete 
'); }, uspjeh: funkcija (podaci, textStatus) { if (podaci == "uspjeh") statusdiv.html ('
 Hvala na komentaru. Cijenimo vaš odgovor. 
 '); drugo. statusdiv.html ('
 Pričekajte neko vrijeme prije nego što objavite svoj sljedeći komentar 
'); commentform.find ( 'podruÄŤje [name = comment]) val ( ''). } }); vratiti lažno; }); });

Da bismo razbili kôd, prvo stvaramo jQuery objekte u obrascu za komentar (što pretpostavlja da vaš obrazac za komentar sadrži zadani css ID od "commentform")i dodavanje prazne info ploče iznad njega 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"Korisniku na toj informacijskoj ploči i naprijed sa AJAX zahtjevom. AJAX zahtjev je a standardni format, ali danas ne spada u područje ovog udžbenika - dovoljno je reći da reagira ili na uspjeh ili greška i prazne obrazac ako su uspješni da spriječe slučajno objavljivanje istog komentara dvaput. Prilagodite poruke i pogreške po potrebi ili dodajte neki odgovarajući stil u tablicu stila svoje teme ako želite da se poruke pogreške nekako izdvajaju. Zadnji redak - vratiti lažno - sprječava da obrazac dovrši zadanu radnju.

PHP Handler

I na kraju, potrebno nam je nešto što će spriječiti da se stranica osvježi i korisniku poslati odgovarajući odgovor kao i obavijestiti administratora ako je komentar potrebno 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 na raspolaganju kod ovog pastebina)

dodavanje ('comment_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 onda. prekidač ($ comment_status) { slučaj '0': // obavijestiti moderatora o neodobrenom komentaru. wp_notify_moderator ($ comment_ID); slučaj '1': // Odobreni komentar. odjek "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 i dalje osvježava umjesto da objavljuje putem AJAX-a, vjerojatno će to biti jedan od dva problema. Prvo - možda nemate učitan jQuery. Instalirati Palikuća Kako instalirati Firebug na IE, Safari, Chrome i Opera Čitaj više ili omogućite alate za razvojne programere Chrome i provjerite ima li zapisa konzole za pogreške. Ako jQuery ne pronađete, vratite se natrag na JavaScript dio i pročitajte prvi dio o dodavanju jQuery svojoj temi. Druga je mogućnost da vaša tema čini nešto posebno u obrascu za komentar, a ID nije više "obrazac za komentar". Provjerite izvorni kôd, a zatim podesite var commentform = $ ('# komentar komentara') liniju u JavaScript-u da bude točan ID - to bi moglo uspjeti.

Kao i uvijek, nastojim vam pomoći što više, ali pošaljite linkove na primjer URL gdje mogu brzo pogledati.