Как создать настройку с AJAX в плагине WordPress

В современных плагинах WordPress часто требуется создавать интерфейсы настроек, которые обновляются без перезагрузки страницы. Для этого используется AJAX — технология, позволяющая отправлять запросы на сервер асинхронно. В этой статье мы подробно разберём, как создать собственную настройку с поддержкой AJAX в плагине WordPress на примере конкретного кода.

Что такое AJAX в WordPress и зачем он нужен

AJAX (Asynchronous JavaScript and XML) — метод отправки и получения данных с сервера без перезагрузки страницы. В контексте WordPress это позволяет улучшить пользовательский опыт при работе с настройками плагина, формами, таблицами и другими интерактивными элементами.

Использование AJAX даёт несколько преимуществ:

• Мгновенное обновление настроек без перезагрузки страницы.
• Снижение нагрузки на сервер и клиентскую часть.
• Возможность создавать более удобные и отзывчивые интерфейсы.

Давайте рассмотрим, как правильно реализовать такую настройку с помощью стандартизированного подхода WordPress.

Создание базового плагина с AJAX-настройкой

Начнём с простого плагина, который добавляет страницу настроек с полем ввода и кнопкой "Сохранить". При нажатии на кнопку значение поля будет сохранено через AJAX.

Шаг 1. Регистрация страницы настроек

Добавим страницу настроек в админ-панель:

add_action('admin_menu', 'wpmarket_add_settings_page');
function wpmarket_add_settings_page() {
    add_options_page('WPMarket AJAX Настройки', 'WPMarket AJAX', 'manage_options', 'wpmarket-ajax-settings', 'wpmarket_render_settings_page');
}

function wpmarket_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>Настройки с AJAX</h1>
        <label for="wpmarket_ajax_option">Введите значение:</label>
        <input type="text" id="wpmarket_ajax_option" value="<?php echo esc_attr(get_option('wpmarket_ajax_option', '')); ?>" />
        <button id="wpmarket_save_btn">Сохранить</button>
        <span id="wpmarket_ajax_message"></span>
    </div>
    <?php
}

Здесь мы создали страницу с полем и кнопкой, а также вывели текущее значение опции wpmarket_ajax_option.

Шаг 2. Подключение скрипта AJAX

Теперь добавим JavaScript для обработки клика по кнопке и отправки AJAX-запроса:

add_action('admin_enqueue_scripts', 'wpmarket_enqueue_admin_scripts');
function wpmarket_enqueue_admin_scripts($hook) {
    if ($hook !== 'settings_page_wpmarket-ajax-settings') return;

    wp_enqueue_script('wpmarket-ajax-script', plugin_dir_url(__FILE__) . 'js/wpmarket-ajax.js', array('jquery'), '1.0', true);
    wp_localize_script('wpmarket-ajax-script', 'wpmarketAjax', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('wpmarket_ajax_nonce')
    ));
}

В этом коде мы подключаем внешний JS-файл js/wpmarket-ajax.js и передаём в него URL для AJAX и nonce — защитный ключ.

Шаг 3. Создание JS-файла для обработки AJAX

Создадим файл js/wpmarket-ajax.js с таким содержимым:

jQuery(document).ready(function($) {
    $('#wpmarket_save_btn').on('click', function() {
        var value = $('#wpmarket_ajax_option').val();
        $('#wpmarket_ajax_message').text('Сохраняем...');

        $.ajax({
            url: wpmarketAjax.ajax_url,
            type: 'POST',
            data: {
                action: 'wpmarket_save_option',
                option_value: value,
                nonce: wpmarketAjax.nonce
            },
            success: function(response) {
                if(response.success) {
                    $('#wpmarket_ajax_message').text('Настройка сохранена!');
                } else {
                    $('#wpmarket_ajax_message').text('Ошибка: ' + response.data);
                }
            },
            error: function() {
                $('#wpmarket_ajax_message').text('Ошибка при запросе.');
            }
        });
    });
});

Этот скрипт отправляет POST-запрос на сервер с данными и nonce, показывает сообщения о статусе операции.

Шаг 4. Обработка AJAX-запроса на сервере

Добавим PHP-функцию, которая будет обрабатывать AJAX-запрос:

add_action('wp_ajax_wpmarket_save_option', 'wpmarket_ajax_save_option');
function wpmarket_ajax_save_option() {
    check_ajax_referer('wpmarket_ajax_nonce', 'nonce');

    if (!current_user_can('manage_options')) {
        wp_send_json_error('Нет прав для сохранения настроек');
    }

    if (!isset($_POST['option_value'])) {
        wp_send_json_error('Нет данных для сохранения');
    }

    $value = sanitize_text_field($_POST['option_value']);
    update_option('wpmarket_ajax_option', $value);

    wp_send_json_success();
}

Функция проверяет nonce и права пользователя, затем сохраняет значение в базу и возвращает результат.

Дополнительные советы и рекомендации по безопасности и удобству

При работе с AJAX в плагинах важно соблюдать несколько правил:

• Всегда проверяйте nonce для защиты от CSRF-атак.
• Проверяйте права пользователя, чтобы ограничить доступ.
• Обрабатывайте и очищайте входящие данные с помощью функций WordPress, например, sanitize_text_field(), esc_html().
• Добавляйте понятные сообщения об ошибках и успехах для пользователя.
• Используйте wp_localize_script() для передачи динамических данных в JavaScript.

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

Расширение функционала: сохранение нескольких настроек с AJAX

Если вам нужно сохранить несколько полей, структура AJAX-запроса и серверной обработки немного усложняется.

Например, HTML может содержать несколько элементов:

<input type="text" id="wpmarket_option1" value="" />
<input type="checkbox" id="wpmarket_option2" />

В JS собираем данные в объект:

var data = {
    option1: $('#wpmarket_option1').val(),
    option2: $('#wpmarket_option2').is(':checked') ? 1 : 0
};

И отправляем в AJAX-запросе. На сервере обрабатываем так:

$option1 = sanitize_text_field($_POST['option1']);
$option2 = isset($_POST['option2']) ? intval($_POST['option2']) : 0;
update_option('wpmarket_option1', $option1);
update_option('wpmarket_option2', $option2);

Такой подход легко масштабируется и подходит для сложных форм настроек.