Создание плагина Добавление в Избранное. Урок 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. Быстрый старт»

Изучите курс и узнайте, как создавать уникальные темы на 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. Быстрый старт»

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

Скачать курс