Как создать калькулятор с удалённым расчётом на WordPress с помощью REST API

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

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

Почему стоит использовать удалённый расчёт через REST API в WordPress калькуляторах

Если калькулятор предполагает тяжелые вычисления, обработку больших данных или необходим обмен данными с внешними системами, лучше вынести логику расчёта на отдельный сервис. Такой подход даст несколько преимуществ:

Уменьшение нагрузки на хостинг WordPress;
Возможность использовать более мощные языки и библиотеки для вычислений;
Более гибкая архитектура с возможностью обновлять вычислительный модуль независимо от сайта;
Безопасность: можно отделить бизнес-логику от публичной части сайта.

Для обмена данными удобно использовать REST API — стандартный способ взаимодействия между приложениями по HTTP с использованием JSON.

Как организовать отправку данных калькулятора на удалённый сервер через REST API

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

Создание формы калькулятора в WordPress

Начнём с простой формы с полями и кнопкой отправки. Для примера возьмём калькулятор, рассчитывающий стоимость услуги по двум параметрам — количество и тариф.

<form id="wpcalc-remote-form">
    <label>Количество:</label>
    <input type="number" id="wpcalc-quantity" name="quantity" min="1" value="1" required />

    <label>Тариф (руб):</label>
    <input type="number" id="wpcalc-rate" name="rate" min="0" value="100" required />

    <button type="submit">Рассчитать</button>
</form>

<div id="wpcalc-result"></div>

Эту форму можно добавить в любую страницу с помощью шорткода, виджета или прямо в шаблон темы.

JavaScript для отправки данных и отображения результата

Добавим скрипт, который при отправке формы заблокирует стандартное действие, соберёт данные и отправит их на удалённый API. В ответе ожидаем JSON с результатом.

document.getElementById('wpcalc-remote-form').addEventListener('submit', function(event) {
    event.preventDefault();

    const quantity = document.getElementById('wpcalc-quantity').value;
    const rate = document.getElementById('wpcalc-rate').value;
    const resultContainer = document.getElementById('wpcalc-result');

    resultContainer.innerHTML = 'Выполняется расчет...';

    fetch('https://api.example.com/calc', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ quantity: quantity, rate: rate })
    })
    .then(response => {
        if (!response.ok) throw new Error('Ошибка сети');
        return response.json();
    })
    .then(data => {
        if(data && data.result !== undefined) {
            resultContainer.innerHTML = `Стоимость: ${data.result} руб.`;
        } else {
            resultContainer.innerHTML = 'Некорректный ответ от сервера';
        }
    })
    .catch(error => {
        resultContainer.innerHTML = 'Ошибка при расчёте: ' + error.message;
    });
});

Обратите внимание, что URL https://api.example.com/calc — это адрес удалённого сервиса, который вы должны настроить отдельно или использовать готовый.

Как создать REST API для удалённого расчёта (пример на PHP)

Если у вас есть свой сервер с PHP, можно реализовать простой API, который принимает POST запрос с параметрами и возвращает результат.

<?php
// api/calc.php
header('Content-Type: application/json');

// Получаем сырые данные
$data = json_decode(file_get_contents('php://input'), true);

// Проверяем данные
if(!isset($data['quantity']) || !isset($data['rate'])) {
    http_response_code(400);
    echo json_encode(['error' => 'Отсутствуют параметры']);
    exit;
}

$quantity = (int)$data['quantity'];
$rate = (float)$data['rate'];

// Простая бизнес-логика расчёта
$result = $quantity * $rate;

// Возвращаем ответ
echo json_encode(['result' => $result]);
?>

Такой скрипт можно разместить на отдельном сервере или в отдельной директории. Важно учитывать безопасность — ограничивать доступ, использовать HTTPS, валидировать входящие данные.

Интеграция с WordPress через шорткод

Чтобы проще вставлять калькулятор на страницы, создадим шорткод в WordPress. Добавьте в functions.php темы или в плагин следующий код:

function wpcalc_remote_calculator_shortcode() {
    ob_start();
    ?>
    <form id="wpcalc-remote-form">
        <label>Количество:</label>
        <input type="number" id="wpcalc-quantity" name="quantity" min="1" value="1" required />

        <label>Тариф (руб):</label>
        <input type="number" id="wpcalc-rate" name="rate" min="0" value="100" required />

        <button type="submit">Рассчитать</button>
    </form>

    <div id="wpcalc-result"></div>

    <script>
    document.getElementById('wpcalc-remote-form').addEventListener('submit', function(event) {
        event.preventDefault();
        const quantity = document.getElementById('wpcalc-quantity').value;
        const rate = document.getElementById('wpcalc-rate').value;
        const resultContainer = document.getElementById('wpcalc-result');

        resultContainer.innerHTML = 'Выполняется расчет...';

        fetch('https://api.example.com/calc', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ quantity: quantity, rate: rate })
        })
        .then(response => {
            if (!response.ok) throw new Error('Ошибка сети');
            return response.json();
        })
        .then(data => {
            if(data && data.result !== undefined) {
                resultContainer.innerHTML = `Стоимость: ${data.result} руб.`;
            } else {
                resultContainer.innerHTML = 'Некорректный ответ от сервера';
            }
        })
        .catch(error => {
            resultContainer.innerHTML = 'Ошибка при расчёте: ' + error.message;
        });
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wpcalc_remote_calculator', 'wpcalc_remote_calculator_shortcode');

Теперь в редакторе WordPress можно вставлять [wpcalc_remote_calculator] и получать полноценный калькулятор с удалённым расчётом.

Советы по безопасности и оптимизации работы с REST API

При работе с удалёнными API важно:

Использовать HTTPS для защиты данных в сети;
Ограничивать доступ к API с помощью ключей, токенов или IP-фильтров;
Проверять и валидировать все входящие данные на стороне сервера;
Использовать кэширование результатов, если вычисления дорогие и повторяются часто;
Обрабатывать ошибки и таймауты корректно, чтобы не нарушать UX;
Поддерживать мониторинг и логирование запросов для быстрого выявления проблем.

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

Если вы хотите упростить создание и интеграцию калькуляторов с удалённым API, обратите внимание на следующие плагины:

WPRemark — плагин для создания кастомных форм с расширенными настройками AJAX и REST API;
Expert Review — для сбора отзывов с возможностью интеграции с внешними сервисами;
ABC Pagination — для удобной пагинации больших форм и результатов.

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

Итог

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