Как создать автоматическое сохранение через AJAX в WordPress

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

Зачем нужно автоматическое сохранение в WordPress

Пользователи часто заполняют длинные формы или создают контент, и внезапное закрытие браузера или потеря соединения может привести к потере данных. Автосохранение решает эту проблему, регулярно отправляя данные на сервер в фоновом режиме.

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

Реализовать такую возможность можно как в плагинах, так и в кастомных решениях, используя AJAX-запросы к серверу WordPress.

Обзор популярных плагинов для автосохранения

Если вам нужно быстро добавить функцию автосохранения без написания кода, можно использовать готовые плагины:

• WP Autosave — простой плагин, который периодически сохраняет контент без перезагрузки.
• Autosave Custom Fields — расширяет стандартное автосохранение WordPress, добавляя поддержку кастомных полей.
• Revision Control — управляет ревизиями постов и может быть настроен на частое автосохранение.

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

Создаем собственное автоматическое сохранение через AJAX в WordPress

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

Для начала нужно подключить JavaScript файл, который будет отправлять данные на сервер. В functions.php вашей темы или плагина добавьте:

function wpexamples_enqueue_autosave_script() {
    wp_enqueue_script('wpexamples-autosave', get_template_directory_uri() . '/js/wpexamples-autosave.js', array('jquery'), '1.0', true);
    wp_localize_script('wpexamples-autosave', 'wpexamples_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('wpexamples_autosave_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wpexamples_enqueue_autosave_script');

Этот код подключит скрипт и передаст ему URL для AJAX-запроса и nonce для безопасности.

2. Создание JavaScript для отправки данных

В файле js/wpexamples-autosave.js разместим код, который будет собирать данные из формы и отправлять их на сервер:

jQuery(document).ready(function($) {
    var timer;
    $('#my-form').on('input', function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            var data = {
                action: 'wpexamples_autosave',
                nonce: wpexamples_ajax_obj.nonce,
                content: $('#my-textarea').val()
            };
            $.post(wpexamples_ajax_obj.ajax_url, data, function(response) {
                if(response.success) {
                    console.log('Данные сохранены');
                } else {
                    console.log('Ошибка сохранения');
                }
            });
        }, 2000); // отправка спустя 2 секунды после последнего ввода
    });
});

Здесь мы слушаем событие ввода в поле с id my-textarea и отправляем данные на сервер через 2 секунды после последнего изменения.

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

В functions.php добавим PHP-функцию, которая примет данные, проверит nonce и сохранит их, например, в пользовательских мета данных или в опциях:

function wpexamples_handle_autosave() {
    check_ajax_referer('wpexamples_autosave_nonce', 'nonce');

    $content = isset($_POST['content']) ? sanitize_text_field($_POST['content']) : '';
    $user_id = get_current_user_id();

    if($user_id && $content !== '') {
        update_user_meta($user_id, 'wpexamples_autosave_content', $content);
        wp_send_json_success();
    } else {
        wp_send_json_error();
    }
}
add_action('wp_ajax_wpexamples_autosave', 'wpexamples_handle_autosave');

В данном примере мы сохраняем текст в метаданных пользователя, но можно адаптировать под любые нужды — сохранение в постах, опциях и т.д.

Как использовать сохранённые данные при загрузке страницы

Чтобы восстановить данные при повторном посещении страницы, нужно вывести сохранённое значение в форму:

$user_id = get_current_user_id();
$saved_content = get_user_meta($user_id, 'wpexamples_autosave_content', true);

И в HTML:

<textarea id="my-textarea" name="my-textarea"><?php echo esc_textarea($saved_content); ?></textarea>

Так пользователь увидит последнее сохранённое состояние формы и сможет продолжить работу без потерь.

Советы и рекомендации по автосохранению в WordPress

Оптимизация частоты запросов

Слишком частые AJAX-запросы могут перегружать сервер и негативно влиять на производительность сайта. Используйте таймеры и дебаунсинг (как в примере выше) для отправки данных с разумным интервалом.

Безопасность и валидация

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

Обработка ошибок и UX

Реализуйте уведомления для пользователя о состоянии сохранения — например, индикатор "Сохранено" или сообщение об ошибке. Это повысит доверие и удобство.

Заключение

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

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