В процессе работы с административной панелью WordPress часто возникает проблема — пользователь меняет настройки плагина или темы, но забывает нажать кнопку «Сохранить». В результате все внесённые изменения пропадают. Особенно это критично, если настроек много и они требуют времени на заполнение.
В этой статье мы подробно разберём, как реализовать автоматическое сохранение настроек в WordPress, используя AJAX и REST API. Это поможет улучшить пользовательский опыт и минимизировать потерю данных в вашем плагине или теме.
Зачем нужно автоматическое сохранение настроек в WordPress
Автоматическое сохранение — это возможность сохранить изменения без необходимости вручную нажимать кнопку «Сохранить». Она полезна в следующих случаях:
- Пользователь случайно закрывает вкладку браузера или перезагружает страницу.
- Параметров много и пользователь не хочет каждый раз нажимать кнопку.
- Повышение удобства и снижение риска потери данных.
Для разработчиков это возможность сделать интерфейс более современным и дружелюбным, что особенно важно для сложных настроек.
Примеры плагинов с поддержкой автосохранения
Некоторые популярные плагины уже имеют встроенное автосохранение настроек, и можно посмотреть их реализацию для вдохновения:
- Advanced Custom Fields (ACF) — в редакторе полей при редактировании происходит автоматическое сохранение данных.
- Elementor — при работе с визуальным редактором изменения сохраняются автоматически.
- WPForms — форма настроек сохраняется в реальном времени.
В большинстве случаев автосохранение реализовано через AJAX-запросы, которые отправляют данные на сервер без перезагрузки страницы.
Как реализовать автоматическое сохранение настроек в WordPress: пошаговое руководство
1. Создание страницы настроек
Для начала создадим страницу настроек в админке WordPress, где будет форма с параметрами. Пример регистрации меню и страницы:
add_action('admin_menu', 'wpbe_add_settings_page');
function wpbe_add_settings_page() {
add_options_page(
'Настройки WPBE',
'Настройки WPBE',
'manage_options',
'wpbe-settings',
'wpbe_render_settings_page'
);
}
function wpbe_render_settings_page() {
?>
<div class="wrap">
<h1>Настройки WPBE</h1>
<form id="wpbe-settings-form">
<label for="wpbe_option_text">Текстовое поле:</label>
<input type="text" id="wpbe_option_text" name="wpbe_option_text" value="<?php echo esc_attr(get_option('wpbe_option_text', '')); ?>">
</form>
<div id="wpbe-save-status"></div>
</div>
<?php
}Здесь мы создаём простую форму с одним текстовым полем. В реальной ситуации полей может быть много.
2. Добавление скрипта для отправки данных через AJAX
Подключим JavaScript, который будет слушать изменения и отправлять данные на сервер без перезагрузки страницы.
add_action('admin_enqueue_scripts', 'wpbe_enqueue_scripts');
function wpbe_enqueue_scripts($hook) {
if ($hook !== 'settings_page_wpbe-settings') {
return;
}
wp_enqueue_script('wpbe-settings-script', plugin_dir_url(__FILE__) . 'wpbe-settings.js', array('jquery'), '1.0', true);
wp_localize_script('wpbe-settings-script', 'wpbe_ajax_obj', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpbe_save_settings_nonce')
));
}В файле wpbe-settings.js будет логика автосохранения.
3. JavaScript код для автосохранения
Теперь создаём файл wpbe-settings.js с таким содержимым:
jQuery(document).ready(function($) {
var saveTimeout;
$('#wpbe-settings-form input').on('input', function() {
clearTimeout(saveTimeout);
saveTimeout = setTimeout(function() {
var data = {
action: 'wpbe_save_settings',
nonce: wpbe_ajax_obj.nonce,
wpbe_option_text: $('#wpbe_option_text').val()
};
$.post(wpbe_ajax_obj.ajax_url, data, function(response) {
if (response.success) {
$('#wpbe-save-status').text('Настройки сохранены автоматически').css('color', 'green');
} else {
$('#wpbe-save-status').text('Ошибка при сохранении').css('color', 'red');
}
setTimeout(function() {
$('#wpbe-save-status').fadeOut();
}, 3000);
});
}, 1000); // задержка 1 секунда после ввода
});
});Этот скрипт отслеживает ввод в поле и через секунду после последнего изменения отправляет данные на сервер.
4. Обработка AJAX-запроса на сервере
Теперь обрабатываем полученные данные и сохраняем опции в базе:
add_action('wp_ajax_wpbe_save_settings', 'wpbe_save_settings_callback');
function wpbe_save_settings_callback() {
check_ajax_referer('wpbe_save_settings_nonce', 'nonce');
if (!current_user_can('manage_options')) {
wp_send_json_error('Нет доступа');
}
if (isset($_POST['wpbe_option_text'])) {
$value = sanitize_text_field($_POST['wpbe_option_text']);
update_option('wpbe_option_text', $value);
wp_send_json_success();
} else {
wp_send_json_error('Данные не получены');
}
}Этот обработчик проверяет nonce, права пользователя и сохраняет значение опции.
Дополнительные рекомендации по реализации автосохранения
Обработка ошибок и уведомления
Важно информировать пользователя о том, что сохранение произошло успешно или произошла ошибка. В нашем примере это реализовано через текстовые сообщения с цветовой индикацией. Можно дополнительно добавить иконки или всплывающие уведомления.
Оптимизация частоты сохранения
Чрезмерно частые запросы к серверу могут нагрузить хостинг. В примере мы используем задержку в 1 секунду после последнего ввода. Можно увеличить время или добавить проверку, изменились ли данные с момента последнего сохранения.
Расширение на другие типы полей
Автосохранение можно расширить на checkbox, select, textarea и другие поля. Для каждого типа поля нужно правильно получать значение и передавать на сервер. Например, для checkbox использовать prop('checked') в jQuery.
Вывод
Автоматическое сохранение настроек — это удобный и современный подход к работе с админкой WordPress. Реализовать его достаточно просто с помощью AJAX и стандартных хуков WordPress. Это значительно повышает удобство пользователей и снижает риск потери данных, особенно при работе с большим количеством параметров.
Приведённый пример можно использовать как шаблон и адаптировать под свои нужды, добавляя поля, валидацию и расширяя функционал.