Створення плагіна Додавання в Обране. Урок 4

17

Від автора: у цьому уроці ми продовжимо створення плагіна «Додати у Вибране». За задумом клік користувача за посиланням Додати в Обране повинен оброблятися плагіном без перезавантаження сторінки, тобто асинхронно – з використанням AJAX’a. Відповідно, у цьому уроці ми познайомимося з нюансами роботи з AJAX’ом в WordPress.

Створення плагіна Додавання в Обране. Урок 4

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

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

Створення плагіна Додавання в Обране. Урок 4Створення плагіна Додавання в Обране. Урок 4

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

Що стосується першої частини хуків — wp_ajax_ і wp_ajax_nopriv_, вони відповідають за роботу із запитами від різних груп користувачів. Перший хук обробляє запити від авторизованих користувачів, другий – від гостей. Оскільки у нас додавання в обране передбачено лише для авторизованих користувачів, отже, ми будемо використовувати хук wp_ajax_.

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

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’ );

До хуку ми прив’язали однойменну функцію. Функцію можете назвати як завгодно, я часто називаю її за назвою хука. І опишемо тепер функцію у файлі functions.php:

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

Якщо ми ніде не помилилися, то при кліці по посиланню Додати в Обране, ми повинні побачити в консолі браузера роздруківку масиву POST і рядок Запит завершений. У наступному уроці ми додамо індикатор процесу запиту і трохи модифікуємо сам запит.

На цьому поточний урок завершено. Удачі і до нових зустрічей!