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 id="the-empty-div"></div>

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

jQuery( document ).ready( function($) {
    $( '#the-empty-div' ).html( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a tortor quam...' );
});

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

Как?

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

    jQuery(document).ready(function($) {
     
        $.ajax({
            type: "POST", // use $_POST method to submit data
            url: 'http://end-point-url-to/process-ajax-request.php', // where to submit the data
            data: {
                first_name : 'John', // PHP: $_POST['first_name']
                last_name  : 'Cena', // PHP: $_POST['last_name']
            },
            success:function(data) {
                console.log(data); // the HTML result of that URL after submit the data
            },
            error: function(errorThrown){
                console.log(errorThrown); // error
            }
        });  
                  
    });

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

    <form action="http://end-point-url-to/process-ajax-request.php" method="post">
        <input type="text" name="first_name" value="John">
        <input type="text" name="last_name" value="Cena">
        <input type="submit" value="Submit">
    </form>

 

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

    <?php
    $first_name = isset( $_POST['first_name'] ) ? $_POST['first_name'] : 'N/A';
    $last_name = isset( $_POST['last_name'] ) ? $_POST['last_name'] : 'N/A';
    ?>
    <p>Hello. Your first name is <?php echo $first_name; ?>.</p>
    <p>And your last name is <?php echo $last_name; ?>.</p>
    <?php
    die(); // required. To let AJAX know to end the request.

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

    <p>Hello. Your first name is John.</p>
    <p>And your last name is Cena.</p>

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

    $.ajax({
        type: "POST", // use $_POST method to submit data
        url: 'http://end-point-url-to/process-ajax-request.php', // where to submit the data
        data: {
            first_name : 'John', // PHP: $_POST['first_name']
            last_name  : 'Cena', // PHP: $_POST['last_name']
        },
        success:function(data) {
            $( '#the-empty-div' ).html( data ); // add HTML results to empty div
        },
        error: function(errorThrown){
            $( '#the-empty-div' ).html( '<p>Error retrieving data. Please try again.</p>' );
        }
    });

WordPress и AJAX

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

AJAX URL

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

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

http://your-site.com/wp-admin/admin-ajax.php

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

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

$ajax_url = admin_url( 'admin-ajax.php' );

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

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

    $.ajax({
        url: ajaxurl, // where to submit the data
    });

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

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

    wp_enqueue_script( 'my_script_handle', MY_JS_URL, array( 'jquery' ) );
    wp_localize_script( 'my_script_handle', 'my_ajaxurl', admin_url( 'admin-ajax.php' ) );

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

    $.ajax({
        url: my_ajaxurl, // where to submit the data
    });

AJAX Action

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

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

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

Вот пример:

    $.ajax({
        url: my_ajaxurl,
        data: {
            action     : 'my_ajax_action', // load function hooked to: "wp_ajax_*" action hook
            first_name : 'John',           // PHP: $_POST['first_name']
            last_name  : 'Cena',           // PHP: $_POST['last_name']
        },
    });

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

    /* Load Ajax Callback to "wp_ajax_*" Action Hook */
    add_action( 'wp_ajax_my_ajax_action', 'my_ajax_action_callback' );
     
    /**
     * Ajax Callback
     */
    function my_ajax_action_callback(){
        $first_name = isset( $_POST['first_name'] ) ? $_POST['first_name'] : 'N/A';
        $last_name = isset( $_POST['last_name'] ) ? $_POST['last_name'] : 'N/A';
        ?>
        <p>Hello. Your First Name is <?php echo $first_name; ?>.</p>
        <p>And your last name is <?php echo $last_name; ?>.</p>
        <?php
        wp_die(); // required. to end AJAX request.
    }

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

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

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

    add_action( 'wp_ajax_my_ajax_action', 'my_ajax_action_callback' );
    add_action( 'wp_ajax_nopriv_my_ajax_action', 'my_ajax_action_callback' );

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

    /* Load Ajax Callback to "wp_ajax_nopriv_*" Action Hook */
    add_action( 'wp_ajax_nopriv_my_ajax_action', 'my_ajax_action_logged_out_user_callback' );
     
    /**
     * Ajax callback for logged-out user:
     */
    function my_ajax_action_logged_out_user_callback(){
        ?>
        <p>Please log in.</p>
        <?php
        wp_die(); // required. to end AJAX request.
    }

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

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

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

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

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