Как добавить автоматическое сохранение данных через AJAX в WordPress плагине

Автор: Анна Соколова | Опубликовано: 17.02.2026

Автоматическое сохранение данных (auto-save) — это удобная функция, которая повышает UX и снижает риск потери информации при работе с формами на сайте. Особенно актуальна она для сложных форм в админке или на фронтенде WordPress. В этой статье разберём, как добавить авто-сохранение через AJAX в собственный WordPress плагин с примерами кода и рекомендациями.

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

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

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

Примером может служить авто-сохранение пользовательских настроек, данных профиля или информации в кастомных формах.

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

Начнём с создания функции-обработчика AJAX в вашем плагине. Пусть ваш плагин называется wpplugin, значит функции будут с префиксом wpplugin_.

<?php
add_action('wp_ajax_wpplugin_auto_save_data', 'wpplugin_auto_save_data');
add_action('wp_ajax_nopriv_wpplugin_auto_save_data', 'wpplugin_auto_save_data');

function wpplugin_auto_save_data() {
    // Проверяем nonce для безопасности
    check_ajax_referer('wpplugin_auto_save_nonce', 'nonce');

    // Получаем данные из запроса
    $user_id = get_current_user_id();
    if (!$user_id) {
        wp_send_json_error('Пользователь не авторизован');
    }

    $data = isset($_POST['data']) ? sanitize_text_field(wp_unslash($_POST['data'])) : '';
    if (empty($data)) {
        wp_send_json_error('Данные не переданы');
    }

    // Сохраняем данные в user meta, можно заменить на свой механизм
    update_user_meta($user_id, 'wpplugin_auto_saved_data', $data);

    wp_send_json_success('Данные успешно сохранены');
}

В этом коде мы обрабатываем AJAX-запрос, проверяем nonce, получаем и очищаем данные, затем сохраняем их в мета пользователя. Можно адаптировать сохранение под посты, опции или свои таблицы.

Добавление JavaScript для отправки данных через AJAX

Чтобы регулярное автосохранение работало, нужно добавить скрипт, который будет отправлять данные на сервер. Пример для формы с полем textarea с id wpplugin-textarea:

<script type="text/javascript">
(function($){
    var autoSaveTimeout;
    var interval = 5000; // Интервал 5 секунд

    function wpplugin_auto_save() {
        var data = $('#wpplugin-textarea').val();
        $.ajax({
            url: wpplugin_ajax_object.ajax_url,
            type: 'POST',
            dataType: 'json',
            data: {
                action: 'wpplugin_auto_save_data',
                nonce: wpplugin_ajax_object.nonce,
                data: data
            },
            success: function(response) {
                if (response.success) {
                    console.log('Автосохранение: ' + response.data);
                } else {
                    console.warn('Ошибка автосохранения: ' + response.data);
                }
            },
            error: function() {
                console.error('AJAX ошибка при автосохранении');
            }
        });
    }

    $('#wpplugin-textarea').on('input', function(){
        clearTimeout(autoSaveTimeout);
        autoSaveTimeout = setTimeout(wpplugin_auto_save, interval);
    });
})(jQuery);
</script>

Этот скрипт следит за вводом в поле и запускает отправку данных на сервер через 5 секунд после последнего изменения. Таким образом, данные автоматически сохраняются без лишних запросов.

Для подключения скрипта рекомендуем использовать wp_enqueue_script и wp_localize_script с передачей nonce и URL для AJAX:

function wpplugin_enqueue_scripts() {
    wp_enqueue_script('wpplugin-autosave', plugins_url('/js/autosave.js', __FILE__), array('jquery'), '1.0', true);
    wp_localize_script('wpplugin-autosave', 'wpplugin_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpplugin_auto_save_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wpplugin_enqueue_scripts');

Пример использования авто-сохранения в кастомной форме

Допустим, вы хотите сделать форму на фронтенде, в которой пользователь вводит заметки. Добавим HTML код формы:

<form id="wpplugin-notes-form">
    <textarea id="wpplugin-textarea" name="notes" rows="10" cols="50" placeholder="Введите ваши заметки..."></textarea>
</form>

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

function wpplugin_print_saved_notes() {
    $user_id = get_current_user_id();
    if (!$user_id) return;

    $notes = get_user_meta($user_id, 'wpplugin_auto_saved_data', true);
    if ($notes) {
        echo '<script>document.getElementById("wpplugin-textarea").value = ' . wp_json_encode($notes) . ';</script>';
    }
}
add_action('wp_footer', 'wpplugin_print_saved_notes');

Безопасность и оптимизация авто-сохранения

Всегда проверяйте nonce в AJAX-запросах, чтобы защитить сайт от CSRF атак. Очищайте и валидируйте данные перед сохранением, чтобы избежать XSS и других уязвимостей.

Чтобы не нагружать сервер лишними запросами, используйте debounce или throttle, как в примере с таймаутом на 5 секунд. Также можно сохранять только если данные изменились, сравнивая с предыдущей версией.