Автоматическое сохранение контента — важная функция для любого сайта на WordPress, где пользователи работают с записями или пользовательскими типами записей. В стандартной админке WordPress реализовано автосохранение, но если вы строите кастомный фронтенд или мобильное приложение, взаимодействующее с WordPress через REST API, то такая функция не будет работать автоматически. В этой статье подробно разберём, как реализовать автоматическое сохранение записей через REST API WordPress, чтобы ваши пользователи не потеряли данные при работе с контентом.
Почему нужно автосохранение через REST API в WordPress
REST API WordPress открывает широкие возможности для создания кастомных интерфейсов, SPA и мобильных приложений, но при этом ответственность за сохранение данных целиком ложится на разработчика. Если пользователь пишет большой пост и браузер зависает или случайно закрывается вкладка, без автосохранения все изменения будут потеряны.
Автосохранение через REST API помогает:
- Сохранять черновики без действий пользователя.
- Минимизировать потерю данных при сбоях.
- Обеспечить плавный UX при работе с большими текстовыми блоками и медленным интернетом.
- Интегрировать с редакторами, отличными от стандартного Gutenberg.
Основные шаги реализации автосохранения через REST API в WordPress
Реализация автосохранения состоит из трёх этапов:
- Создание REST API запроса для сохранения записи.
- Отправка данных из фронтенда с определённым интервалом или по событию.
- Обработка ответа и обновление данных в интерфейсе.
Создание REST API запроса для сохранения записи
WordPress уже предоставляет стандартный REST API для работы с записями — эндпоинт /wp-json/wp/v2/posts/{id}. Для создания или обновления записи необходимо отправить POST или PUT запрос с необходимыми данными.
Например, чтобы обновить запись с ID 123, мы можем отправить запрос:
PUT /wp-json/wp/v2/posts/123
Content-Type: application/json
Authorization: Bearer <token>
{
"content": "Обновлённое содержание поста",
"title": "Заголовок поста",
"status": "draft"
}Важно, чтобы пользователь имел права на редактирование данной записи.
Отправка данных с фронтенда с интервалом
Для автоматического сохранения достаточно реализовать таймер, который через заданный интервал (например, 30 секунд) будет отправлять текущие данные записи на сервер.
Пример простого JS-кода с использованием fetch для отправки автосохранения:
const wplikeAutoSave = (postId, getContent, getTitle, token) => {
setInterval(() => {
const content = getContent();
const title = getTitle();
fetch(`/wp-json/wp/v2/posts/${postId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({
content: content,
title: title,
status: 'draft'
})
})
.then(response => response.json())
.then(data => {
console.log('Автосохранение успешно:', data);
// Здесь можно обновить UI, например, показать время последнего сохранения
})
.catch(error => {
console.error('Ошибка автосохранения:', error);
});
}, 30000); // интервал 30 секунд
};Такую функцию можно интегрировать в любой редактор — классический, Gutenberg или кастомный SPA.
Обработка ответа и уведомление пользователя
После отправки данных важно уведомить пользователя, что данные сохранились, например, обновить статус в интерфейсе "Сохранено 12:45". Это повысит доверие и улучшит UX.
Если сохранение не удалось — желательно показывать предупреждение или пробовать повторить попытку.
Как защитить REST API эндпоинт и авторизовать запросы
Для безопасности важно, чтобы только авторизованные пользователи могли сохранять записи через REST API. Вот основные методы авторизации:
- Использование cookie авторизации (авторизация через встроенную сессию WordPress).
- Использование OAuth или JWT токенов для API запросов (например, плагин WPGPT поддерживает JWT).
- Проверка прав пользователя на редактирование записи через функцию
current_user_can()в PHP.
Для создания собственного REST API маршрута с дополнительной логикой автосохранения можно зарегистрировать кастомный эндпоинт:
add_action('rest_api_init', function() {
register_rest_route('wplike/v1', '/autosave/(?P<id>>\d+)', [
'methods' => 'POST',
'callback' => 'wplike_autosave_callback',
'permission_callback' => function() {
return current_user_can('edit_posts');
}
]);
});
function wplike_autosave_callback($request) {
$post_id = (int) $request['id'];
$params = $request->get_json_params();
$postarr = [
'ID' => $post_id,
'post_content' => $params['content'] ?? '',
'post_title' => $params['title'] ?? '',
'post_status' => 'draft'
];
$updated_id = wp_update_post($postarr, true);
if (is_wp_error($updated_id)) {
return new WP_Error('update_failed', 'Не удалось сохранить запись', ['status' => 500]);
}
return ['success' => true, 'post_id' => $updated_id];
}Такой подход позволяет добавить любую логику (например, кастомные валидации или обработку полей).
Примеры плагинов для автосохранения и REST API взаимодействия
Существует несколько плагинов, которые помогут с реализацией или дадут готовые решения для автосохранения и расширения REST API:
- Clearfy Pro — оптимизация и безопасность, помогает фильтровать REST API запросы и улучшать производительность.
Подробнее о Clearfy Pro - Expert Review — расширенные проверки и валидации при сохранении контента, можно дополнить автосохранение.
Подробнее о Expert Review - My Popup — можно настроить уведомления о статусе автосохранения пользователям в интерфейсе.
Подробнее о My Popup
Проверка и отладка автосохранения через REST API
Очень важно на этапе разработки тщательно проверить работу автосохранения:
- Используйте инструменты разработчика в браузере для отслеживания HTTP запросов и ответов.
- Проверяйте права доступа и корректность токенов авторизации.
- Логируйте ошибки на сервере и клиенте для быстрого выявления проблем.
- Тестируйте работу при медленном соединении и прерывании интернета.
Это позволит избежать потери данных и обеспечить стабильную работу функции автосохранения.