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

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

Зачем нужен AJAX-черновик в WordPress

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

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

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

Создание собственного AJAX-черновика: пошаговое руководство

1. Регистрация AJAX-обработчика в WordPress

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

add_action('wp_ajax_journalx_save_draft', 'journalx_save_draft_callback');
add_action('wp_ajax_nopriv_journalx_save_draft', 'journalx_save_draft_callback');

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

    $post_id = intval($_POST['post_id']);
    $content = wp_kses_post($_POST['content']);

    if (!$post_id || empty($content)) {
        wp_send_json_error('Некорректные данные');
    }

    $post_data = array(
        'ID'           => $post_id,
        'post_content' => $content,
        'post_status'  => 'draft',
    );

    $updated_id = wp_update_post($post_data, true);

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

    wp_send_json_success('Черновик сохранён');
}

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

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

function journalx_enqueue_scripts() {
    wp_enqueue_script('journalx-ajax-script', get_template_directory_uri() . '/js/journalx-ajax.js', array('jquery'), null, true);

    wp_localize_script('journalx-ajax-script', 'journalx_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('journalx_draft_nonce'),
    ));
}
add_action('wp_enqueue_scripts', 'journalx_enqueue_scripts');

В файле js/journalx-ajax.js напишем следующий код:

jQuery(document).ready(function($) {
    $('#journalx-content').on('input', function() {
        var content = $(this).val();
        var post_id = $('#journalx-post-id').val();

        $.ajax({
            url: journalx_ajax_obj.ajax_url,
            type: 'POST',
            data: {
                action: 'journalx_save_draft',
                nonce: journalx_ajax_obj.nonce,
                post_id: post_id,
                content: content
            },
            success: function(response) {
                if (response.success) {
                    $('#journalx-status').text('Сохранено');
                } else {
                    $('#journalx-status').text('Ошибка сохранения');
                }
            },
            error: function() {
                $('#journalx-status').text('Ошибка AJAX');
            }
        });
    });
});

Для работы скрипта на странице должен быть простой HTML:

<textarea id="journalx-content"></textarea>
<input type="hidden" id="journalx-post-id" value="123" />
<div id="journalx-status"></div>

Полезные плагины для создания AJAX-черновиков и расширения функциональности

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

• Clearfy Pro — улучшает производительность и безопасность сайта, среди функций есть оптимизация AJAX-запросов.
• Expert Review — помогает организовать отзывы и комментарии с AJAX-подгрузкой, что можно адаптировать под черновики.
• WPGPT — плагин с интеграцией ChatGPT, который можно использовать для автоматического создания контента и сохранения его через AJAX.

Все эти плагины доступны на WPSHOP.RU и легко интегрируются в проекты на WordPress.

Советы по безопасности и оптимизации AJAX-черновиков

Используйте nonce для защиты

Обязательно применяйте check_ajax_referer для предотвращения CSRF-атак. В коде мы уже показали, как это реализовать.

Обрабатывайте ошибки корректно

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

Минимизируйте количество запросов

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

Кэширование и оптимизация нагрузки

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

Заключение по созданию AJAX-черновика в WordPress

Реализация беспроводного AJAX-черновика — отличное решение для повышения удобства работы с контентом в WordPress. Мы рассмотрели создание собственного обработчика, подключение JS и лучшие практики безопасности. Для более сложных задач можно использовать плагины из экосистемы WPSHOP.RU, которые расширят функциональность вашего сайта.