AJAX в WordPress. Как создать?

Введение

На ajax запросах строится любое нормальное web приложение. Не использовать ajax запросы — моветон, ибо рано или поздно бесконечные перезагрузки страницы начинают бесить. А иногда без использования ajax-запроса просто невозможно выполнить задачу.

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

Пойдем по порядку PHP -> HTML -> JS -> CSS.

PHP обработчик

Для выполнения нужна верси php 7.0+;
Для начала напишем php функцию для обработки нашего запроса. Вот ее общий вид:
Будем использовать массив $actions, что бы положить в него сразу список функций — ajax обработичков, если нам потребуются дополнительные.

$actions = [
    'ajax_get_clients'
];
foreach ($actions as $action) {
    add_action('wp_ajax_' . $action,        $action, 10, 1);
    add_action('wp_ajax_nopriv_' . $action, $action, 10, 1);
}

/**
 * AJAX handler
 * @return void
 */
function ajax_get_clients(){
    $nonce = $_REQUEST['nonce'] ?? null;
    $data  = $_REQUEST['data'] ?? null;

    if(!wp_verify_nonce($nonce, 'ajax')){
        trigger_error('verify failed');
        wp_send_json_error();
    }

    // do something
    $result = true || false;
    if($result){
        wp_send_json_success($result);
    }

    wp_send_json_error($result);
}

Суть работы функции в том что нам поступает запрос, данные мы берем из глобальной переменной

$_REQUEST

или $_POST, $_GET если мы точно значем тип запроса.
Проверяем, что запрос пришел с нашего сервера, через wp_verify_nonce и отправляем ответ в JSON виде, с помощью специальной функции из ядра wp.

HTML

В этом блоке нам надо вывести кнопку, по которой будет отправляться запрос на сервер. Вывести ее можно в любом месте. Но для проверки мы выведем ее в Dashboard(Консоль администратора) WP.
Для этого нам снова потребуется создать виджет через PHP код.

add_action('wp_dashboard_setup', function () {
    if (!current_user_can('manage_options')) {
        return;
    }
    wp_add_dashboard_widget(
        'ajax',
        __('AJAX', 'wp'),
        function () { ?>
            <button type="button" class="ajax button button-primary" data-action="ajax_get_clients"
                    data-nonce="<?= wp_create_nonce('ajax') ?>"> Кнопка AJAX
            </button> <?
        }
    );
});

Создаем виджет через специальный экшен, проверяем права пользователя и выводим виджет с содержимым через неименованную функцию.
В содержимом выводится только кнопка. В ее data параметры пишем код серверной верификации и название экшена — ajax обработчика в php.

JS скрипт

Скрипт можно вывести отдельно, как положено через хук.
Но я предпочитаю по колхозному, сразу после кнопки в разрыв php кода.
Суть js простая, мы отслеживаем клик по кнопке с классом ‘ajax’ после этого добавляем класс ‘loading’
и выполняем запрос на сервер в PHP обработчик, который мы написали выше.

jQuery(document).ready(function ($) {
    $('.ajax').on('click', function (event) {
        // 1. прерываем возможный переход
        event.preventDefault();
        let $this = $(this).removeClass('success').removeClass('error').addClass('loading'); 
        // 2. Добавляем индифктаор загрузки
        // 3. Отправляем ajax-запрос на сайт. В параметр data можем еще что-то положить.
        $.ajax({
            type: 'POST',
            url: '/admin-ajax.php',
            data: {
                'action': $(this).data('action'), 
                'data': {}, // данные, которые нужно передать
                'nonce': $(this).data('nonce')
            },
            success: function (response) {
                console.log('ajax', response);
                if (response.success) {
                    $this.removeClass('loading').addClass('success');
                } else {
                    $this.removeClass('loading').addClass('error');
                }
            },
        });
    });
});

Стоит отметить, что в данном примере не прописан вариант сценария с некорректным ответом самого сервера, предполагается, что сервер отдаст 200 ответ.

CSS оформление

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
.ajax::before {
  font-family: dashicons;
  display: inline-block;
  vertical-align: middle;
  transition: 0.5s;
  background-size: contain;
  font-size: 18px;
  line-height: 1;
  margin-right: 2px;
}

.ajax.loading::before {
  content: "\f113";
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

.ajax.error::before {
  content: "\f335";
}

.ajax.success::before {
  content: "\f147";
}

Добавим индикацию загрузки для красоты.

Если объединить все это в PHP класс и применить ООП

Получится что-то вроде этого, универсальный клас для добавления AJAX функций в WP.