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

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

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

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

• Сохранять данные без перезагрузки страницы.
• Уменьшить риск потери информации при случайном закрытии вкладки или сбое.
• Повысить удобство работы для пользователей и редакторов.

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

Создаем AJAX обработчик для сохранения данных

Первым делом заведем AJAX обработчик в вашем плагине или в functions.php темы. Важно использовать уникальные префиксы для функций, например, wpdemo_, чтобы избежать конфликтов.

add_action('wp_ajax_wpdemo_autosave_post', 'wpdemo_ajax_autosave_post');
function wpdemo_ajax_autosave_post() {
    // Проверяем nonce для безопасности
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'wpdemo_autosave_nonce')) {
        wp_send_json_error('Неверный nonce');
    }

    $post_id = intval($_POST['post_id']);
    if (!$post_id) {
        wp_send_json_error('Неверный ID поста');
    }

    // Проверяем права пользователя
    if (!current_user_can('edit_post', $post_id)) {
        wp_send_json_error('Нет прав для редактирования');
    }

    // Получаем новые данные
    $content = isset($_POST['content']) ? wp_kses_post($_POST['content']) : '';

    // Обновляем содержимое поста
    $updated = wp_update_post([
        'ID' => $post_id,
        'post_content' => $content
    ], true);

    if (is_wp_error($updated)) {
        wp_send_json_error($updated->get_error_message());
    }

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

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

Подключаем JavaScript для запуска сохранения

Далее создадим JavaScript, который будет по таймеру отправлять данные на сервер через AJAX.

function wpdemo_enqueue_autosave_script() {
    wp_enqueue_script('wpdemo-autosave', get_template_directory_uri() . '/js/wpdemo-autosave.js', ['jquery'], null, true);
    wp_localize_script('wpdemo-autosave', 'wpdemo_autosave_obj', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpdemo_autosave_nonce'),
        'post_id' => get_the_ID(),
    ]);
}
add_action('wp_enqueue_scripts', 'wpdemo_enqueue_autosave_script');

В скрипте мы локализуем данные для AJAX — URL, nonce и ID поста.

Пример кода JavaScript (wpdemo-autosave.js):

jQuery(document).ready(function($) {
    var autosaveTimer;
    var autosaveInterval = 10000; // 10 секунд

    function wpdemo_autosave() {
        var content = $('#content').val(); // Для классического редактора или заменить селектор
        $.post(wpdemo_autosave_obj.ajax_url, {
            action: 'wpdemo_autosave_post',
            nonce: wpdemo_autosave_obj.nonce,
            post_id: wpdemo_autosave_obj.post_id,
            content: content
        }, function(response) {
            if (response.success) {
                console.log('Автосохранение прошло успешно');
            } else {
                console.error('Ошибка автосохранения:', response.data);
            }
        });
    }

    $('#content').on('input', function() {
        clearTimeout(autosaveTimer);
        autosaveTimer = setTimeout(wpdemo_autosave, autosaveInterval);
    });
});

Здесь мы вешаем обработчик на поле с содержимым поста (обычно #content для классического редактора), и если пользователь прекратил ввод на 10 секунд, данные отправляются на сервер.

Как адаптировать для кастомных полей и метабоксов

Если у вас есть кастомные поля, вы можете расширить AJAX обработчик, принимая дополнительные параметры и сохраняя их через update_post_meta. Например:

if (isset($_POST['custom_field'])) {
    update_post_meta($post_id, 'custom_field', sanitize_text_field($_POST['custom_field']));
}

В JavaScript добавьте значение кастомного поля в данные запроса.

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

Используем готовые плагины для автосохранения

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

• Revision Control — управляет количеством сохраненных ревизий.
• Clearfy Pro — оптимизация и расширение функционала, включая улучшенное автосохранение.

Однако собственная реализация через AJAX дает больше контроля и гибкости под специфические задачи.

Выводы и рекомендации

Автоматическое сохранение через AJAX — отличное улучшение для повышения надежности и удобства работы с контентом на WordPress. Важно не забывать о безопасности — проверять nonce и права доступа, а также валидировать и санитизировать входящие данные.

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