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

Автор: Юлия Журавлева | Опубликовано: 08.12.2025

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

Что такое REST API в WordPress и почему он важен для калькуляторов

REST API — это интерфейс взаимодействия с сайтом WordPress через HTTP-запросы. Он позволяет получать, создавать, обновлять и удалять данные через стандартные методы GET, POST, PUT и DELETE. Для калькуляторов это особенно удобно, так как можно отправлять данные для расчётов на сервер и получать результат без перезагрузки страницы.

Использование REST API даёт следующие преимущества:

Асинхронность — калькулятор работает быстро и без перезагрузки.
Гибкость — можно создавать сложные сценарии с сохранением данных.
Безопасность — можно ограничить доступ к определённым маршрутам.
Масштабируемость — легко расширять функционал.

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

Регистрация кастомного REST API маршрута для калькулятора

Начнём с того, как добавить собственный REST API маршрут в WordPress. Для этого используем хук rest_api_init и функцию register_rest_route. Например, создадим маршрут /wpcalc/v1/calc, который будет принимать параметры и возвращать результат.

add_action('rest_api_init', function() {
    register_rest_route('wpcalc/v1', '/calc', array(
        'methods' => 'POST',
        'callback' => 'wpcalc_calculate_callback',
        'permission_callback' => '__return_true', // Для примера, в реальности ограничьте доступ
    ));
});

function wpcalc_calculate_callback(WP_REST_Request $request) {
    $params = $request->get_json_params();
    $a = isset($params['a']) ? floatval($params['a']) : 0;
    $b = isset($params['b']) ? floatval($params['b']) : 0;
    $operation = isset($params['operation']) ? $params['operation'] : 'add';

    switch ($operation) {
        case 'add':
            $result = $a + $b;
            break;
        case 'subtract':
            $result = $a - $b;
            break;
        case 'multiply':
            $result = $a * $b;
            break;
        case 'divide':
            $result = $b != 0 ? $a / $b : 'Ошибка: деление на ноль';
            break;
        default:
            $result = 'Неизвестная операция';
    }

    return rest_ensure_response(array('result' => $result));
}

В этом коде мы принимаем JSON с параметрами a, b и operation и возвращаем результат. Обратите внимание на permission_callback — для боевого сайта нужно реализовать проверку прав.

Фронтенд: отправка запросов к REST API и отображение результатов

Теперь создадим JavaScript-код, который будет отправлять данные на сервер и показывать результат пользователю. Для примера возьмём простой HTML с формой:

<form id="wpcalc-form">
  <input type="number" id="input-a" placeholder="Число A" required>
  <input type="number" id="input-b" placeholder="Число B" required>
  <select id="input-operation">
    <option value="add">Сложить</option>
    <option value="subtract">Вычесть</option>
    <option value="multiply">Умножить</option>
    <option value="divide">Разделить</option>
  </select>
  <button type="submit">Посчитать</button>
</form>
<div id="wpcalc-result"></div>

И JavaScript, который обрабатывает форму:

document.getElementById('wpcalc-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const a = parseFloat(document.getElementById('input-a').value);
    const b = parseFloat(document.getElementById('input-b').value);
    const operation = document.getElementById('input-operation').value;

    fetch('/wp-json/wpcalc/v1/calc', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ a: a, b: b, operation: operation })
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('wpcalc-result').textContent = 'Результат: ' + data.result;
    })
    .catch(error => {
        document.getElementById('wpcalc-result').textContent = 'Ошибка: ' + error;
    });
});

Такой подход позволяет быстро получать результат без перезагрузки, улучшая UX сайта.

Примеры плагинов для работы с REST API и калькуляторами в WordPress

Если не хочется писать код с нуля, можно использовать готовые решения с поддержкой REST API и калькуляторов:

WP REST API Controller — позволяет настраивать разрешения и маршруты API, что полезно для расширения функционала калькуляторов.
Formidable Forms — мощный плагин для создания форм и калькуляторов с возможностью интеграции через REST API.
Calculated Fields Form — специализированный плагин для калькуляторов, который можно расширять и интегрировать с API.

Эти плагины помогут быстро внедрить сложные вычисления с минимальным кодом.

Обеспечение безопасности при работе с REST API и калькуляторами

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

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

Использовать permission_callback для проверки прав доступа к REST маршрутам.
Проверять и валидировать все входящие данные — избегайте SQL-инъекций и XSS.
Использовать nonce для защиты от CSRF атак, если запросы идут из фронтенда.
Логировать ошибки и подозрительную активность.

Например, изменить permission_callback можно так:

'permission_callback' => function() {
    return current_user_can('edit_posts');
}

Это ограничит доступ к вычислениям только авторизованным редакторам и выше.

Расширение функционала: кеширование и обработка ошибок

Для повышения производительности и удобства пользователей можно добавить кеширование результатов расчётов. Например, если пользователь вводит одни и те же данные, результат можно доставать из кеша.

В WordPress можно использовать Transients API:

function wpcalc_calculate_callback(WP_REST_Request $request) {
    $params = $request->get_json_params();
    $cache_key = 'wpcalc_' . md5(json_encode($params));

    $cached = get_transient($cache_key);
    if ($cached !== false) {
        return rest_ensure_response(array('result' => $cached, 'cached' => true));
    }

    // Логика расчёта
    $a = isset($params['a']) ? floatval($params['a']) : 0;
    $b = isset($params['b']) ? floatval($params['b']) : 0;
    $operation = isset($params['operation']) ? $params['operation'] : 'add';

    switch ($operation) {
        case 'add':
            $result = $a + $b;
            break;
        case 'subtract':
            $result = $a - $b;
            break;
        case 'multiply':
            $result = $a * $b;
            break;
        case 'divide':
            $result = $b != 0 ? $a / $b : 'Ошибка: деление на ноль';
            break;
        default:
            $result = 'Неизвестная операция';
    }

    set_transient($cache_key, $result, 60 * 60); // Кеш на час

    return rest_ensure_response(array('result' => $result));
}

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