Как создать страницу настроек плагина WordPress с применением React

Автор: Валерия Алексеева | Опубликовано: 24.11.2025

Современные плагины WordPress всё чаще используют JavaScript-фреймворки для создания удобных и динамичных интерфейсов в админке. Особенно популярным становится React, который входит в состав WordPress с версии 5.0. В этой статье мы подробно разберём, как создать страницу настроек плагина с использованием React и REST API WordPress, чтобы получить быстрый, отзывчивый и удобный интерфейс для администратора.

Почему стоит использовать React для страницы настроек плагина WordPress

Классические страницы настроек на PHP с использованием стандартных HTML-форм выглядят устаревшими и не всегда удобны для пользователя. React позволяет создавать интерактивные компоненты с мгновенным откликом и приятным пользовательским опытом. Кроме того, React хорошо интегрируется с REST API WordPress, что упрощает обмен данными между сервером и клиентом.

Использование React снижает количество перезагрузок страниц, позволяет делать валидацию и динамическую загрузку данных, а также упрощает поддержку и расширение функционала плагина.

Создание базы: регистрация страницы настроек плагина

Перед тем, как подключать React, создадим в плагине страницу настроек в меню WordPress. Для этого воспользуемся хуком admin_menu и функцией add_menu_page. Важно, чтобы в качестве содержимого страницы мы выводили контейнер для React-приложения.

add_action('admin_menu', 'wpmobile_add_settings_page');
function wpmobile_add_settings_page() {
    add_menu_page(
        'Настройки WP Mobile',
        'WP Mobile',
        'manage_options',
        'wpmobile-settings',
        'wpmobile_render_settings_page',
        'dashicons-admin-generic'
    );
}

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

В этом коде мы создаём пункт меню с названием «WP Mobile» и страницу, на которой будет рендериться React-приложение в элементе с id wpmobile-settings-root.

Подключение React и сборка фронтенда

Для использования React в плагине рекомендуется использовать современные инструменты сборки, например, Webpack или Vite. В этом примере опишем минимальный подход с использованием Create React App, а затем подключим скомпилированный JavaScript в админке WordPress.

Создайте React-приложение в отдельной папке с помощью команды:

npx create-react-app wpmobile-settings

В каталоге wpmobile-settings/src создайте компонент App.js с кодом:

import React, { useEffect, useState } from 'react';

export default function App() {
  const [settings, setSettings] = useState({ option1: '', option2: false });
  const [loading, setLoading] = useState(true);
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('/wp-json/wpmobile/v1/settings')
      .then(res => res.json())
      .then(data => {
        setSettings(data);
        setLoading(false);
      });
  }, []);

  const handleChange = e => {
    const { name, type, checked, value } = e.target;
    setSettings(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
  };

  const handleSubmit = e => {
    e.preventDefault();
    fetch('/wp-json/wpmobile/v1/settings', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(settings),
    })
      .then(res => res.json())
      .then(data => {
        if (data.success) {
          setMessage('Настройки сохранены');
        } else {
          setMessage('Ошибка при сохранении');
        }
      });
  };

  if (loading) return <p>Загрузка...</p>;

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Опция 1:
        <input
          type="text"
          name="option1"
          value={settings.option1}
          onChange={handleChange}
        />
      </label>
      <br />
      <label>
        Опция 2:
        <input
          type="checkbox"
          name="option2"
          checked={settings.option2}
          onChange={handleChange}
        />
      </label>
      <br />
      <button type="submit">Сохранить</button>
      <p>{message}</p>
    </form>
  );
}

После сборки React-приложения командой npm run build скопируйте содержимое папки build/static/js в папку вашего плагина и подключите скрипты в админке WordPress:

add_action('admin_enqueue_scripts', 'wpmobile_enqueue_admin_scripts');
function wpmobile_enqueue_admin_scripts($hook) {
    if ($hook !== 'toplevel_page_wpmobile-settings') {
        return;
    }

    wp_enqueue_script('wpmobile-settings-js', plugin_dir_url(__FILE__) . 'build/static/js/main.js', ['wp-element'], null, true);
}

Обратите внимание, что wp-element — это встроенный в WordPress пакет React, его нужно указать как зависимость.

Создание REST API для хранения и получения настроек

Для связи React-компонента с сервером реализуем REST API маршрут, который будет отдавать текущие настройки и сохранять их. Используем WordPress-хуки для регистрации REST маршрутов.

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

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

function wpmobile_get_settings() {
    return [
        'option1' => get_option('wpmobile_option1', ''),
        'option2' => get_option('wpmobile_option2', false),
    ];
}

function wpmobile_update_settings(WP_REST_Request $request) {
    $params = $request->get_json_params();

    if (isset($params['option1'])) {
        update_option('wpmobile_option1', sanitize_text_field($params['option1']));
    }

    if (isset($params['option2'])) {
        update_option('wpmobile_option2', (bool)$params['option2']);
    }

    return ['success' => true];
}

Эти маршруты позволяют получить текущие настройки и сохранить новые с проверкой прав пользователя.

Резюме и рекомендации по безопасности

Создание страницы настроек плагина с React значительно улучшает опыт взаимодействия администратора с вашим плагином. При этом важно соблюдать лучшие практики безопасности:

Проверять права доступа при работе с REST API.
Санитизировать и валидировать данные перед сохранением.
Использовать nonce для защиты запросов, при необходимости.

Также рекомендуется оптимизировать загрузку скриптов, чтобы они подключались только на странице настроек вашего плагина, чтобы не нагружать админку лишними ресурсами.

Следуя этому примеру, вы сможете создавать современные, удобные и быстрые интерфейсы настройки для своих WordPress-проектов, используя весь потенциал React и REST API.