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

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

Почему стоит использовать AJAX в настройках плагина WordPress

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

Кроме того, AJAX поможет вам реалистично отлавливать ошибки и сразу выводить сообщения пользователю, не заставляя его ждать обновления страницы.

В нашем примере мы создадим простой плагин, где пользователь может настроить ключ API и выбрать включение/отключение функции. Все данные будут сохранены через AJAX.

Создание страницы настроек плагина

Для начала создадим меню и страницу настроек WordPress. В файле плагина (например, wpmarket-settings.php) добавьте следующий код:

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

function wpmarket_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>Настройки WPMarket</h1>
        <form id="wpmarket-settings-form">
            <table class="form-table">
                <tr>
                    <th scope="row"><label for="wpmarket_api_key">API ключ</label></th>
                    <td><input name="wpmarket_api_key" type="text" id="wpmarket_api_key" value="" class="regular-text"></td>
                </tr>
                <tr>
                    <th scope="row">Включить функцию</th>
                    <td><input name="wpmarket_feature_enabled" type="checkbox" id="wpmarket_feature_enabled" value="1"></td>
                </tr>
            </table>
            <p class="submit">
                <button type="submit" class="button button-primary">Сохранить настройки</button>
            </p>
        </form>
        <div id="wpmarket-message"></div>
    </div>
    <?php
}

Этот код добавляет страницу настроек с двумя полями и кнопкой сохранения. Но пока что форма не работает.

Обработка сохранения настроек через AJAX

Добавим обработчик AJAX на сервере. Используем WordPress AJAX API и зарегистрируем два действия: для залогиненных и для гостей (если нужно). В нашем случае только для администраторов — залогиненных пользователей.

add_action('wp_ajax_wpmarket_save_settings', 'wpmarket_save_settings_callback');
function wpmarket_save_settings_callback() {
    // Проверяем права
    if (!current_user_can('manage_options')) {
        wp_send_json_error('Нет прав для сохранения настроек');
    }

    // Проверяем nonce
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'wpmarket_save_settings_nonce')) {
        wp_send_json_error('Ошибка безопасности');
    }

    // Получаем и санитизируем данные
    $api_key = isset($_POST['api_key']) ? sanitize_text_field($_POST['api_key']) : '';
    $feature_enabled = isset($_POST['feature_enabled']) && $_POST['feature_enabled'] === '1' ? '1' : '0';

    // Сохраняем в options
    update_option('wpmarket_api_key', $api_key);
    update_option('wpmarket_feature_enabled', $feature_enabled);

    wp_send_json_success('Настройки успешно сохранены');
}

Этот обработчик проверяет права пользователя, nonce для безопасности, затем сохраняет полученные данные в таблицу опций WordPress.

Подключение JavaScript для AJAX-запроса

Теперь добавим JavaScript, который будет отправлять данные формы без перезагрузки страницы. Подключим скрипт в админке:

add_action('admin_enqueue_scripts', 'wpmarket_admin_scripts');
function wpmarket_admin_scripts($hook) {
    if ($hook !== 'settings_page_wpmarket-settings') {
        return;
    }
    wp_enqueue_script('wpmarket-admin-js', plugin_dir_url(__FILE__) . 'admin.js', ['jquery'], null, true);
    wp_localize_script('wpmarket-admin-js', 'wpmarket_ajax', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpmarket_save_settings_nonce'),
    ]);
}

Создайте файл admin.js рядом с плагином и добавьте туда:

jQuery(document).ready(function($) {
    // Загружаем текущие настройки при загрузке страницы
    $.post(wpmarket_ajax.ajax_url, {
        action: 'wpmarket_load_settings',
        nonce: wpmarket_ajax.nonce
    }, function(response) {
        if (response.success) {
            $('#wpmarket_api_key').val(response.data.api_key);
            $('#wpmarket_feature_enabled').prop('checked', response.data.feature_enabled === '1');
        }
    });

    $('#wpmarket-settings-form').on('submit', function(e) {
        e.preventDefault();
        var apiKey = $('#wpmarket_api_key').val();
        var featureEnabled = $('#wpmarket_feature_enabled').is(':checked') ? '1' : '0';

        $.post(wpmarket_ajax.ajax_url, {
            action: 'wpmarket_save_settings',
            api_key: apiKey,
            feature_enabled: featureEnabled,
            nonce: wpmarket_ajax.nonce
        }, function(response) {
            var messageDiv = $('#wpmarket-message');
            if (response.success) {
                messageDiv.html('<div class="notice notice-success is-dismissible"><p>' + response.data + '</p></div>');
            } else {
                messageDiv.html('<div class="notice notice-error is-dismissible"><p>' + response.data + '</p></div>');
            }
        });
    });
});

Этот скрипт при загрузке страницы подгружает текущие значения настроек, а при отправке формы — отправляет данные AJAX-запросом и показывает сообщение об успехе или ошибке.

Загрузка текущих настроек AJAX-запросом

Для загрузки текущих настроек добавим еще один AJAX-обработчик:

add_action('wp_ajax_wpmarket_load_settings', 'wpmarket_load_settings_callback');
function wpmarket_load_settings_callback() {
    if (!current_user_can('manage_options')) {
        wp_send_json_error('Нет прав для загрузки настроек');
    }

    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'wpmarket_save_settings_nonce')) {
        wp_send_json_error('Ошибка безопасности');
    }

    $api_key = get_option('wpmarket_api_key', '');
    $feature_enabled = get_option('wpmarket_feature_enabled', '0');

    wp_send_json_success([
        'api_key' => $api_key,
        'feature_enabled' => $feature_enabled
    ]);
}

Итог и рекомендации

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

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

Если вам интересны готовые решения для создания интерфейсов и управления настройками, обратите внимание на WPRemark — мощный инструмент для расширенного взаимодействия с пользователем.