По умолчанию система комментирования WordPress крайне неадекватна — одним из моих самых больших возражений является то, что для публикации комментария необходимо обновить страницу. Вы можете переключиться на стороннюю систему, такую как Livefyre или Disqus.
, но если вы предпочитаете хранить все дома или делать какие-то другие настройки, то публикация комментариев AJAX — это минимум того, что вам следует делать.
Вы можете увидеть пример этой работы здесь на MakeUseOf — когда вы публикуете комментарий, вы не покидаете страницу — вместо этого мы отправим его с помощью вызова AJAX, а затем отправим быстрое сообщение с благодарностью. Читайте дальше для полного урока.
Для использования не-WordPress функций в качестве AJAX, пожалуйста, прочитайте мой предыдущий учебник
и не забудьте проверить все статьи, связанные с WordPress.
Вступление
Есть две отдельные части, необходимые для работы комментариев AJAX WordPress, поэтому давайте сначала объясним их, чтобы дать вам обзор всего процесса.
- Какой-то Javascript на странице, который перехватывает пользователя, нажимающего Добавить комментарий Кнопка отправки, которая также делает это вызовом AJAX, а также обрабатывает ответ.
- PHP-обработчик, который подключается к действию comment_post
Javascript
Во-первых, для этого понадобится jQuery, как и все, что в настоящее время делает веб-разработку более увлекательной. Если вы не уверены, загружен ли он уже, перейдите к Javascript-коду и попробуйте его в любом случае — если у вас есть Firebug и консольный журнал говорит «jQuery не определен», когда вы обновляете страницу, добавьте эту строку в ваш файл functions.php, чтобы убедиться, что он загружается.
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"), false);
wp_enqueue_script ( 'JQuery'); }}
add_action ('wp_print_scripts', 'google_jquery');[/ NOEDIT]
Обратите внимание, что это сложный способ загрузки jQuery, потому что мы будем использовать последнюю версию из CDN Google, которая является более быстрой и актуальной, чем та, которая включена по умолчанию в WordPress — так что было бы неплохо добавить ее в любом случае даже если jQuery уже загружен в другом месте.
Теперь для фактического Javascript, который будет обрабатывать форму комментариев, у нас есть несколько вариантов. Самый простой — просто вставить код в свой single.php шаблон — при условии, что у вас не включено комментирование для страниц.
Кроме того, вы можете вставить в существующий .JS файл, используемый вашей темой, или создайте новый .js файл в каталоге вашей темы. Если вы решили поместить его в свой отдельный файл .js и не вставлять его непосредственно в шаблон темы, обязательно добавьте следующие строки в свой файл. functions.php, и обратите внимание, что имя файла предполагается ajaxcomments.js в корне папки вашей темы.
add_action ('init', 'ajaxcomments_load_js', 10);
function ajaxcomments_load_js () {
wp_enqueue_script ('ajaxcomments', get_stylesheet_directory_uri (). '/ ajaxcomments.js');
}[/ NOEDIT]
Вот Javascript для обработки формы комментария (или вы можете просмотреть ее на pastebin):
[/ NOEDIT]
// AJAXified система комментирования
JQuery ( 'документ'). готовы (функция ($) {
var commentform = $ ('# commentform'); // найти форму комментария
commentform.prepend (»
«); // добавить информационную панель перед формой, чтобы предоставить отзыв или ошибки
var statusdiv = $ ('# comment-status'); // определить инфопанель
commentform.submit (функция () {
// сериализуем и храним данные формы в переменной
var formdata = commentform.serialize ();
// Добавить статусное сообщение
statusdiv.html (»Обработка ...
«);
// Извлечение URL действия из комментария
var formurl = commentform.attr ('действие');
// Размещаем форму с данными
$ .Ajax ({
тип: «пост»,
URL: Formurl,
данные: формданные,
error: function (XMLHttpRequest, textStatus, errorThrown) {
statusdiv.html (»Возможно, вы оставили поле пустым или слишком быстро отправили сообщение
«);
},
success: function (data, textStatus) {
если (данные == «успех»)
statusdiv.html (»Спасибо за ваш комментарий. Мы ценим ваш ответ.
«);
еще
statusdiv.html (»Пожалуйста, подождите немного, прежде чем опубликовать свой следующий комментарий
«);
commentform.find ( 'текстовое поле [имя = комментарий]') Вал ( '');
}
});
вернуть ложь;
});
});[/ NOEDIT]
Чтобы разбить код, мы сначала создаем объекты jQuery формы комментария (что предполагает, что ваша форма комментария имеет идентификатор css по умолчанию «commentform»), и добавляем пустую информационную панель над ней, которую мы позже будем использовать для отображения сообщения пользователю о ходе публикации своего комментария.
commentform.submit используется для «взлома» кнопки отправки. Затем мы сериализуем данные формы (превращаем их в одну длинную строку данных), отправляем пользователю сообщение «Обработка» на этой информационной панели и выполняем запрос AJAX. AJAX-запрос является стандартным форматом, но на самом деле он не входит в рамки сегодняшнего учебного пособия. Достаточно сказать, что он реагирует либо на успех, либо на ошибку, и удаляет форму в случае успеха, чтобы предотвратить случайную публикацию того же комментария дважды. При необходимости измените сообщения и ошибки или добавьте подходящий стиль в таблицу стилей вашей темы, если вы хотите, чтобы сообщения об ошибках как-то выделялись. Последняя строка — вернуть ложь — не позволяет форме завершить действие по умолчанию.
PHP обработчик
Наконец, нам нужно что-то, чтобы предотвратить обновление страницы и отправить соответствующий ответ пользователю, а также уведомить администратора, если комментарий нуждается в модерации, или уведомить автора о новом комментарии. Для этого мы подключаемся к comment_post действие, которое происходит сразу после его добавления в базу данных, и определяет, был ли это запрос AJAX. Добавьте это к вашему functions.php файл:
(Также доступно в этой пастбине)
add_action ('comment_post', 'ajaxify_comments', 20, 2);
function ajaxify_comments ($ comment_ID, $ comment_status) {
если (! пусто ($ _ SERVER [ 'HTTP_X_REQUESTED_WITH']) strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
// Если запрос AJAX, то
Переключатель ($ comment_status) {
дело '0':
// уведомить модератора о неутвержденном комментарии
wp_notify_moderator ($ comment_ID);
case '1': // одобренный комментарий
эхо "успех";
$ commentdata = get_comment ($ comment_ID, ARRAY_A);
$ Пост = get_post ($ commentdata [ 'comment_post_ID']);
wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']);
перерыв;
дефолт:
эхо "ошибка";
}
выход;
}
}[/ NOEDIT]
Пятно Проблемы
Если страница все еще обновляется вместо публикации через AJAX, это может быть одной из двух проблем. Один из них — возможно, у вас не загружен jQuery. Установите Firebug
или включите инструменты разработчика Chrome и проверьте журнал консоли на наличие ошибок. Если jQuery не найден, вернитесь в раздел JavaScript и прочитайте первый раздел о добавлении jQuery в вашу тему. Вторая возможность состоит в том, что ваша тема делает что-то особенное с формой комментария, и ее идентификатор больше не является «комментарием». Проверьте исходный код, затем настройте var commentform = $ (‘# commentform’) строка в JavaScript, чтобы быть правильным идентификатором — это может сработать.
Как всегда, я собираюсь помочь вам как можно больше, но, пожалуйста, опубликуйте ссылки на пример URL, где я могу быстро просмотреть, или опубликуйте их на форуме MakeUseOf Ответы, если комментарии этого поста закрыты. Наслаждайтесь комментариями!
![Доступный, безопасный и быстрый веб-хостинг от SiteGround [Giveaway]](https://helpexe.ru/wp-content/cache/thumb/43/f5d3497b2719843_150x95.jpg)
