Работа с AJAX в WordPress
AJAX — очень крутая штука. Эта штука позволяет создавать действительно классные интерактивные приложения. Грубо говоря, с помощью AJAX можно делать разные привычные вещи “без перезагрузки страницы”: подгрузка новых статей без перезагрузки страницы, отправка комментариев WordPress без перезагрузки страницы, вывод результатов поиска под полем ввода без перезагрузки страницы.
По возможности, буду стараться создавать новые проекты с использованием AJAX. Это действительно очень удобно. Пользователю не нужно сидеть и смотреть на белый экран браузера, пока загрузится сайт — можно добавить красивенький прелоадер, прогресс-бар или надпись “Подождите секундочку…”. Тот же VK работает на AJAX. Ладно, не буду расписывать много об этом (это тема отдельной статьи), думаю, суть ясна.
AJAX — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее.
Википедия
А теперь ближе к теме. У WordPress есть очень удобный функционал для работы с AJAX. Достаточно написать нужную нам функцию и вызвать ее через ajax-хук.
Выглядит он таким образом:
1 |
add_action('wp_ajax_myaction', 'action_handler'); |
Где myaction — имя нашего хука, а action_handler — имя функции, которую он вызывает. Стоит отметить, что этот хук сработает только для авторизованных пользователей. В этом есть смысл, когда мы пишем что-то для админки, но чтобы он работал для всех посетителей сайта, нужно продублировать хук с добавленным словом nopriv, то есть в полном виде будет так:
1 2 |
add_action('wp_ajax_myaction', 'action_handler'); //работает для авторизованных пользователей add_action('wp_ajax_nopriv_myaction', 'action_handler'); //работает для неавторизованных |
Для отправки самих же AJAX запросов я использую встроенную функциональность в jQuery.
1 2 3 4 5 6 7 8 |
$.ajax({ url: "/wp-admin/admin-ajax.php", //url, к которому обращаемся type: "POST", data: "action=myaction¶m1=" + param1, //данные, которые передаем. Обязательно для action указываем имя нашего хука success: function(data){ //возвращаемые данные попадают в переменную data } }); |
Да, в url должен стоять адрес /wp-admin/admin-ajax.php
Пример
Я написал новый пост с обновленным примером. Там более актуальный код и лучше разжевано. Вот ссылка.
Где-то в феврале я делал вот такой блог http://blogstark.ru/ (видно, сайта уже нет). Несмотря на его типичность, функциональность в нем не совсем типичная:)
AJAX здесь используется в двух случаях: подсчетов количества просмотров страниц (и его отображение) и подсчет кол-ва лайков, точнее репостов статьи (реальных, а не кликов по кнопкам). О втором случае расскажу уже в следующей статье, а кол-во просмотров покажу здесь.
И так, сначала пишем две функции в functions.php для подсчета и вывода количества просмотров статьи.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
//Ajax для количества проcмотров //Запись в базу данных function postview_count_set() { $id_p = $_POST['post_id']; $views_count = get_post_meta($id_p, '_views_count', true); $views_count++; update_post_meta($id_p, '_views_count', $views_count); exit; //чтобы в ответ не попало ничего лишнего } add_action('wp_ajax_postview_count_set', 'postview_count_set'); add_action('wp_ajax_nopriv_postview_count_set', 'postview_count_set'); //Чтение из базы function postview_count_get() { $id_p = $_POST['post_id']; $views_count = get_post_meta($id_p, '_views_count', true); echo $views_count; exit; } add_action('wp_ajax_postview_count_get', 'postview_count_get'); add_action('wp_ajax_nopriv_postview_count_get', 'postview_count_get'); |
В первом случае получаем статью по её id, добавляем единицу к просмотру и пишем значение в базу, во втором — читаем значение.
Теперь немного JavaScript.
Создаем две функции, которые принимают id поста.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function postviewCountGet(postId){ $.ajax({ url: "/wp-admin/admin-ajax.php", type: "POST", data: "action=postview_count_get&post_id="+ postId, success: function(html){ $('#post-' + postId + ' .viewm').append(html); } }); }; function postviewCountSet(postId){ $.ajax({ url: "/wp-admin/admin-ajax.php", type: "POST", data: "action=postview_count_set&post_id="+ postId }); }; |
postviewCountGet получает из базы кол-во просмотров статьи, а postviewCountSet добавляет +1 к просмотру статьи.
Использовать AJAX в WordPress для подсчета количества просмотров — идеально. Во-первых, это решает проблему с кэшированием. На сайте используется мой любимый Hyper Cache, с этим нет никакой головной боли. Во-вторых, за счет этого сама страница загружается быстрее, так как ее можно достать из кэша, начать читать, а потом уже асинхронно подгрузятся циферки.
Для защиты/проверки запросов можно использовать nonce (wp_create_nonce(),wp_verify_nonce()).
Вот такая небольшая, но, думаю, полезная статья. AJAX — крутая штука, используйте её чаще, делайте свои сайты интерактивнее. Если есть вопросы — отвечу в комментариях или по почте.
Добрый день! На этой страничке http://zukori.ru/katalog/snyat хочу сделать сортировку на ajax, прочитал вашу статью не могу понять как мне это все переделать под себя.
Мне необходимо чтобы пользователь мог сортировать записи одновременно по названию и и площади, или по площади и цене.
Не могли бы вы написать статью на данную тему?
К сожалению, нет времени на статьи такого типа.
Но суть такая же:
Добрый день.
Нашла полезную информацию для себя.
Очень не хватает кнопок соц сетей под постами, чтобы сохранить статью у себя на странице в соцсети.
В Закладки складывать не удобно — работаю с разных ноутов. А иметь полезную информацию под рукой иногда очень нужно.
Маленькое пожелание на будущее — кнопки соцсетей под записями
Добрый день. Спасибо за отзыв. Постараюсь в скором времени добавить кнопки соц сетей.
Спасибо большое! Вроде все понятно, постараюсь теперь реализовать на деле