В современных веб-приложениях автоматическое сохранение данных — это важная функция, которая помогает предотвратить потерю информации при случайном закрытии браузера, сбоях или ошибках пользователя. В WordPress, где часто приходится работать с формами, редакторами и пользовательским вводом, реализация автоматического сохранения может значительно улучшить пользовательский опыт.
Почему автоматическое сохранение данных важно в WordPress
WordPress изначально поддерживает автосохранение для записей и страниц в редакторе, но если вы создаёте свои кастомные формы или плагины, эта функция отсутствует. Пользователь может потерять введённые данные при случайном обновлении страницы или ошибках соединения. Автоматическое сохранение помогает:
- Сохранять промежуточные данные без вмешательства пользователя.
- Обеспечивать восстановление данных после сбоев.
- Повысить удобство и надежность пользовательских форм и интерфейсов.
В этой статье мы рассмотрим, как создать собственную функцию автосохранения с помощью AJAX и PHP в WordPress, а также покажем пример простого плагина, реализующего эту возможность.
Как работает автоматическое сохранение: общая схема
Автоматическое сохранение обычно реализуется так:
- Периодически (например, каждые 30 секунд) или при событии пользовательского ввода JavaScript собирает данные из формы.
- Данные отправляются на сервер через AJAX-запрос.
- На сервере данные валидируются и сохраняются в базу (например, в meta-поля пользователя, в отдельную таблицу или опцию).
- При загрузке страницы данные восстанавливаются и подставляются в форму.
Это обеспечивает плавный и незаметный для пользователя процесс сохранения.
Пример: создание автосохранения для кастомной формы в плагине WordPress
Шаг 1. Создание формы с уникальным идентификатором
Для начала создадим форму, в которой будет происходить автосохранение. Например, форма для ввода заметок пользователя:
<form id="wpstandart-note-form">
<textarea id="wpstandart-note-text" name="note" rows="10" cols="50" placeholder="Введите вашу заметку..."></textarea>
<div id="wpstandart-status"></div>
</form>Обратите внимание на уникальные идентификаторы, они понадобятся для JavaScript и PHP.
Шаг 2. Подключение JavaScript для отправки AJAX-запросов
Добавим скрипт, который будет отслеживать ввод и отправлять данные на сервер каждые 30 секунд:
function wpstandart_enqueue_scripts() {
wp_enqueue_script('wpstandart-autosave', plugin_dir_url(__FILE__) . 'js/autosave.js', array('jquery'), '1.0', true);
wp_localize_script('wpstandart-autosave', 'wpstandart_ajax', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpstandart_autosave_nonce')
));
}
add_action('wp_enqueue_scripts', 'wpstandart_enqueue_scripts');В файле autosave.js разместим следующий код:
jQuery(document).ready(function($) {
var timer;
function wpstandart_autosave() {
var data = {
action: 'wpstandart_autosave_save',
nonce: wpstandart_ajax.nonce,
note: $('#wpstandart-note-text').val()
};
$.post(wpstandart_ajax.ajax_url, data, function(response) {
if(response.success){
$('#wpstandart-status').text('Сохранено в ' + new Date().toLocaleTimeString());
} else {
$('#wpstandart-status').text('Ошибка сохранения');
}
});
}
$('#wpstandart-note-text').on('input', function() {
clearTimeout(timer);
timer = setTimeout(wpstandart_autosave, 3000); // Сохраняем через 3 секунды после последнего ввода
});
// При загрузке страницы загружаем сохранённые данные
$.get(wpstandart_ajax.ajax_url, { action: 'wpstandart_autosave_load' }, function(response) {
if(response.success && response.data.note){
$('#wpstandart-note-text').val(response.data.note);
$('#wpstandart-status').text('Данные загружены');
}
});
});Шаг 3. Обработка AJAX-запросов на сервере
Добавим обработчики AJAX-запросов в PHP:
function wpstandart_handle_autosave_save() {
check_ajax_referer('wpstandart_autosave_nonce', 'nonce');
$note = isset($_POST['note']) ? sanitize_textarea_field($_POST['note']) : '';
$user_id = get_current_user_id();
if(!$user_id) {
wp_send_json_error('Пользователь не авторизован');
}
update_user_meta($user_id, 'wpstandart_user_note', $note);
wp_send_json_success();
}
add_action('wp_ajax_wpstandart_autosave_save', 'wpstandart_handle_autosave_save');
function wpstandart_handle_autosave_load() {
$user_id = get_current_user_id();
if(!$user_id) {
wp_send_json_error('Пользователь не авторизован');
}
$note = get_user_meta($user_id, 'wpstandart_user_note', true);
wp_send_json_success(array('note' => $note));
}
add_action('wp_ajax_wpstandart_autosave_load', 'wpstandart_handle_autosave_load');Таким образом, при каждом вводе пользовательской заметки данные будут автоматически сохраняться и при обновлении страницы загружаться обратно.
Дополнительные советы по реализации автоматического сохранения в WordPress
Оптимизация частоты запросов
Чрезмерно частые AJAX-запросы создают нагрузку на сервер и могут замедлить работу сайта. Рекомендуется использовать:
- Отложенный таймер (debounce) — как в нашем примере, когда сохранение происходит через 3 секунды после последнего ввода.
- Интервалы не менее 10-30 секунд, если автосохранение запускается периодически.
Хранение данных
Выбор места хранения зависит от типа данных и задачи:
- User meta — подходит для индивидуальных данных пользователя (как в примере).
- Options — для глобальных настроек.
- Кастомные таблицы — для сложных структурированных данных.
Безопасность
Обязательно используйте check_ajax_referer() для проверки nonce и валидируйте входящие данные, чтобы предотвратить XSS и другие атаки.
Полезные плагины для автоматического сохранения в WordPress
Если вы не хотите писать код самостоятельно, можно воспользоваться готовыми решениями:
- Autosave Migration — расширяет возможности стандартного автосохранения и ревизий.
- Revision Control — управление версиями и автосохранением для записей.
- WP Automatic — автообновление контента с внешних источников с функцией автосохранения.
Однако для кастомных форм и специфичных задач лучше создавать своё решение, адаптированное под конкретные нужды.