Kuidas oma WordPressi kommentaare AJAX-i viia

Reklaam

Vaikimisi on WordPressi kommenteerimissüsteem hädasti puudulik - üks minu suurimaid vastuväiteid on see, et kommentaari postitamiseks tuleb lehte värskendada. Võite minna üle kolmanda osapoole süsteemile, näiteks Livefyre [Broken URL Removed] või Disqus 3 viisi oma Wordpressi ajaveebi kommentaaride soodustamiseksOma ajaveebi kommentaaride saamine on suurepärane motivaator, et jätkata blogimisega seotud pika teekonnaga. Lihtsalt teadmine, et keegi on seal väljas, tunneb teie töö hindamist, kuid pole ... Loe rohkem , kuid kui eelistate hoida kõike majas või teha mõnda muud tüüpi kohandamist, on AJAXi kommentaaride postitamine kõige vähem vajalik, mida peaksite tegema.

Selle töö näite leiate siit MakeUseOf - kommentaari postitades ei lahku te lehest - selle asemel saadame selle AJAX-kõne kaudu ja saadame seejärel kiire „aitäh”Märkus tagasi. Lugege täielikku õpetust.

Funktsioonide, mis pole WordPress, kasutamiseks AJAX-na, lugege palun minu eelmine õpetus Juhend AJAXi kasutamiseks WordPressis

AJAX on tähelepanuväärne veebitehnoloogia, mis viis meid kaugemale lihtsast „klõpsake lingist, minge teisele lehele“ Interneti 1.0 struktuur. See võimaldab veebisaitidel sisu dünaamiliselt tuua ja kuvada ilma kasutaja ... Loe rohkem ja vaadake kindlasti kõiki WordPressiga seotud artikleid.

Sissejuhatus

AJAX WordPressi kommentaaride töötamiseks on vaja kahte eraldi osa, nii et selgitame neid kõigepealt, et anda teile ülevaade kogu protsessist.

• Mõni Javascript sellel lehel, mis peatab kasutaja klõpsates Lisa kommentaar Saada nupp, mis teeb sellest ka AJAX-kõne ja tegeleb ka vastusega.
• PHP-töötleja, kes haarab kommentaari postituse toimingu

Javascript

Esiteks on seda vaja jQuery, nagu ka kõik tänapäeval veebiarenduses põnev. Kui te pole kindel, kas see on juba laaditud, minge edasi Javascripti koodi juurde ja proovige seda igal juhul - kui teil on Firebug ja konsoolilogi ütleb „jQuery on määratlemata”Kui värskendate lehte, lisage see rida oma failideph.php faili, et veenduda selle laadimises.

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

Pange tähele, et see on keeruline viis jQuery laadimiseks, kuna kasutame Google CDN-ide uusimat versiooni, mis on kiirem ja kuupäeva kui see, mis WordPressis vaikimisi sisaldas - nii et see võiks olla hea mõte lisada, isegi kui jQuery on juba laaditud mujal.

Nüüd on kommenteerimisvormi käsitleva tegeliku Javascripti jaoks mõned võimalused. Lihtsaim on kleepida kood lihtsalt oma kausta single.php mall - eeldusel, et teil pole ka lehtede kommenteerimine lubatud.

Teise võimalusena võite kleepida olemasolevasse .js faili, mida teie teema kasutab, või looge uus .js faili oma teemakataloogis. Kui otsustate selle omaette .js-faili paigutada ja mitte otse teemalli kleepida, lisage kindlasti järgmised read funktsioonid.phpja pange tähele, et eeldatakse, et failinimi on ajaxcomments.js teemakausta juur.

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

Siin on Javascript kommentaarivormi haldamiseks (või saate vaata seda saidil):

 // AJAXified kommenteerimissüsteem. jQuery ('dokument'). valmis (funktsioon ($) { var commentform = $ ('# kommentaarvorm'); // otsi kommentaari vorm. commentform.prepend ('
 
'); // tagasiside või vigade saamiseks lisage enne vormi teabepaneel. var statusdiv = $ ('# kommentaari olek'); // määratlege infopaneeli commentform.submit (function () { // järjestage ja salvestage vormi andmed muutujasse. var formdata = commentform.serialize (); // Lisage olekusõnum. statusdiv.html ('
 töötlemine... 
'); // Tegevuse URL-i ekstraktimine kommentaarivormist. var formurl = commentform.attr ('toiming'); // Postitage vorm koos andmetega. $ .ajax ({ tüüp: 'post', url: formurl, andmed: formdata, tõrge: funktsioon (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 võib-olla olete jätnud ühe väljadest tühjaks või postitate liiga kiiresti 
'); } edu: funktsioon (andmed, textStatus) { if (andmed == "edu") statusdiv.html ('
 Täname kommentaari eest. Hindame teie vastust. 
 '); muud. statusdiv.html ('
 Palun oodake veidi enne oma järgmise kommentaari postitamist 
'); commentform.find ('textarea [nimi = kommentaar]'). val (''); } }); tagastama vale; }); });

Koodi murdmiseks loome kõigepealt kommentaarivormi jQuery objektid (mis eeldab, et teie kommentaarivormil on vaikimisi css-ID “kommentaarivorm”)ja lisage selle kohale tühi infopaneel, mida kasutame hiljem kasutajale sõnumite kuvamiseks nende kommentaari postitamise käigu kohta.

commentform.submit kasutatakse esitamisnupu kaaperdamiseks. Seejärel seeriame vormi andmed järjestikku (muudame need üheks pikaks andmereaks), anname “Töötlemine”Teade kasutajale sellel infopaneelil ja jätkake AJAX-i päringuga. AJAX-i taotlus on a standardvorming, kuid tegelikult ei kuulu see täna selle õppematerjali ulatusse - piisab, kui öelda, et see reageerib kas edule või viga ja tühjendab vormi, kui see õnnestub, et sama kommentaar ei oleks tahtmatult postitatud kaks korda. Reguleerige sõnumeid ja vigu vastavalt vajadusele või lisage teema stiililehele sobiv stiil, kui soovite, et veateated mingil moel silma paistaksid. Viimane rida - tagasi vale - takistab vormi vaiketoimingu täitmist.

PHP-käitleja

Lõpuks vajame midagi lehe värskendamise takistamiseks ja kasutajale asjakohase vastuse saatmiseks samuti administraatori teavitamine, kui kommentaar vajab modereerimist, või uue kommentaari autori teavitamine. Selle jaoks me konksu kommentaarpostitus toiming, mis toimub vahetult pärast selle lisamist andmebaasi, ja tuvastage, kas see oli AJAX-i päring. Lisage see oma funktsioonid.php fail:

(Saadaval ka sellel pastebin)

add_action ('comment_post', 'ajaxify_comments', 20, 2); funktsioon ajaxify_comments ($ comment_ID, $ comment_status) { if (! tühi ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Kui AJAX taotleb siis. lüliti ($ comment_status) { juhtum '0': // teata moderaatorile kinnitamata kommentaarist. wp_notify_moderator ($ comment_ID); juhtum '1': // Heakskiidetud kommentaar. kaja "edu"; $ commentdata = & saada_kommentaar ($ comment_ID, ARRAY_A); $ post = & get_post ($ commentdata ['comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); vaheaeg; vaikimisi: kaja "viga"; } väljumine; } }

Kohaprobleemid

Kui leht AJAX-i kaudu postitamise asemel ikka värskendab, on see tõenäoliselt üks kahest probleemist. Üks - teil ei pruugi olla jQuery laaditud. Installi Firebug Kuidas installida Firebug rakendustele IE, Safari, Chrome ja Opera Loe rohkem või lubage Chrome'i arendaja tööriistad ja kontrollige konsoolilogis vigu. Kui jQuery ei leitud, minge tagasi JavaScripti jaotisesse ja lugege esimest osa jQuery lisamisest oma teemale. Teine võimalus on see, et teie teema teeb kommentaarivormi jaoks midagi erilist ja selle ID pole enam „kommentaarivorm”. Kontrollige lähtekoodi ja reguleerige seejärel var commentform = $ ('# kommentaarvorm') rida JavaScriptis, et olla õige ID - see võib toimida.

Nagu alati, olen ma abiks nii palju kui võimalik, kuid palun postitage lingid näite URL-ile, kust saaksin kiire pilgu heita.