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

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

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

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

Стандартный редактор Gutenberg уже содержит функцию автосохранения, но если вы разрабатываете собственный мета-бокс, кастомный редактор или плагин, вам придётся реализовать её самостоятельно.

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

Для начала зарегистрируем AJAX-обработчик в WordPress. В файле functions.php или вашем плагине добавим следующий код:

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

    $post_id = intval($_POST['post_id']);
    $post_content = sanitize_textarea_field($_POST['post_content']);

    if ( current_user_can('edit_post', $post_id) ) {
        $updated = wp_update_post(array(
            'ID' => $post_id,
            'post_content' => $post_content,
            'post_status' => 'draft', // Сохраняем как черновик
        ), true);

        if ( is_wp_error($updated) ) {
            wp_send_json_error($updated->get_error_message());
        } else {
            wp_send_json_success('Пост успешно сохранён');
        }
    } else {
        wp_send_json_error('Недостаточно прав для редактирования');
    }
}
add_action('wp_ajax_wordpresses_autosave_post', 'wordpresses_ajax_autosave_post');

Этот обработчик получает ID поста и содержимое, проверяет права пользователя и nonce, затем обновляет пост как черновик.

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

В шаблоне или админской странице подключаем скрипт и локализуем переменные:

function wordpresses_enqueue_autosave_script() {
    wp_enqueue_script('wordpresses-autosave', get_template_directory_uri() . '/js/autosave.js', array('jquery'), '1.0', true);
    wp_localize_script('wordpresses-autosave', 'wordpressesAutosave', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wordpresses_autosave_action'),
    ));
}
add_action('admin_enqueue_scripts', 'wordpresses_enqueue_autosave_script');

Далее в файле autosave.js реализуем периодическую отправку данных:

jQuery(document).ready(function($) {
    var timeout;
    var postId = $('#post_ID').val(); // Предполагаем, что есть поле с ID поста
    var $contentField = $('#content'); // ID поля с контентом

    function wordpresses_autosave() {
        var content = $contentField.val();

        $.post(wordpressesAutosave.ajax_url, {
            action: 'wordpresses_autosave_post',
            post_id: postId,
            post_content: content,
            wordpresses_autosave_nonce: wordpressesAutosave.nonce
        }, function(response) {
            if (response.success) {
                console.log('Автосохранение выполнено');
            } else {
                console.error('Ошибка автосохранения:', response.data);
            }
        });
    }

    $contentField.on('input', function() {
        clearTimeout(timeout);
        timeout = setTimeout(wordpresses_autosave, 5000); // Сохраняем через 5 секунд после последнего изменения
    });
});

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

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

Можно улучшить UX, добавив индикатор статуса автосохранения, например, «Сохраняется...», «Сохранено» или «Ошибка сохранения».

Если вы используете редактор Gutenberg или Advanced Custom Fields, интеграция будет немного сложнее — там есть свои события и API для сохранения, но базовая идея AJAX-автосохранения схожа.

Советы по безопасности

• Обязательно проверяйте nonce и права пользователя.
• Используйте функции очистки данных, такие как sanitize_textarea_field или wp_kses_post, чтобы избежать XSS-уязвимостей.
• Ограничьте частоту запросов, чтобы не перегружать сервер.

Альтернативы и готовые решения

Если вы не хотите писать автосохранение с нуля, можно использовать плагины, например:

• WP Autosave — простой плагин для автосохранения;
• Clearfy Pro — оптимизирует работу сайта и включает расширенные инструменты для разработчиков;
• Интеграция автовосстановления в редактор с помощью WPRemark для управления комментариями и контентом.

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