Создание плагина Добавление в Избранное. Урок 4

Дата публикации: 2015-09-03

Создание плагина Добавление в Избранное

От автора: в этом уроке мы продолжим создание плагина «Добавление в Избранное». По задумке клик пользователя по ссылке Добавить в Избранное должен обрабатываться плагином без перезагрузки страницы, т.е. асинхронно – с использованием AJAX’a. Соответственно, в этом уроке мы познакомимся с нюансами работы с AJAX’ом в WordPress.

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

Итак, для работы с запросами AJAX WordPress предлагает 2 хука: wp_ajax_{action} и wp_ajax_nopriv_{action}. В качестве {action} выступает динамическая часть хука, которая свяжет хук с запросом. Поскольку асинхронных запросов может быть сколь угодно много, то мы должны точно знать, какой запрос в какую функцию нужно перенаправить. Вот за это как раз и отвечает динамическая часть – {action}.

Что касается первой части хуков — wp_ajax_ и wp_ajax_nopriv_, — то они отвечают за работу с запросами от разных групп пользователей. Первый хук обрабатывает запросы от авторизованных пользователей, второй – от гостей. Поскольку у нас добавление в избранное предусмотрено только для авторизованных пользователей, следовательно, мы будем использовать хук wp_ajax_.

Итак, давайте для начала в файле wfm-favorites-scripts.js опишем сам запрос по клику:

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс

jQuery(document).ready(function($) {
 
 $('.wfm-favorites-link a').click(function(e){
  $.ajax({
 type: 'POST',
 url: wfmFavorites.url, 
 data: {
 test: 'Тестовый запрос',
 action: 'wfm_test'
 },
 success: function(res){
 console.log(res);
 },
 error: function(){
 alert('Ошибка!');
 }
  });
  e.preventDefault();
 });

});

jQuery(document).ready(function($) {

$('.wfm-favorites-link a').click(function(e){

$.ajax({

type: 'POST',

url: wfmFavorites.url,

data: {

test: 'Тестовый запрос',

action: 'wfm_test'

success: function(res){

console.log(res);

error: function(){

alert('Ошибка!');

}

});

e.preventDefault();

});

Теперь давайте прокомментируем ключевые строки запроса. Итак, в качестве параметра url мы указали свойство url объекта wfmFavorites: url: wfmFavorites.url. Этого объекта пока нет, но мы его чуть позже определим. В нем должен содержаться путь к файлу-обработчику, который находится по адресу /wp-admin/admin-ajax.php. Это стандартный файл WordPress, принимающий запросы AJAX.

Далее, в параметре data передаются на сервер некие данные, в частности, это переменная test с некой тестовой строкой и переменная action со значением wfm_test. Пока нас интересует переменная action. Это тот самый {action} в динамической части хука wp_ajax_{action}, который и свяжет запрос с необходимым хуком и функцией. Соответственно, хук будет называться wp_ajax_wfm_test.

Собственно, это пока весь запрос. Теперь пропишем в главном файле плагина — wfm-favorites.php – хук, принимающий этот запрос:

add_action( 'wp_ajax_wfm_test', 'wp_ajax_wfm_test' );

1	add_action( 'wp_ajax_wfm_test', 'wp_ajax_wfm_test' );

К хуку мы привязали одноименную функцию. Функцию можете назвать как угодно, я часто называю ее по названию хука. И опишем теперь функцию в файле functions.php:

function wp_ajax_wfm_test(){
 if( isset($_POST['test']) ){
  print_r($_POST);
 }
 wp_die('Запрос завершен');
}

function wp_ajax_wfm_test(){

if( isset($_POST['test']) ){

print_r($_POST);

}

wp_die('Запрос завершен');

}

Если мы нигде не ошиблись, то при клике по ссылке Добавить в Избранное, мы должны увидеть в консоли браузера распечатку массива POST и строку Запрос завершен. В следующем уроке мы добавим индикатор процесса запроса и немного модифицируем сам запрос.

На этом текущий урок завершен. Удачи и до новых встреч!

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс