WP Экспресс

WordPress AJAX для новичков

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

Чтоб воспользоваться этой инструкцией, вам нужно знать что такое:

  • Простой  jQuery / JavaScript
  • Простой  PHP
  • Как работают формы
  • Register Script и Enqueue Script в WordPress
  • Шорткод Register WordPress (плагин-пример)

Что такое AJAX?

С помощью JavaScript/jQuery мы можем управлять элементами DOM/HTML. Но мы можем просто добавлять данные,  доступные в DOM, или  же код с помощью собственно JavaScript.

AJAX – это «мостик» для передачи данных от PHP к DOM без необходимости перезагружать страницу. К примеру, мы можем выдергивать данные с сервера (используя PHP), когда пользователь кликает кнопочку или прокручивает страницу…

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

Пример:

Я создаю пустой div:

И я хочу добавить немного текста-заполнителя внутрь этого пустого div. Я могу спокойно сделать это с помощью jQuery:

Так, из кода-примера наверху, мне нужно написать текст-заполнитель в JavaScript-коде. А что если текст это «контент поста» или «пользовательские данные», которые динамически изменяются в базе данных? Решение – это использование AJAX.

Как?

Используя AJAX, мы можем отправлять данные, используя метод POST или  GET (как в форме) для (конечной точки) URL и просмотра контента этого URL в качестве результата ЗАПРОСА

Чтоб вам проще было понять код  AJAX, приведенный ниже, скажем, что он  похож на HTML-форму:

 

И в этой конечной точке файл “process-ajax-request.php” мы можем использовать этот маленький PHP-скрипт, чтоб отобразить нужное содержимое:

И он отобразит этот текст в качестве финального результата запроса:

И если мы хотим отобразить HTML-вывод данных в пустом боксе, используя AJAX, мы можем сделать это, применив AJAX “успешный” метод:

WordPress и AJAX

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

AJAX URL

WP предоставляет великолепную поддержку AJAX, уже встроенного  в админ-страницу. URL/файл для исполнения  AJAX запросов в WordPress  — это  “admin-ajax.php”, и находится он в папке “wp-admin”.

Так что URL  этого файла выглядит примерно так:

Но, поскольку мы можем устанавливать  WordPress в виде всевозможных инсталляциях (например, инсталляция в виде подкатегории), этот URL не всегда выглядит, как путь, прописанный выше. Так что все зависит от того, как выглядит ваша WordPress-инсталляция.

Мы можем получить правильный URL, используя эту функцию:

Как вставить URL файла  “admin-ajax.php” в JavaScript?

В любом месте админ страниц/экрана доступна  глобальная переменная JavaScript “ajaxurl”. Так что если вы используете AJAX на административном экране, мы можем сделать это следующим образом:

Как насчет фронтенда (не административной области)?

Если мы говорим о фронтенде, мы можем использовать wp_localize_script(), чтоб сделать этот URL доступным  в качестве JavaScript-переменной.

И затем мы можем использовать переменную типа этой в вашем JavaScript:

AJAX Action

Следующий шаг заключается в создании PHP-функции,  необходимой для запуска  WordPress AJAX-запроса

WordPress использует единичный файл  “admin-ajax.php” для всего, что связано с AJAX. Чтоб идентифицировать каждый запрос и отреагировать на него правильным результатом/данными  WP использует переменную “action” , отсылая данные в качестве уникального идентификатора и загружая экшн-хук, основываясь на action-запросе.

Так что в файле “admin-ajax.php” WordPress загрузит функцию, в основе которой лежит запросный экшн, основанный на экшн-хуке.

Вот пример:

Так, для этого AJAX, мы можем показать результат в PHP –функции, используя wp_ajax_*экшн-хуки, как здесь:

На самом деле WordPress  имеет два экшн-хука для AJAX-возврата:

  1. wp_ajax_* (тот же, что и выше): для авторизованного пользователя
  2. wp_ajax_nopriv_* :для не авторизованного пользователя.

Так, если вы хотите отобразить один и тот же результат для авторизованных и не авторизованных пользователей, мы можем использовать это (просто используйте ту же callback-функцию для обоих хуков):

Но, мы также можем отобразить отличные сообщения (или ссылку авторизации) для авторизованного пользователя, вот так:

Если вы используете WordPress AJAX в админ-панели, вам просто нужно использовать “wp_ajax_*” –хук, потому что не авторизованные пользователи просто не могут посетить админ-панель. Но если вы используете AJAX во фронтенде и для пользователя, и для посетителя (например, для отображения  контента записи), вам нужно использовать оба хука —  “wp_ajax_*” и “wp_ajax_nopriv_*”.

Вы можете делать все, используя callback-функцию

  • Вы можете загрузить запись, используя “wp_query”
  • Вы можете возвращать опции, используя “get_option()”
  • Вы можете получать метаданные записи, сохранить их и т. д.

Вы можете протестировать этот простой шорткод-плагин, используя код, данный выше:

Сделать это очень просто. Создаем запись, добавляем шорткод  [john-cena] внутрь нее, публикуем и видим результат.

Related Articles

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Close