От автора: в этом уроке мы продолжим создание плагина «Добавление в Избранное». По задумке клик пользователя по ссылке Добавить в Избранное должен обрабатываться плагином без перезагрузки страницы, т.е. асинхронно – с использованием 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»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Скачать курс| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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 – хук, принимающий этот запрос:
| 1 | add_action( 'wp_ajax_wfm_test', 'wp_ajax_wfm_test' ); |
К хуку мы привязали одноименную функцию. Функцию можете назвать как угодно, я часто называю ее по названию хука. И опишем теперь функцию в файле functions.php:
| 1 2 3 4 5 6 | function wp_ajax_wfm_test(){ if( isset($_POST['test']) ){ print_r($_POST); } wp_die('Запрос завершен'); } |
Если мы нигде не ошиблись, то при клике по ссылке Добавить в Избранное, мы должны увидеть в консоли браузера распечатку массива POST и строку Запрос завершен. В следующем уроке мы добавим индикатор процесса запроса и немного модифицируем сам запрос.
На этом текущий урок завершен. Удачи и до новых встреч!
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Скачать курс
Основы создания тем WordPress
Научитесь создавать мультиязычные темы с нестандартной структурой страниц
Получить
wp_localize_script( ‘wfm-favorites-scripts’, ‘wfmFavorites’, ['url' => admin_url('admin-ajax.php')] ); Пишет что здесь фатальная ошибка.
Кроме этого, наверное, что-то еще пишет?.. Например, расшифровку фатальной ошибки.