Добавление Ajax к вашим плагинам WordPress

Веб-разработка стала незаменимой частью создания сайтов, и Ajax одна из самых популярных технологий, которая используется для создания более динамичного пользовательского опыта.​ В этой статье мы рассмотрим, как добавить поддержку Ajax в ваши плагины WordPress.​

Что такое Ajax?​

Ajax (Asynchronous JavaScript and XML) – это набор технологий, позволяющих обновлять содержимое веб-страницы без перезагрузки всей страницы.​ Вместо этого, Ajax позволяет обмениваться данными с сервером в фоновом режиме.​ Это позволяет создавать более отзывчивые и интерактивные пользовательские интерфейсы;

Ajax в плагинах WordPress

WordPress предоставляет встроенные функции и API для поддержки Ajax в ваших плагинах.​ Вот несколько примеров, как можно использовать Ajax в своих плагинах WordPress⁚

1. Загрузка динамического содержимого без перезагрузки страницы.​
2. Отправка данных на сервер без перезагрузки страницы (например, формы обратной связи).​
3. Обновление данных на странице без перезагрузки страницы.​

Шаги для добавления Ajax в плагин WordPress

Вот несколько шагов, которые необходимо выполнить, чтобы добавить Ajax в ваш плагин WordPress⁚

Шаг 1⁚ Подключение jQuery

Для работы с Ajax в WordPress, вам необходимо подключить jQuery JavaScript библиотеку.​ Для этого, вы можете использовать следующий код внутри вашего плагина⁚

function load_scripts {
  wp_enqueue_script('jquery');
}

add_action('wp_enqueue_scripts', 'load_scripts');

Этот код будет автоматически подключать jQuery библиотеку на каждой странице вашего плагина WordPress.​

Шаг 2⁚ Создание Ajax обработчика

Вам необходимо создать Ajax обработчик в вашем плагине WordPress.​ В этом обработчике будет обрабатываться ваш Ajax запрос.​ Вот пример⁚

add_action('wp_ajax_my_action', 'my_ajax_function');
add_action('wp_ajax_nopriv_my_action', 'my_ajax_function');
function my_ajax_function {
  // Ваш код обработки Ajax запроса здесь

  // Возвращение данных клиенту
  echo json_encode($response);

  // Остановка выполнения скрипта
  wp_die;
}

Вы должны заменить ‘my_action’ на уникальный идентификатор для вашего Ajax запроса, а ‘my_ajax_function’ на имя вашей функции обработчика.​

Шаг 3⁚ Отправка Ajax запроса

Теперь вы можете отправлять Ajax запросы с помощью JavaScript кода на клиентской стороне. Вот пример, как это можно сделать⁚

jQuery(document).​ready(function($) {
  var data = {
    action⁚ 'my_action',
    // Дополнительные данные, если требуется
  };
  $.​post(ajaxurl, data, function(response) {
    // Обработка ответа от сервера
  });
});

Вы используете $.​post метод из jQuery библиотеки, чтобы отправить Ajax запрос на сервер.​ Параметр ‘ajaxurl’ является встроенной переменной WordPress, которая указывает на URL-адрес Ajax обработчика.​

Добавление Ajax функциональности к вашим плагинам WordPress может значительно улучшить пользовательский опыт.​ WordPress предоставляет встроенные функции и API, которые помогают сделать это процесс очень простым.

Использовать AJAX на вашем сайте WordPress проще, чем вы думаете. Данные могут быть представлены и восстановлены с помощью jquery. Взаимодействие с WordPress осуществляется с помощью специальных действий WordPress Ajax, которые могут обрабатываться на стороне сервера.

Действия Ajax обычно выполняются после отправки формы или нажатия кнопки. Это позволяет отправлять данные на сервер для обработки. В качестве примера рассмотрим следующий фрагмент кода

Используя наш друг jquery, мы отправляем эти данные на сервер и получаем ответ. В WordPress все AJAX-запросы отправляются на обработку в файл Admin-Ajax.php. Этот файл находится в папке /WP-Admin вашего сайта WordPress. Этот файл находится в панели администратора сайта, но его можно использовать для обработки взаимодействий как на стороне клиента, так и на стороне сервера.

Параметры действия

В предыдущем примере параметр действия SPYR_PLUGIN_DO_AJAX_REQUEST отвечает за связь между JavaScript файлом и PHP кодом. Рекомендуется, чтобы все действия, включая текущее, имели префикс. Таким образом, они будут уникальными и легко узнаваемыми. Это выглядит так, как будто это место в плагине WordPress.

Отдельные действия WordPress AJAX

Существует два отдельных действия WordPress AJAX. Первое — это действие WP_AJAX_ $, которое обрабатывает AJAX-запросы, когда пользователь подключен. Второй — действие WP_AJAX_NOPRIV_ $, которое обрабатывает AJAX-запросы, когда пользователь не подключен и не имеет прав.

Исходя из предыдущих примеров, эти энергетические вызовы должны быть добавлены к добавке следующим образом

Теперь, когда вы знакомы с основными принципами взаимодействия с событиями Ajax с помощью WordPress, давайте рассмотрим практический пример. Давайте создадим простую добавку, которая позволит менеджеру удалить определенную запись на стороне клиента.

Плагин AJAX для удаления записей

Теперь вы можете приступить к созданию демо-плагина для удаления записей AJAX. Поскольку цель этой статьи — дать представление о внутренней работе Ajax-приложения, это позволит получить много информации, не перегружая вас лишними подробностями. Наш плагин состоит из:.

• Добавление файла JavaScript в банк действий Ajax, и
• Добавьте ссылку на каждую регистрацию. Это позволит удалить регистрацию при нажатии, и
• Обработка AJAX-запросов к PHP, и
• Нажмите на кнопку jquery для редактирования и
• Добавьте кучу действий в очередь обработки.

Безопасность всегда стоит на первом месте. Поэтому необходимо убедиться, что текущий пользователь имеет достаточные права для отображения ссылки ‘delete’. Вам также необходимо убедиться, что вы имеете дело с одной записью. В противном случае нет смысла добавлять ссылку «удалить».

Если оба условия выполнены, переходите к процессу создания сценария, который включает код JavaScript, обрабатывающий то, что происходит после нажатия на ссылку. Обратите особое внимание на то, как протокол используется на клиентской стороне сайта.

Следует проводить политику «Аякса». В соответствии с этим, запросы и ответы должны иметь одинаковое происхождение. Все запросы и ответы AJAX должны обрабатываться в одной и той же области, а протокол должен быть последовательным.

WordPress позволяет настроить протокол https в панели администратора сайта, установив параметр ‘FORCESSLADMIN’ в значение ‘true’ в файле конфигурации WordPress. Отправка запроса с http://example.com/sample-post/ на https://example.com/wp-admin/admin-ajax.php не сработает. Вы можете установить https:// на стороне сервера и по-прежнему вызывать admin-ajax.php без https://.

Наконец, последняя важная строка кода генерирует динамические переменные, используемые ajax-delete-posts.js.

Добавление ссылок на удаление в содержимое страницы

Коротко и ясно. Снова проверьте права доступа и убедитесь, что запись только одна. Это необходимая мера безопасности, и вы должны привыкнуть к ней. Затем создайте nonce и свяжите его с действием — обратите внимание на специальный формат.

Используйте следующую структуру, prefix_plugin-action-identifier. Где prefix — spyr, adp = Ajax Delete Post, action — действие по удалению, а identifier — идентификатор удаляемого сообщения. Это не обязательно, но этот формат рекомендуется при компиляции плагина.

Обратите внимание, что идентификатор сообщения и пароль также добавляются к ссылке с помощью атрибутов данных HTML5. Последний шаг — прикрепить сгенерированную ссылку к содержимому страницы.

Обработка запросов Ajax с помощью PHP и WordPress

Эта статья уже на полпути. Далее мы рассмотрим код, который обрабатывает отображение Ajax-запросов. Рассмотрите это внимательно, так как это зависит от вызова данных, представленных запросом JQuery, для получения идентификатора записи ( pid ) и значения nonce.

spyr_adp_ajax_delete_post — это имя действия, переданного в ответ на запрос файла JavaScript. Это означает, что полное имя действия — wp_ajax_spyr_adp_ajax_delete_post. Идентификатор записи и значение nance также передаются в файл JavaScript и могут быть получены из $_REQUEST.

Создайте объект WP_Ajax_Response, который позволяет вернуть требуемый XML-ответ. Затем результат можно прочитать и манипулировать им с помощью JQuery.

Опять же, перед удалением записи необходимо убедиться, что пользователь является администратором и что значения nance совпадают. Для каждого сценария должен быть создан свой ответ, чтобы вы точно знали, была ли запись удалена.

Для обеспечения дополнительной обратной связи с пользователем может быть прикреплено короткое сообщение, объясняющее результат процесса. Наконец, ответ должен быть отправлен обратно в браузер для завершения работы. Не забывайте всегда завершать работу после выполнения Ajax-запроса.

Запрос отправляется на сервер для очень простой обработки.

В качестве примера сгенерированного XML-файла, полученного в ответе, рассмотрим следующее

JQuery обрабатывает нажатие кнопки.

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

Парсинг XML с помощью jQuery очень прост: используйте jQuery.find() для ссылки на XML элемента. Затем элемент разбирается с помощью jQuery.find(), как если бы вы пытались найти элемент в HTML-документе.

Заключение.

Как видите, выполнение Ajax-запросов в плагинах и темах WordPress — довольно простой процесс. В частности, благодаря двум специальным действиям wp_ wp_ajax_$action и wp_ajax_nopriv_$action этот процесс становится еще проще.

Это только начало удивительного путешествия, которое позволит вам создать код, устраняющий перезагрузку страниц и делающий темы и плагины WordPress более интерактивными. Что бы вы хотели сделать с ним дальше?

Для получения дополнительной информации по этой теме смотрите раздел Код WordPress для Ajax и Ajax в плагинах.

AJAX виджет с заметками в админке WordPress — практика создания плагинов