Cum să AJAX-ify Comentariile dvs. WordPress

Publicitate

În mod implicit, sistemul de comentarii WordPress este extrem de inadecvat - una dintre cele mai mari obiecții ale mele fiind aceea de a posta un comentariu, pagina trebuie să reîmprospăteze. Puteți trece la un sistem terț precum Livefyre [URL ruptă eliminat] sau Disqus 3 modalități de a încuraja comentariile pe blogul dvs. WordpressObținerea de comentarii pe blogul dvs. este un motivator excelent pentru a vă menține în continuare cu cursul lung care este blog-ul. Doar știind că cineva este acolo, aprecierea muncii tale se simte grozav, dar nu ... Citeste mai mult , dar dacă preferați să păstrați totul în casă sau să faceți un alt tip de personalizare, atunci postarea de comentarii de AJAX este cel mai puțin necesar.

Puteți vedea un exemplu de lucru aici A se folosi de - când postați un comentariu, nu veți părăsi pagina - în schimb, o vom trimite printr-un apel AJAX, apoi vom trimite rapid „mulțumesc”Notează înapoi. Citiți mai departe pentru un tutorial complet.

Pentru a utiliza funcții non-WordPress ca AJAX, vă rugăm să citiți my

tutorial anterior Un tutorial despre utilizarea AJAX în WordPressAJAX este o tehnologie web remarcabilă care ne-a mutat dincolo de simplul „clic pe link, accesați o altă pagină” structura Internet 1.0. Permite site-urilor să preia și să afișeze dinamic conținutul fără utilizator... Citeste mai mult și asigurați-vă că consultați toate articolele legate de WordPress.

Introducere

Există două părți separate necesare pentru ca comentariile AJAX WordPress să funcționeze, așa că permiteți-le să le explicăm mai întâi pentru a vă oferi o imagine de ansamblu asupra întregului proces.

• Unele Javascript din pagina care interceptează utilizatorul făcând clic pe Adauga comentariu butonul Trimite, care face, de asemenea, un apel AJAX și, de asemenea, se ocupă de răspuns.
• Un manipulator PHP care se conectează la acțiunea comment_post

Javascript

În primul rând, va avea nevoie jQuery, la fel ca orice lucru de la distanță interesant în dezvoltarea web în zilele noastre. Dacă nu sunteți sigur dacă este deja încărcat, mergeți mai departe și treceți la codul Javascript și încercați oricum - dacă aveți Firebug și jurnalul consolei spune „jQuery este nedefinit”Când actualizați pagina, apoi adăugați această linie la fișierul dvs. funcții.php pentru a vă asigura că este încărcat.

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

Rețineți că acesta este un mod elaborat de încărcare a jQuery, deoarece vom folosi cea mai recentă versiune de pe CDN-urile Google, care este mai rapidă și mai rapidă data decât cea inclusă în mod implicit cu WordPress - deci ar putea fi o idee bună să adăugați asta, chiar dacă jQuery este deja încărcat în altă parte.

Acum, pentru Javascript-ul care va gestiona formularul de comentarii, avem câteva opțiuni. Cel mai ușor este să inserați doar codul în dvs. single.php template - presupunând că nu aveți comentarii activate pentru pagini.

Alternativ, puteți lipi într-un deja existent .js fișierul folosit de tema dvs. sau creați un nou .js fișier în directorul dvs. tematic. Dacă alegeți să-l introduceți în propriul fișier .js separat și să nu-l lipiți direct în șablonul dvs. de temă, asigurați-vă că adăugați următoarele linii la functions.phpși se observă că numele fișierului se presupune a fi ajaxcomments.js în rădăcina folderului tematic.

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

Iată Javascriptul pentru a gestiona formularul de comentarii (sau puteți vizualizati-l pe pasta):

 // Sistem de comentarii AJAXified. jQuery ('document'). gata (funcție ($) { var commentform = $ ('# comentariu'); // găsiți formularul de comentarii. commentform.prepend ('
 
'); // adăugați panoul de informații înainte de formular pentru a oferi feedback sau erori. var statusdiv = $ ('# comentariu-stare'); // defini infopanel commentform.submit (function () { // serializează și stochează datele formularului într-o variabilă. var formdata = commentform.serialize (); // Adăugați un mesaj de stare. statusdiv.html ( '
 Procesare...  p>'); // Extrageți adresa URL de acțiune din formularul de comentarii. var formurl = commentform.attr ('acțiune'); // Postare formular cu date. $ .Ajax ({ tip: 'post', url: formurl, date: formdata, eroare: funcție (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 Este posibil să fi lăsat unul dintre câmpuri necompletat sau să fiți postat prea repede 
'); }, succes: funcție (date, textStatus) { if (date == "succes") statusdiv.html ('
 Mulțumesc pentru comentariu. Apreciem răspunsul dumneavoastră. 
 '); altceva. statusdiv.html ('
 Vă rugăm să așteptați un pic înainte de a posta următorul comentariu 
'); commentform.find ( 'textarea [name = comment]') val ( ''). } }); returnare falsă; }); });

Pentru a descompune codul, creăm mai întâi obiecte jQuery din formularul de comentarii (care presupune că formularul dvs. de comentariu are ID-ul CSS implicit al „commentform”)și adăugând un panou de informații gol deasupra acestuia, pe care îl vom folosi ulterior pentru a afișa mesaje utilizatorului despre progresul postării comentariului.

commentform.submit este folosit pentru a „deturna” butonul de trimitere. Apoi serializăm datele formularului (le transformăm într-o linie lungă de date), dăm un „Prelucrare”Mesaj către utilizator în panoul de informații și mergeți mai departe cu o solicitare AJAX. Cererea AJAX este a format standard, dar nu intră cu adevărat în sfera acestui tutorial astăzi - este suficient să spunem că reacționează fie la un succes, fie la un succes eroare și elimină formularul dacă reușește pentru a împiedica publicarea accidentală a aceluiași comentariu de două ori. Ajustați mesajele și erorile după caz, sau adăugați un stil adecvat fișei de stil a temei dvs. dacă doriți ca mesajele de eroare să iasă în evidență cumva. Ultima linie - returnează fals - împiedică formularul să completeze acțiunea implicită.

PHP Handler

În cele din urmă, avem nevoie de ceva care să împiedice actualizarea paginii și să trimită răspunsul corespunzător utilizatorului precum și notificarea administratorului dacă comentariul trebuie să modereze sau să notifice autorul unui nou comentariu. Pentru aceasta, ne conectăm la comment_post acțiune care are loc imediat după ce a fost adăugată la baza de date și a detecta dacă a fost o solicitare AJAX. Adăugați acest lucru la dvs. functions.php fişier:

(Deasemenea disponibil la această pastină)

add_action ('comment_post', 'ajaxify_comments', 20, 2); function ajaxify_comments ($ comment_ID, $ comment_status) { if (! goal ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Dacă cerere AJAX Apoi. comutator ($ comment_status) { cazul „0”: // notifică moderatorul comentariului neaprobat. wp_notify_moderator ($ comment_ID); cazul „1”: // Comentariu aprobat. ecou „succes”; $ commentdata = & get_comment ($ comentariu_ID, ARRAY_A); $ Post = & get_post ($ commentdata [ 'comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); pauză; implicit: ecou „eroare”; } Ieșire; } }

Probleme la fața locului

Dacă pagina este în continuare revigorantă în loc să posteze prin AJAX, este probabil să fie una dintre cele două probleme. Una - s-ar putea să nu fiți încărcat jQuery. Instalare Firebug Cum se instalează Firebug pe IE, Safari, Chrome și Opera Citeste mai mult sau activați instrumentele pentru dezvoltatori Chrome și verificați erorile din jurnalul consolei. Dacă jQuery nu este găsit, accesați secțiunea JavaScript și citiți primul bit pe care ați adăugat jQuery la tema dvs. A doua posibilitate este ca tema dvs. să facă ceva special în formularul de comentarii, iar ID-ul să nu mai fie „commentform”. Verificați codul sursă, apoi reglați var commentform = $ („# comentariu”) linia din JavaScript pentru a fi ID-ul corect - care ar putea funcționa.

Ca oricând, sunt în preajmă să vă ajut cât mai mult, dar vă rugăm să postați link-uri către un exemplu URL unde pot arunca o privire rapidă.