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

Рекламное объявление

По умолчанию система комментирования WordPress крайне неадекватна - одним из моих самых больших возражений является то, что для публикации комментария необходимо обновить страницу. Вы можете переключиться на стороннюю систему, такую ​​как Livefyre [Broken URL Removed] или Disqus 3 способа поощрения комментариев к вашему блогу WordpressПолучение комментариев к вашему блогу - отличный стимул, чтобы вы продолжали заниматься блоггингом. Просто зная, что кто-то там, ценит вашу работу, чувствует себя прекрасно, но не ... Подробнее , но если вы предпочитаете хранить все дома или делать какие-либо другие настройки, то публикация комментариев AJAX - это минимум того, что вам следует делать.

Вы можете увидеть пример этой работы здесь на MakeUseOf - когда вы публикуете комментарий, вы не покидаете страницу - вместо этого мы отправим его через AJAX-вызов, а затем отправим быстрый «СпасибоПримечание Читайте дальше для полного урока.

Для использования не-WordPress функций в качестве AJAX, пожалуйста, прочитайте мой

предыдущий урок Учебник по использованию AJAX в WordPressAJAX - это замечательная веб-технология, которая вывела нас за рамки простой ссылки «перейдите на другую страницу» Структура Интернета 1.0. Это позволяет веб-сайтам динамически извлекать и отображать контент без Пользователь ... Подробнее и не забудьте проверить все статьи, связанные с 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"), ложный); wp_enqueue_script ( 'JQuery'); }} add_action ('wp_print_scripts', 'google_jquery');

Обратите внимание, что это сложный способ загрузки 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'); }

Вот Javascript для обработки формы комментария (или вы можете посмотреть на pastebin):

Чтобы разбить код, мы сначала создаем объекты 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) { if (! empty ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Если запрос AJAX тогда. Переключатель ($ comment_status) { case '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']); перерыв; по умолчанию: echo "error"; } выход; } }

Пятно Проблемы

Если страница все еще обновляется вместо публикации через AJAX, это может быть одной из двух проблем. Один из них - возможно, у вас не загружен jQuery. устанавливать поджигатель Как установить Firebug на IE, Safari, Chrome & Opera Подробнее или включите инструменты разработчика Chrome и проверьте журнал консоли на наличие ошибок. Если jQuery не найден, вернитесь в раздел JavaScript и прочитайте первый раздел о добавлении jQuery в вашу тему. Вторая возможность заключается в том, что ваша тема делает что-то особенное для формы комментариев, и ее идентификатор больше не является «комментарием». Проверьте исходный код, затем настройте var commentform = $ (‘# commentform’) строка в JavaScript, чтобы быть правильным идентификатором - это может сработать.

Как всегда, я собираюсь помочь как можно дальше, но, пожалуйста, опубликуйте ссылки на пример URL, где я могу быстро взглянуть.