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

Введение

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

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

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

PHP обработчик

Для начала напишем php функцию для обработки нашего запроса. Вот ее общий вид:

$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'];
    $data  = $_REQUEST['data'];

    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,
проверяем, что запрос пришел с нашего сервера и отправляем ответ в виде JSON.

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> <?
        }
    );
});

JS скрипт

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

jQuery(document).ready(function ($) {
    $('.ajax').on('click', function (event) {
        event.preventDefault();
        let $this = $(this).removeClass('success').removeClass('error').addClass('loading');
        $.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');
                }
            },
        });
    });
});

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";
}

 

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