Как использовать AJAX в WordPress

За последние несколько лет AJAX стал самым популярным способом создания динамичных, удобных и гибких сайтов. AJAX – это технология, предоставляющая возможность обновлять содержимое на сайте без перезагрузки страниц в браузере. Например, Google Docs использует эту технологию каждые несколько минут для автоматического сохранения Вашей работы.

Несмотря на то, что существует несколько способов использовать AJAX в WordPress, и все они “правильные” в широком смысле слова, мы остановимся только на одном из них. Этот способ официально поддерживается WordPress, он очень логичен, за ним будущее, и он предоставляет очень много опций прямо “из коробки”.

Что такое AJAX?

Если Вы ещё не знакомы с AJAX, то предлагаю Вам по завершении чтения этого руководства обратить внимание на статью из Wikipedia. Это тот редкий случай, когда советуем читать как можно меньше о технологии, прежде чем приступить к практике. На практике всё не так сложно как в теории, потому что мы будем использовать библиотеку jQuery, а не чистый JavaScript.

В двух словах, AJAX представляет собой сочетание HTML, CSS и JavaScript-кода, который позволяет отсылать данные на сервер, а затем получать и обрабатывать ответ без необходимости перезагружать страницу.

Если на Вашем сайте есть страница, на которой пользователи могут изменять свой профиль, то Вы можете воспользоваться технологией AJAX для обновления профиля без перезагрузки страницы всякий раз, когда пользователь отправляет форму. После того как пользователь нажал на кнопку отправки формы, введенные им данные с помощью AJAX передаются на сервер для сохранения. Серверный скрипт возвращает строку: “данные сохранены”. После этого данные пользователя выводятся на страницу.

Чтобы разобраться в AJAX, нужно понять, чем он отличается от стандартного подхода. Если у Вас есть контактная форма на сайте, то, вероятно, она размечена с помощью HTML с применением CSS-стилей. А на сервере хранится PHP-скрипт, обрабатывающий полученную информацию. Единственное различие между AJAX-формой и обычной в том, каким образом информация попадает в скрипт на сервере и обратно к пользователю. Всё остальное идентично.

Чтобы использовать весь потенциал AJAX и получить максимальную пользу от этого руководства, Вы должны быть знакомы с JavaScript (jQuery будет достаточно), а также HTML, CSS и PHP. Если даже Ваши знания в JavaScript сомнительны, не волнуйтесь, Вы всё равно сможете следовать логике. Если Вам нужен будет совет или подсказка, напишите об этом в комментариях, и мы постараемся помочь.

Как использовать AJAX

Один из способов, которые мы использовали ещё в старые добрые времена, заключается в том, чтобы просто подключить файл wp-load.php к Вашему PHP-скрипту. Это позволит Вам использовать функции WordPress, определять текущего пользователя и так далее. Но по сути это хак, и прямо скажем, не лучшее решение. Этот способ не безопасен и не предоставляет Вам такие интересные варианты, которые предлагает система WordPress.

Как AJAX работает в WordPress

AJAX уже используется в движке WordPress и готов для работы. Всё, что от Вас требуется – использовать доступные функции. Давайте сначала посмотрим на этот процесс в общих чертах, прежде чем погрузиться в код.

Каждый AJAX-запрос проходит через файл admin-ajax.php, который находится в папке wp-admin. Пусть название файла Вас не сбивает с толку.

Каждый запрос должен передавать (используя метод GET или POST) информацию о выполняемом действии. Исходя из этого действия, код в файле admin-ajax.php создаёт два хука, wp_ajax_my_action и wp_ajax_nopriv_my_action, где my_action – переменная GET или POST, в которой хранится информация о действии.

Первый хук предназначен для авторизованных пользователей, а второй для неавторизованных.

Интеграция AJAX в WordPress

Давайте создадим элементарную систему голосования в качестве примера. Для начала создайте пустой плагин и активируйте его. Если Вам нужна помощь с этой частью, то прочитайте этот урок Как создать плагин для WordPress. После найдите файл single.php Вашей темы и откройте его.

Подготовка для выполнения AJAX-запроса

Давайте создадим ссылку, которая позволит посетителям голосовать за Ваши посты. Если в браузере посетителя включён JavaScript, то он будет использован; иначе – будет совершен переход по ссылке. В файле single.php где-то возле заголовка поста добавьте следующий фрагмент кода:

Сначала мы получим количество голосов текущего поста с помощью функции get_post_meta. Если функция нам вернёт пустую строку (в случае, если голосов ещё не было), то покажем пользователям нуль.

Мы создали простую ссылку с единственным небольшим дополнением. Мы используем nonces в целях безопасности для предотвращения атак и ошибок. Иначе это была бы самая обычная ссылка, указывающая на файл admin-ajax.php и передающая через GET-параметры информацию о действии для выполнения и идентификатор поста.

Для удовлетворения посетителей с включенным JavaScript, мы добавили класс user_vote, к которому мы прикрепили событие (клик левой кнопкой мыши) и параметр data-post_id, содержащий идентификатор поста. Это поможет нам передать необходимую информацию в JavaScript-код.

Обработка события без JavaScript

Если Вы нажмёте на ссылке сейчас, то будете переадресованы к скрипту admin-ajax.php, который выведет на экран “-1”. Давайте, это исправим!

В своём плагине создайте функцию и добавьте её в новые хуки, которые недавно были созданы. Вот так:

Прежде всего, мы выполняем проверку с помощью nonce, чтобы убедиться в безопасности выполнения запроса. Если что-то не так, мы останавливаем скрипт. Иначе мы двигаемся дальше и получаем количество голосов из базы данных. Если голосов ещё не было, то установим значение переменной vote_count равное 0. После этого добавим 1 к количеству голосов.

Используя функцию update_post_meta, обновим количество голосов соответствующего поста. Эта функция создаёт мета-данные поста, если их ещё нет. Она возвращает true в случае успешного выполнения и false при возникновении ошибки. Мы создадим массив для обоих случаев.

Нам нравится использовать массив для хранения конечных результатов. Это позволяет стандартизировать обработку этих результатов и облегчить отладку ошибок.

Этот массив хранит только тип конечного результата (ошибка или успешное выполнение) и количество голосов. В случае ошибки используется старое количество голосов, т.к. новый голос не был добавлен. А если же предыдущие действия выполнились успешно, то мы учитываем новый голос.

В завершении функции мы определяем, каким образом было вызвано действие – используя стандартный подход или AJAX-запрос. Если использовался AJAX, то подготовим массив для JavaScript-кода с помощью функции json_decode. В противном случае мы просто перенаправляем пользователя на страницу, с которой он пришёл.

Всегда заканчивайте выполнение своих скриптов функцией die, чтобы быть уверенным в корректности результатов. Иначе вместе с результатами Вы будете получать строку "-1".

Функция для обработки действий неавторизованных пользователей очень проста. Вы можете её расширить, перенаправляя пользователя на страницу регистрации или отображая больше полезной информации.

Подключение JavaScript

Теперь, когда мы настроили обработку пользовательских действий, используя стандартные методы, давайте перейдём к JavaScript. Многие разработчики предпочитают именно этот метод из-за его изящности. Для того чтобы наша система использовала AJAX, нужно подключить библиотеку jQuery и сам JavaScript-код. Чтобы сделать это, добавьте следующий фрагмент кода в Ваш плагин:

Таким способом в WordPress подключаются внешние файлы. Сначала мы регистрируем файл JavaScript, чтобы WordPress знал о нём (убедитесь в том, что файл создан и находится в папке с плагином). Первый аргумент функции wp_register_script – уникальный идентификатор нашего скрипта. Второй – путь к скрипту. Третий – массив зависимостей.

Нашему скрипту будет необходима библиотека jQuery, поэтому мы добавили её, как зависимость. jQuery уже зарегистрирован в WordPress, поэтому всё, что нужно было сделать – указать уникальный идентификатор.

Локализация скрипта не обязательна, но это хороший способ объявить переменные, которые мы будем использовать. Мы указываем идентификатор скрипта в качестве первого аргумента. В качестве второго – имя объекта. А в качестве третьего можно указать свойства объекта. Мы делаем это для того, чтобы можно было использовать свойство myAjax.ajaxurl, содержащее URL-адрес файла admin-ajax.php.

После того, как наши скрипты зарегистрированы, их можно добавить к страницам, используя функцию wp_enqueue_script. При этом не обязательно соблюдать правильный порядок, WordPress позаботится об этом, опираясь на указанные Вами зависимости.

Затем добавьте следующий код в файл my_voter_script.js:

Давайте вернёмся к основам. Это будет полезно для тех, кто впервые сталкивается с AJAX и пока не понимает, что происходит во фрагменте кода выше. Если пользователь нажимает на кнопку голосования без включенного JavaScript, то запускается нужный PHP-скрипт и данные передаются с помощью GET-метода. Если JavaScript включен, происходит всё почти тоже самое, однако с использованием AJAX и без перезагрузки страницы.

Функция my_user_vote, объявленная в нашем плагине, обработает предоставленные ей данные и вернёт нам результат, закодированный в формате JSON. Благодаря тому, что данные возвращаются к нам именно в формате JSON, мы можем сразу же работать с ними, как с JavaScript объектом без лишних действий.

Вот что происходит в нашем примере: счётчик количества проголосовавших меняет своё значение, и новое количество голосов отображается пользователю. В реальности нам бы следовало добавить информацию о том, что всё прошло успешно и сообщить об этом проголосовавшему. Кроме того, использовать функцию alert для сообщения об ошибке было бы очень некрасиво, придумайте что-то менее раздражающее на свой вкус.

Выводы

На этом мы заканчиваем это краткое руководство по использованию AJAX в WordPress. В нашем примере ещё многое может быть сделано, но главная цель выполнена – показать Вам, как правильно использовать технологию AJAX в своих плагинах WordPress. Напомним, что это делается в четыре шага:

1. Создаём AJAX-запрос;
2. Создаём функцию, которая будет обрабатывать этот запрос;
3. Добавляем функцию в хук, который был специально создан;
4. Создаём обработчики результатов.

Как уже было сказано ранее, обязательно убедитесь в том, что всё отлично работает без включенного JavaScript. Ведь нужно, чтобы голосование корректно работало для пользователей, у которых JavaScript отключен.

Имейте ввиду, что используя хуки, можно без проблем связывать существующие в WordPress функции с нашими AJAX-запросами. Именно это, в сочетании с лёгкостью в использовании, делает систему обработки AJAX-действий в WordPress очень мощным и удобным инструментом для разработчика.