Kako AJAX, če vaše WordPress komentarje

Oglas

Sistem pripomb WordPress je privzeto neustrezen - eden mojih največjih ugovorov je, da je treba objaviti komentar, da se stran mora osvežiti. Lahko preklopite na sistem tretjih oseb, kot je Livefyre [Odstranjen URL odstranjen] ali Disqus 3 načine za spodbujanje komentarjev na vašem spletnem dnevniku WordpressPridobivanje komentarjev na vašem spletnem dnevniku je odličen motivator za nadaljevanje dolge razdalje, ki jo vodijo blogi. Samo vedeti, da je nekdo zunaj, ceniti tvoje delo se počuti odlično, vendar ne ... Preberi več , če pa bi radi raje ohranili vse pri sebi ali naredili kakšno drugo prilagoditev, je objavljanje komentarjev AJAX najmanj, kar bi morali storiti.

Primer tega dela si lahko ogledate tukaj Izkoristijo - ko objavite komentar, te strani ne boste zapustili - namesto tega jo bomo poslali prek AJAX klica in nato hitro poslali »Hvala vam"Opomba nazaj. Preberite si za celotno vadnico.

Za uporabo funkcij, ki niso WordPress kot AJAX, prosim preberite mojo prejšnja vadnica Vadnica o uporabi AJAX v WordPressu

AJAX je izjemna spletna tehnologija, ki nas je preselila mimo preproste povezave "klik, pojdi na drugo stran" struktura interneta 1.0. Spletnim mestom omogoča, da dinamično pridobivajo in prikazujejo vsebino brez uporabnik ... Preberi več , in preverite vse članke, povezane z WordPressom.

Uvod

Za delovanje komentarjev AJAX WordPress sta potrebna dva ločena dela, zato najprej pojasnimo tiste, ki vam bodo omogočili pregled nad celotnim postopkom.

• Nekateri Javascript na strani, ki prestreže uporabnika, ki klikne Dodaj komentar gumb za oddajo, ki omogoča tudi AJAX klic in obravnava odziv.
• PHP obdelovalec, ki se priklopi na dejanje komentarjev

Javascript

Najprej bo to treba jQuery, kot tudi danes karkoli na daljavo navdušuje pri spletnem razvoju. Če niste prepričani, ali je že naložena, pojdite naprej in preskočite navzdol do kode Javascript ter jo vseeno preizkusite - če imate Firebug in dnevnik konzole piše “jQuery ni določena"Ko osvežite stran, dodajte to vrstico v datoteko function.php in tako zagotovite, da se naloži.

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"), napačno); wp_enqueue_script ('jquery'); }} dodajanje ('wp_print_scripts', 'google_jquery');

Upoštevajte, da je to izpopolnjen način nalaganja jQueryja, ker bomo uporabljali najnovejšo različico iz Googlovih CDN-jev, ki je hitrejša in večja datum od tistega, ki je privzeto vključen v WordPress - zato bi bilo dobro, da to vseeno dodate, tudi če je jQuery že naložen drugje.

Zdaj za dejanski Javascript, ki bo obravnaval obrazec za komentar, imamo nekaj možnosti. Najlažje je, da kodo preprosto prilepite v svojo single.php predloga - ob predpostavki, da pri straneh nimate omogočenih niti komentarjev.

Lahko pa tudi prilepite v obstoječo .js datoteko, ki jo uporablja vaša tema, ali ustvarite nov .js datoteko v vašem tematskem imeniku. Če ga želite namestiti v svojo ločeno datoteko .js in je ne prilepite neposredno v predlogo teme, ne pozabite dodati naslednjih vrstic v svoj function.php, in upoštevajte, da se domneva ime datoteke ajaxcomments.js v korenu mape teme.

dodajanje ('init', 'ajaxcomments_load_js', 10); funkcija ajaxcomments_load_js () {wp_enqueue_script ('ajaxcomments', get_stylesheet_directory_uri (). '/ ajaxcomments.js'); }

Tukaj je Javascript za obdelavo obrazca za komentar (ali lahko si oglejte na pastebinu):

 // AJAXified sistem za komentarje. jQuery ("dokument"). pripravljen (funkcija ($) { var commentform = $ ('# oblika komentarja'); // poiščite obrazec za komentar. commentform.prepend ('
 
'); // dodajte informacijsko ploščo pred obrazec za povratne informacije ali napake. var statusdiv = $ ('# komentar-status'); // določite infopanel commentform.submit (function () { // serializirati in shraniti podatke obrazca v spremenljivko. var formdata = commentform.serialize (); // Dodaj sporočilo o stanju. statusdiv.html ('
 Obdelava... 
'); // Izvleči delovni URL iz komentarja. var formurl = commentform.attr ('akcija'); // Obrazec objave s podatki. $ .ajax ({ vrsta: 'objava', url: formurl, podatki: formdata, napaka: funkcija (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 Morda ste eno od polj pustili prazno ali pa prehitro objavljate 
'); }, uspeh: funkcija (podatki, textStatus) { if (podatki == "uspeh") statusdiv.html ('
 Hvala za komentar. Cenimo vaš odgovor. 
 '); drugače. statusdiv.html ('
 Počakajte nekaj časa, preden objavite svoj naslednji komentar 
'); commentform.find ('textarea [ime = komentar]'). val (''); } }); vrniti napačno; }); });

Za razčlenitev kode najprej ustvarimo predmete jQuery v obrazcu za komentar (ki predpostavlja, da ima vaš obrazec za komentar privzeti ID css za „komentar“)in nad njim dodajte prazno ploščo z informacijami, ki jo bomo pozneje uporabili za prikazovanje sporočil uporabniku o napredku objave komentarja.

komentar foruma, oddaj se uporablja za "ugrabitev" gumba za oddajo. Nato podatke obrazca zaporedimo (pretvorimo jih v eno dolgo vrstico podatkov) in dodamo "Obravnavati"Uporabniku na tej informacijski plošči in nadaljujte z zahtevo AJAX. Zahteva AJAX je a standardni format, vendar danes res ne spada v obseg te vadnice - dovolj je, če rečemo, da reagira bodisi na uspeh bodisi napaka in, če uspe, prepreči obrazec, da prepreči, da bi bil isti komentar nenamerno objavljen dvakrat. Prilagodite sporočila in napake, če želite, da se sporočila o napaki nekako izstopajo v tabelo slogi teme, če želite, da se sporočila o napaki nekako izstopajo. Zadnja vrstica - vrniti napačno - preprečuje, da bi obrazec izvedel privzeto dejanje.

PHP Handler

Nazadnje potrebujemo nekaj, da preprečimo osvežitev strani in uporabnik pošlje ustrezen odziv nazaj kot tudi obvestiti skrbnika, če bo komentar treba moderirati, ali obvestiti avtorja novega komentarja. Za to se priklopimo na komentar_post dejanje, ki se zgodi takoj po dodajanju v bazo, in zaznajte, ali je šlo za zahtevo AJAX. Dodaj to svojemu function.php mapa:

(Na voljo tudi pri tej pastebin)

dodajanje ('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') { // Če zahteva AJAX, potem. stikalo ($ comment_status) { primer '0': // obvestite moderatorja o neodobrenem komentarju. wp_notify_moderator ($ comment_ID); primer '1': // Odobreni komentar. odmev "uspeh"; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ post = & get_post ($ commentdata ['comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); odmor; privzeto: odmev "napaka"; } izhod; } }

Težave s piki

Če se stran še vedno osvežuje, namesto da objavljate prek AJAX, bo verjetno ena od dveh težav. Eno - morda ne boste naložili jQuery. Namestite Firebug Kako namestiti Firebug v IE, Safari, Chrome in Opera Preberi več ali omogočite Chromova orodja za razvijalce in preverite, ali je v dnevniku ukazne mize napak. Če jQuery ne najdete, se vrnite nazaj na razdelek JavaScript in preberite prvi košček o dodajanju jQuery v svojo temo. Druga možnost je, da vaša tema na obrazcu za komentar doda nekaj posebnega, njen ID pa ni več "obrazec za komentar". Preverite izvorno kodo in nato prilagodite var commentform = $ ('# oblika komentarja') vrstica v JavaScript, da je pravi ID - to lahko deluje.

Kot kdajkoli prej bom pomagal, kolikor bom lahko, vendar objavite povezave do primernega URL-ja, kjer lahko hitro pogledam.