Michael Cain
0 
1241
358
По умолчанию система комментирования WordPress крайне неадекватна - одним из моих самых больших возражений является то, что для публикации комментария необходимо обновить страницу. Вы можете переключиться на стороннюю систему, такую как Livefyre или Disqus 3 Способа поощрять комментарии к своему Wordpress Блогу 3 Способа поощрять комментарии к своему Wordpress Блогу Получение комментариев к вашему блогу является отличным стимулом для продолжения вашей продолжительной работы. блогами. Просто зная, что кто-то там, ценит вашу работу, чувствует себя прекрасно, но не…, но если вы предпочитаете держать все в доме или делать какую-то другую настройку, то публикация комментариев AJAX - это минимум, что вам следует.
Вы можете увидеть пример этой работы здесь на MakeUseOf - Когда вы публикуете комментарий, вы не покидаете страницу - вместо этого мы отправим его через AJAX-вызов, а затем отправим быстрый “благодарю вас” обратите внимание. Читайте дальше для полного урока.
Для использования не-WordPress функций в качестве AJAX, пожалуйста, прочитайте мой предыдущий учебник. Учебник по использованию AJAX в WordPress Учебник по использованию AJAX в WordPress. AJAX - замечательная веб-технология, которая вывела нас за рамки простого “нажмите на ссылку, перейдите на другую страницу” Структура Интернета 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"), false); 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):
// AJAXified система комментирования jQuery ('document'). Ready (function ($) var commentform = $ ('# commentform'); // найти форму комментария commentform.prepend (''); // добавить информационную панель перед форма для предоставления обратной связи или ошибок var statusdiv = $ ('# comment-status'); // определить инфопанель commentform.submit (function () // сериализовать и сохранить данные формы в переменной var formdata = commentform.serialize ( ); // Добавить сообщение о состоянии statusdiv.html ('Обработка ...
«); // Извлечение URL-адреса действия из комментария var formurl = commentform.attr ('action'); // Отправить форму с данными $ .ajax (тип: 'post', url: formurl, data: formdata, error: function (XMLHttpRequest, textStatus, errorThrown) statusdiv.html ('Возможно, вы оставили поле пустым или слишком быстро отправили
«); , success: function (data, textStatus) if (data == "success") statusdiv.html ('Спасибо за ваш комментарий. Мы ценим ваш ответ.
«); еще statusdiv.html ('Пожалуйста, подождите некоторое время, прежде чем опубликовать свой следующий комментарий
«); commentform.find ('textarea [name = comment]'). val (");); вернуть false;););Чтобы разбить код, мы сначала создаем объекты jQuery формы комментария (который предполагает, что ваша форма комментария имеет идентификатор CSS по умолчанию “commentform”), и добавив пустую информационную панель над ней, которую мы позже будем использовать для отображения сообщений пользователю о ходе публикации своего комментария.
commentform.submit используется для «взлома» кнопки отправки. Затем мы сериализуем данные формы (превращаем их в одну длинную строку данных), даем “обработка” сообщение пользователю в этой информационной панели, и продолжить запрос AJAX. AJAX-запрос является стандартным форматом, но на самом деле он не входит в сферу применения этого учебного пособия сегодня - достаточно сказать, что он реагирует либо на успех, либо на ошибку, и в случае успеха пропускает форму, чтобы предотвратить случайную публикацию одного и того же комментария дважды. При необходимости измените сообщения и ошибки или добавьте подходящий стиль в таблицу стилей вашей темы, если вы хотите, чтобы сообщения об ошибках как-то выделялись. Последняя строка - вернуть ложь - не позволяет форме завершить действие по умолчанию.
PHP обработчик
Наконец, нам нужно что-то, чтобы предотвратить обновление страницы и отправить соответствующий ответ обратно пользователю, а также уведомить администратора, если комментарий нуждается в модерации, или уведомить автора о новом комментарии. Для этого мы подключаемся к comment_post действие, которое происходит сразу после его добавления в базу данных, и определяет, был ли это запрос AJAX. Добавьте это к вашему functions.php файл:
(Также доступный в этом pastebin)
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 запросить тогда (запрос $ AJAX comment_status) case '0': // уведомить модератора о неутвержденном комментарии wp_notify_moderator ($ comment_ID); case '1': // Одобренный комментарий echo "success"; $ 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 Как установить Firebug на IE, Safari, Chrome & Opera Как установить Firebug на IE, Safari, Chrome & Opera или включить инструменты разработчика Chrome, и проверить журнал консоли на наличие ошибок. Если jQuery не найден, вернитесь в раздел JavaScript и прочитайте первую статью о добавлении jQuery в вашу тему. Вторая возможность заключается в том, что ваша тема делает что-то особенное в форме комментариев, и ее идентификатор больше не является “commentform”. Проверьте исходный код, затем настройте var commentform = $ ('# commentform') строка в JavaScript, чтобы быть правильным идентификатором - это может работать.
Как всегда, я готов помочь как можно больше, но, пожалуйста, опубликуйте ссылки на пример URL, где я могу быстро просмотреть.