В работе с WordPress часто возникает необходимость обеспечить безопасность данных, особенно при создании или редактировании записей, форм и пользовательского контента. Автоматическое сохранение (auto-save) позволяет минимизировать риск потери информации из-за сбоев, закрытия браузера или других непредвиденных ситуаций. В этой статье мы разберём, как реализовать собственное автоматическое сохранение данных в WordPress с помощью JavaScript и PHP, а также рассмотрим примеры плагинов и приведём конкретный код.
Почему важно реализовать авто-сохранение в WordPress
Стандартный редактор WordPress уже имеет встроенный механизм авто-сохранения для записей и страниц. Однако, если вы создаёте собственные формы на сайте или работаете с кастомными типами записей или метаполями, автоматическое сохранение может отсутствовать по умолчанию. Это может привести к потере данных при неожиданном закрытии вкладки, сбое соединения или ошибке пользователя.
Автоматическое сохранение обеспечивает плавный пользовательский опыт, снижает риск ошибок и повышает надёжность сайта. Особенно это важно для сложных форм, кастомных редакторов или систем с большим количеством пользовательского ввода.
Основные подходы к реализации авто-сохранения
Реализация автоматического сохранения включает три ключевых составляющих:
- Отслеживание изменений данных на клиенте (JavaScript).
- Отправка данных на сервер в фоновом режиме (AJAX).
- Обработка и сохранение данных на сервере (PHP).
Для примера мы создадим простую форму с пользовательскими полями, которая будет автоматически сохранять данные в метаполя записи.
Создание формы с пользовательскими полями
Предположим, у нас есть кастомный тип записи wpkit_note. Добавим метаполя «Заголовок заметки» и «Текст заметки».
function wpkit_add_meta_boxes() {
add_meta_box(
'wpkit_note_meta',
'Данные заметки',
'wpkit_note_meta_box_callback',
'wpkit_note',
'normal',
'high'
);
}
add_action('add_meta_boxes', 'wpkit_add_meta_boxes');
function wpkit_note_meta_box_callback($post) {
wp_nonce_field('wpkit_save_note_data', 'wpkit_note_nonce');
$title = get_post_meta($post->ID, '_wpkit_note_title', true);
$content = get_post_meta($post->ID, '_wpkit_note_content', true);
echo '<label for="wpkit_note_title">Заголовок заметки:</label><br>';
echo '<input type="text" id="wpkit_note_title" name="wpkit_note_title" value="' . esc_attr($title) . '" style="width:100%;"><br><br>';
echo '<label for="wpkit_note_content">Текст заметки:</label><br>';
echo '<textarea id="wpkit_note_content" name="wpkit_note_content" rows="5" style="width:100%;">' . esc_textarea($content) . '</textarea>';
}
Обработка сохранения данных
Добавим функцию для сохранения данных из формы, которая будет вызываться при стандартном сохранении записи — на случай, если пользователь нажмёт кнопку «Обновить».
function wpkit_save_note_data($post_id) {
if (!isset($_POST['wpkit_note_nonce']) || !wp_verify_nonce($_POST['wpkit_note_nonce'], 'wpkit_save_note_data')) {
return;
}
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return;
}
if (isset($_POST['wpkit_note_title'])) {
update_post_meta($post_id, '_wpkit_note_title', sanitize_text_field($_POST['wpkit_note_title']));
}
if (isset($_POST['wpkit_note_content'])) {
update_post_meta($post_id, '_wpkit_note_content', sanitize_textarea_field($_POST['wpkit_note_content']));
}
}
add_action('save_post_wpkit_note', 'wpkit_save_note_data');
Реализация автоматического сохранения с помощью AJAX
Теперь добавим автоматическое сохранение при изменении полей без перезагрузки страницы. Для этого используем JavaScript и AJAX-запросы к WordPress.
Подключение скрипта авто-сохранения
В файле плагина или темы регистрируем и подключаем JS-файл, передавая параметры для AJAX:
function wpkit_enqueue_autosave_script($hook) {
global $post;
if ('post.php' !== $hook && 'post-new.php' !== $hook) {
return;
}
if ('wpkit_note' !== $post->post_type) {
return;
}
wp_enqueue_script('wpkit-autosave', plugin_dir_url(__FILE__) . 'js/wpkit-autosave.js', ['jquery'], '1.0', true);
wp_localize_script('wpkit-autosave', 'wpkitAutoSave', [
'ajax_url' => admin_url('admin-ajax.php'),
'post_id' => $post->ID,
'nonce' => wp_create_nonce('wpkit_autosave_nonce')
]);
}
add_action('admin_enqueue_scripts', 'wpkit_enqueue_autosave_script');
JavaScript для авто-сохранения
Создаём файл js/wpkit-autosave.js с кодом:
jQuery(document).ready(function($) {
let timer;
function wpkit_save() {
let title = $('#wpkit_note_title').val();
let content = $('#wpkit_note_content').val();
$.post(wpkitAutoSave.ajax_url, {
action: 'wpkit_autosave',
post_id: wpkitAutoSave.post_id,
nonce: wpkitAutoSave.nonce,
note_title: title,
note_content: content
}, function(response) {
if(response.success) {
console.log('Данные автоматически сохранены');
} else {
console.log('Ошибка сохранения: ' + response.data);
}
});
}
$('#wpkit_note_title, #wpkit_note_content').on('input', function() {
clearTimeout(timer);
timer = setTimeout(wpkit_save, 2000); // Сохраняем через 2 секунды после окончания ввода
});
});
Обработка AJAX-запроса на сервере
Добавим обработчик в PHP для сохранения данных при AJAX-запросе:
function wpkit_handle_autosave() {
check_ajax_referer('wpkit_autosave_nonce', 'nonce');
if (!current_user_can('edit_post', intval($_POST['post_id']))) {
wp_send_json_error('Нет прав для редактирования записи');
}
$post_id = intval($_POST['post_id']);
$title = isset($_POST['note_title']) ? sanitize_text_field($_POST['note_title']) : '';
$content = isset($_POST['note_content']) ? sanitize_textarea_field($_POST['note_content']) : '';
update_post_meta($post_id, '_wpkit_note_title', $title);
update_post_meta($post_id, '_wpkit_note_content', $content);
wp_send_json_success();
}
add_action('wp_ajax_wpkit_autosave', 'wpkit_handle_autosave');
Полезные плагины для расширения функционала авто-сохранения
Если вы хотите расширить возможности авто-сохранения или упростить задачу, существуют готовые плагины:
- Autosave Manager — плагин для управления периодичностью и поведением авто-сохранения в стандартном редакторе WordPress.
- WP Revisions Control — позволяет гибко настроить количество сохраняемых ревизий, что помогает оптимизировать базу данных.
- ACF (Advanced Custom Fields) с дополнениями для авто-сохранения — если вы используете ACF для создания полей, можно настроить авто-сохранение через дополнительные скрипты.
Но если вы хотите полный контроль над процессом и интеграцию в свои кастомные решения, лучше реализовать авто-сохранение самостоятельно, как показано в статье.
Рекомендации по оптимизации и безопасности авто-сохранения
Ограничение частоты сохранений
Автоматическое сохранение должно быть достаточно частым, чтобы не потерять данные, но не слишком частым, чтобы не создавать лишнюю нагрузку на сервер. В примере выше используется задержка в 2 секунды после последнего ввода, что является разумным компромиссом.
Обработка ошибок и уведомления
Рекомендуется выводить пользователю уведомления о статусе сохранения (успех, ошибка). Для этого можно расширить JS-код, добавив визуальные индикаторы или сообщения.
Безопасность данных
Всегда используйте wp_nonce_field и check_ajax_referer для защиты от CSRF-атак. Проверяйте права пользователя через current_user_can. Также обязательно фильтруйте и санитизируйте все входящие данные, используя стандартные функции WordPress (sanitize_text_field, sanitize_textarea_field и т.д.).
Заключение
Автоматическое сохранение данных — важный элемент удобства и надёжности сайта на WordPress, особенно при работе с нестандартными формами и типами записей. Реализовав собственное авто-сохранение с помощью AJAX и PHP, вы сможете значительно улучшить UX и защитить пользователей от потерь данных. Представленный код — это простой и масштабируемый шаблон, который легко адаптируется под конкретные задачи.