Как использовать REST API для создания настроек в WordPress

Введение в REST API WordPress и его роль в создании настроек

REST API в WordPress — мощный инструмент, который позволяет взаимодействовать с сайтом через HTTP-запросы. Он открывает новые возможности для разработки, в том числе для создания и управления настройками сайта без перезагрузки страниц. Используя REST API, можно создавать кастомные интерфейсы настроек, мобильные приложения или интегрировать WordPress с внешними сервисами.

В этой статье рассмотрим, как с помощью REST API реализовать собственный эндпоинт для настройки параметров, безопасно сохранять и получать данные, а также приведём примеры кода для быстрого старта.

Регистрация пользовательского REST API эндпоинта для настроек

Создаём точку входа для запроса настроек

Первым шагом является регистрация собственного маршрута REST API, который будет принимать GET и POST запросы для получения и сохранения настроек соответственно. Для этого добавим в functions.php или в файл плагина следующий код:

add_action('rest_api_init', function () {
    register_rest_route('wpcore/v1', '/settings', [
        'methods' => 'GET',
        'callback' => 'wpcore_get_settings',
        'permission_callback' => function () {
            return current_user_can('manage_options');
        },
    ]);

    register_rest_route('wpcore/v1', '/settings', [
        'methods' => 'POST',
        'callback' => 'wpcore_update_settings',
        'permission_callback' => function () {
            return current_user_can('manage_options');
        },
    ]);
});

Здесь мы создаём два обработчика: wpcore_get_settings для получения текущих настроек и wpcore_update_settings для их обновления. Обратите внимание на permission_callback — он защищает эндпоинт, разрешая доступ только администраторам.

Реализация функций получения и обновления настроек

Получение настроек через REST API

Функция wpcore_get_settings должна возвращать текущие значения опций, которые мы хотим контролировать. Например, если мы создаём настройку для отображения приветственного сообщения и включения режима отладки, код будет таким:

function wpcore_get_settings( WP_REST_Request $request ) {
    $welcome_message = get_option('wpcore_welcome_message', 'Добро пожаловать!');
    $debug_mode = get_option('wpcore_debug_mode', false);

    return [
        'welcome_message' => $welcome_message,
        'debug_mode' => (bool) $debug_mode,
    ];
}

Обновление настроек через REST API

Для сохранения настроек нужно получить данные из POST-запроса, выполнить валидацию и обновить опции через update_option. Ниже пример функции:

function wpcore_update_settings( WP_REST_Request $request ) {
    $params = $request->get_json_params();
    if (!isset($params['welcome_message']) || !isset($params['debug_mode'])) {
        return new WP_Error('invalid_data', 'Отсутствуют необходимые параметры', ['status' => 400]);
    }

    $welcome_message = sanitize_text_field($params['welcome_message']);
    $debug_mode = filter_var($params['debug_mode'], FILTER_VALIDATE_BOOLEAN);

    update_option('wpcore_welcome_message', $welcome_message);
    update_option('wpcore_debug_mode', $debug_mode);

    return ['success' => true, 'message' => 'Настройки обновлены'];
}

Создание интерфейса настроек на стороне администратора

Подключение скриптов и создание страницы настроек

Чтобы удобно управлять настройками, создадим страницу в админке WordPress с использованием React и REST API. Добавим меню и подключим необходимые скрипты:

add_action('admin_menu', function () {
    add_options_page(
        'Настройки WPcore',
        'WPcore настройки',
        'manage_options',
        'wpcore-settings',
        'wpcore_render_settings_page'
    );
});

function wpcore_render_settings_page() {
    echo '<div id="wpcore-settings-root"></div>';
}

add_action('admin_enqueue_scripts', function ($hook) {
    if ($hook !== 'settings_page_wpcore-settings') {
        return;
    }
    wp_enqueue_script('wpcore-settings-js', plugin_dir_url(__FILE__) . 'settings.js', ['wp-element', 'wp-api-fetch'], null, true);
});

В этом примере создаётся страница настроек и подключается JavaScript-файл settings.js, который будет содержать React-компонент для интерфейса.

Пример React-компонента для взаимодействия с REST API

В файле settings.js реализуем форму для чтения и обновления настроек:

const { useState, useEffect } = wp.element;
const { apiFetch } = wp;

function WPCoreSettings() {
    const [welcomeMessage, setWelcomeMessage] = useState('');
    const [debugMode, setDebugMode] = useState(false);
    const [status, setStatus] = useState('');

    useEffect(() => {
        apiFetch({ path: '/wpcore/v1/settings' }).then(data => {
            setWelcomeMessage(data.welcome_message);
            setDebugMode(data.debug_mode);
        });
    }, []);

    const handleSubmit = (e) => {
        e.preventDefault();
        apiFetch({
            path: '/wpcore/v1/settings',
            method: 'POST',
            data: { welcome_message: welcomeMessage, debug_mode: debugMode },
        })
        .then(() => setStatus('Настройки успешно сохранены'))
        .catch(() => setStatus('Ошибка при сохранении'));
    };

    return (
        wp.element.createElement('form', { onSubmit: handleSubmit },
            wp.element.createElement('label', null, 'Приветственное сообщение:'),
            wp.element.createElement('input', {
                type: 'text',
                value: welcomeMessage,
                onChange: e => setWelcomeMessage(e.target.value),
            }),
            wp.element.createElement('label', null, 'Режим отладки:'),
            wp.element.createElement('input', {
                type: 'checkbox',
                checked: debugMode,
                onChange: e => setDebugMode(e.target.checked),
            }),
            wp.element.createElement('button', { type: 'submit' }, 'Сохранить'),
            wp.element.createElement('p', null, status)
        )
    );
}

wp.element.render(wp.element.createElement(WPCoreSettings), document.getElementById('wpcore-settings-root'));

Безопасность и лучшие практики при работе с REST API

Очень важно надёжно защищать собственные эндпоинты REST API. В нашем примере используется проверка прав через current_user_can('manage_options'), что гарантирует доступ только администраторам. Кроме того, необходимо всегда валидировать и санитизировать входящие данные, чтобы избежать XSS и SQL-инъекций.

Также рекомендуется использовать nonce WP REST API для защиты от CSRF-атак, если ваш фронтенд находится внутри WordPress. Для этого можно добавить nonce в запросы и проверять их в обработчиках.

Заключение

Создание пользовательских настроек через REST API — это современный и гибкий способ расширить функциональность сайта на WordPress. Такой подход позволяет создавать интерактивные интерфейсы, интегрировать сайт с внешними приложениями и улучшать UX. Следуя приведённым примерам и рекомендациям, можно быстро внедрить надёжное и удобное управление настройками.