Создание простого плагина с ajax на wordpress

В данном посте будет пошагово описано как создать простейший плагин для wordpress с аяксом.
Собственно вся соль в ajax — так как есть пара тонких мест. Разобьем руководство на две части, в первой опишем просто создание минимального плагина, а во второй части как добавить асинхронный вызов ajax

Часть 1 — создание базового плагина

шаг 1. создать папку с названием плагина в директории wp-content/plugins , например simple-ajax
шаг 2. создать php файл в созданной директории simple-ajax.php и написать туда следующее:

/*
Plugin Name: Simple Ajax WordPress Plugin
Plugin URI: http://zabaykin.ru
Description: Visualization of assistant invoice API
Version: 1.0.0
Author: zabaykin
Author URI: http://zabaykin.ru/
*/

После этого шага уже можно идти в панели администраторов в раздел плагины и активировать плагин.
шаг 3. Создаем функцию base_plugin

function base_plugin() {
    ob_start();
    echo "< button id='ajax_button' >press for ajax< /button >";
    return ob_get_clean();
}

шаг 4. Регистрируем созданную функцию в wordpress с помощью специальной функции

add_shortcode( 'base_plugin_shortcut', 'base_plugin' );

Разумеется, название может быть абсолютно другое, суть именно в регистрации shortcode вордпреса
шаг 5. Создаем новую страницу в панели администратора и в месте где понадобится плагин — пишем прямо в тексте [base_plugin_shortcut] . После сохранения можно открыть созданную страницу и убедиться, что конопка появилась. Таким образом первая часть создания плагина завершена, далее добавляем ajax.

Часть 2 — Асинхронный вызов ajax в wordpress

шаг 1. Для аякса понадобится javascript, поэтому рядом с файлом simple-ajax.php создадим файл simple-ajax.js со следующим содержимым:

jQuery(document).ready(function ($) {
    $('#ajax_button').click(function(){
        $.ajax({
            method: "POST",
            url: simple_ajax_url_obj.ajax_url,
            dataType: "json",
            data: {
                action: 'get_ajax_response'
            }
        })
            .done(function (data) {
                console.log('YES!!')
                console.log(data);
            })
            .fail(function (data) {
                console.log('ERROR')
                console.log(data);
            });
    })
});

шаг 2. Созданный javascript файл надо подключить, поэтому обновим нашу базовую функцию, дополнив её следующими строками:

function base_plugin() {
    ob_start();
    echo "< button id='ajax_button' >press for ajax< /button >";
    
    # ajax
    wp_enqueue_script( 'simple-ajax', plugins_url( '/simple-ajax.js', __FILE__ ), array('jquery'), '1.2', true );
    wp_localize_script( 'simple-ajax', 'simple_ajax_url_obj', array( 'ajax_url' => admin_url('admin-ajax.php')) );
    return ob_get_clean();
}

Небольшое пояснение, с помощью функции wp_enqueue_script регистрируем скрипт, указываем путь до него и указываем зависимости. В нашем случае будет использоваться jquery, поэтому укажем минимальную версия 1.2 . После регистрации скрипта, необходимо создать объект javascript , в котором будет прописан URL для ajax. Это как раз делается с помощью wp_localize_script — создается объект simple_ajax_url_obj и указывается url до php скрипта. Про action расскажем чуть ниже.
шаг 3. Также обязательно понадобятся php функция — обработчик ajax

function get_ajax_response(){
    echo "ajax base plugin for wordpress works fine!"
    wp_die();
}

Обязательно заканчивайте аяксовую функцию с помощью wp_die
шаг 4. Регистрация экшена в php. Помните в javascript был указан action: ‘get_ajax_response’ ? Пришло время его объявить и связать с php функцией. Это делается с помощью следующих двух функций

add_action( 'wp_ajax_get_ajax_response', 'get_ajax_response' );
add_action( 'wp_ajax_nopriv_get_ajax_response', 'get_ajax_response' );

Если не указать wp_ajax_nopriv — то запросы смогут делать только авторизованные пользователи. Поэтому если хотим чтобы все могли делать аяксовый запрос — необходимо добавить часть с nopriv.
Стоит отметить, что практически все запросы ajax (и с фронтенда и с бекенда) идут через административную часть admin-ajax.php, поэтому если действия подразумевают администрирование — то надо чтобы wp_ajax_nopriv_(action) хук был всегду обрамлен is_admin() === true для безопасности.

Таким образом, по нажатию кнопки в консоли браузера (консоль вызываетмся кнопкой F12) будет отображено «ajax base plugin for wordpress works fine!» И данное сообщение уведомит о том, что ваш плагин с аяксом для вордпреса работает.