Как да AJAX-ify вашите WordPress коментари

реклама

По подразбиране системата за коментиране на WordPress е ужасно неадекватна - едно от най-големите ми възражения е, че за да публикувам коментар, страницата трябва да се опресни. Можете да преминете към система на трети страни като Livefyre [Прекъснат URL адрес е премахнат] или Disqus 3 начина да насърчите коментарите към вашия Wordpress BlogПолучаването на коментари в блога ви е чудесен мотиватор, за да продължите с дългия път, който блогвате. Само да знаете, че някой е там, оценявайки работата ви се чувства страхотно, но не ... Прочетете още , но ако предпочитате да държите всичко в къщата или да правите някакъв друг вид персонализиране, публикуването на коментари от AJAX е най-малкото, което трябва да направите.

Пример за това можете да видите тук Да се ​​възползват от - когато публикувате коментар, няма да напуснете страницата - вместо това ще го изпратим чрез AJAX обаждане и след това ще изпратим бързо „Благодаря ти“Бележка назад. Прочетете за пълен урок.

За използване на не-WordPress функции като AJAX, моля, прочетете моята

предишен урок Урок за използването на AJAX в WordPressAJAX е забележителна уеб технология, която ни изведе отвъд простата връзка „щракнете, отидете на друга страница“ структура на Интернет 1.0. Тя дава възможност на уебсайтовете динамично да извличат и показват съдържание без потребител ... Прочетете още и не забравяйте да разгледате всички свързани с WordPress статии.

Въведение

Има две отделни части, необходими, за да работят коментарите на AJAX WordPress, така че нека обясним първо тези, които да ви дадат общ преглед на целия процес.

• Някои Javascript на страницата, който прихваща потребителя, щраквайки върху Добави коментар бутон за подаване, който също прави AJAX обаждане и обработва отговора.
• PHP манипулатор, който се свързва с действието comment_post

Javascript

Първо, това ще е необходимо JQuery, както и всичко, което е отдалечително вълнуващо в уеб разработката в днешно време. Ако не сте сигурни дали вече се зарежда, продължете напред и прескочете надолу към Javascript кода и опитайте така или иначе - ако имате Firebug и дневника на конзолата казва „jQuery е неопределен“, Когато опресните страницата, след това добавете този ред към файла function.php, за да гарантирате, че се зарежда.

функция 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"), невярно); wp_enqueue_script ( "JQuery '); }} добавяне на управление ('wp_print_scripts', 'google_jquery');

Забележете, това е сложен начин за зареждане на jQuery, защото ще използваме най-новата версия от CDN на Google, която е по-бърза и по-добра дата от тази, включена по подразбиране с WordPress - така че може да е добра идея да добавите това така или иначе, дори ако jQuery вече е зареден на друго място.

Сега, за действителния Javascript, който ще обработва формата за коментари, имаме няколко възможности. Най-лесното е просто да поставите кода във вашия single.php шаблон - ако приемем, че нямате активирани коментари и за страници.

Като алтернатива можете да поставите в съществуваща .js файл, използван от вашата тема, или създайте нов .js файл във вашата тема директория. Ако решите да го поставите в свой отделен .js файл и да не го поставите директно във вашия шаблон на тема, не забравяйте да добавите следните редове към вашия functions.phpи имайте предвид, че името на файла се приема ajaxcomments.js в корена на вашата папка с теми.

добавяне ('init', 'ajaxcomments_load_js', 10); функция ajaxcomments_load_js () {wp_enqueue_script ('ajaxcomments', get_stylesheet_directory_uri (). '/ ajaxcomments.js'); }

Ето Javascript за обработка на формата за коментари (или можете вижте го на пастабин):

 // AJAXified система за коментари. jQuery ('документ'). готов (функция ($) { var commentform = $ ('# commentform'); // намерете формата за коментар. commentform.prepend ('
 
'); // добавете информационен панел преди формата, за да предоставите обратна връзка или грешки. var statusdiv = $ ('# коментар-статус'); // дефинирайте infopanel commentform.submit (function () { // сериализира и съхранява данните от формуляра в променлива. var formdata = commentform.serialize (); // Добавяне на съобщение за състояние statusdiv.html ( ' Обработка...  P>'); // Извличане на URL адрес на действие от коментар. var formurl = commentform.attr ('действие'); // Публикуване с данни. $ .Ajax ({ type: 'post', url: formurl, data: formdata, error: function (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 Може би сте оставили едно от полетата празно или публикувате твърде бързо 
'); }, успех: функция (данни, textStatus) { if (данни == "успех") statusdiv.html ('
 Благодаря за коментара ви Оценяваме отговора ви. 
 '); друго. statusdiv.html ('
 Моля, изчакайте известно време, преди да публикувате следващия си коментар 
'); commentform.find ( "текстовото поле [име = коментар]) Вал ( '.'); } }); върнете невярно; }); });

За да разбием кода, първо създаваме jQuery обекти от формата за коментари (което предполага, че вашият формуляр за коментар има идентификатор на css по подразбиране на „commentform“)и добавяне на празен информационен панел над него, който по-късно ще използваме за показване на съобщения до потребителя за напредъка на публикуването на техния коментар.

commentform.submit се използва за „отвличане“ на бутона за подаване. След това сериализираме данните от формуляра (превръщаме ги в един дълъг ред данни), даваме „обработване”Съобщение до потребителя в този информационен панел и продължете с AJAX заявка. Заявката AJAX е a стандартен формат, но не наистина в обхвата на този урок днес - достатъчно е да се каже, че реагира или на успех, или грешка и изпраща формата, ако е успешна, за да предотврати случайно публикуване на същия коментар два пъти. Коригирайте съобщенията и грешките, както е подходящо, или добавете подходяща стилистика към таблицата със стилове на вашата тема, ако искате съобщенията за грешки да се открояват по някакъв начин. Последният ред - върнете невярно - не позволява на формуляра да изпълни това по подразбиране действие.

PHP Handler

И накрая, имаме нужда от нещо, което да предотврати обновяването на страницата и да изпратим обратно съответния отговор на потребителя както и уведомяване на администратора, ако коментарът се нуждае от модериране, или уведомяване на автора на нов коментар. За целта се закачаме в comment_post действие, което се извършва веднага след добавянето му в базата данни и открийте дали това е заявка AJAX. Добавете това към вашия functions.php файл:

(Също достъпно в този пастбин)

добавяне ('comment_post', 'ajaxify_comments', 20, 2); функция ajaxify_comments ($ comment_ID, $ comment_status) { if (! празно ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Ако AJAX заявка тогава. ключ ($ comment_status) { случай '0': // уведомява модератора за неодобрен коментар. wp_notify_moderator ($ comment_ID); случай '1': // Одобрен коментар. ехо "успех"; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ Пост = & get_post ($ commentdata [ 'comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); прекъсване; по подразбиране: ехо "грешка"; } излезете; } }

Проблеми с петна

Ако страницата все още се опреснява вместо да публикува чрез AJAX, това вероятно е един от два проблема. Едно - може да не сте заредили jQuery. Инсталирай подпалвач Как да инсталирате Firebug в IE, Safari, Chrome и Opera Прочетете още или активирайте инструментите за разработчици на Chrome и проверете журнала на конзолата за грешки. Ако jQuery не е намерен, върнете се обратно в секцията на JavaScript и прочетете първия бит за добавяне на jQuery към вашата тема. Втората възможност е темата ви да направи нещо специално във формата за коментар и идентификационният номер вече не е „форма на коментар“. Проверете изходния код, след което коригирайте var commentform = $ ('# форма за коментар') ред в JavaScript, за да бъде точният идентификатор - това може да работи.

Както винаги, аз съм на път да помогна по-нататък, доколкото мога, но моля, публикувайте връзки към примерен URL адрес, където мога да разгледам бързо.