Как добавить калькулятор расчетов на страницу WordPress без плагинов

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

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

Часто разработчики и владельцы сайтов сталкиваются с необходимостью добавить калькулятор расчетов (например, для подсчета стоимости услуг или товаров) на страницу WordPress. В большинстве случаев для этого используют плагины, но они могут замедлять сайт, создавать конфликты или просто не давать требуемой гибкости.

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

В этой статье мы разберем, как реализовать калькулятор расчетов на PHP и JavaScript, используя лучшие практики WordPress, включая работу с шорткодами и AJAX.

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

Для начала создадим простой шорткод [wpcalc_custom_calculator], который выведет форму калькулятора. Добавьте следующий код в functions.php вашей темы или в кастомный плагин:

function wpcalc_display_calculator() {
    ob_start();
    ?>
    <form id="wpcalc-form">
        <label for="wpcalc-input1">Введите число 1:</label>
        <input type="number" id="wpcalc-input1" name="input1" required>
        <br>
        <label for="wpcalc-input2">Введите число 2:</label>
        <input type="number" id="wpcalc-input2" name="input2" required>
        <br>
        <button type="submit">Рассчитать сумму</button>
    </form>
    <div id="wpcalc-result"></div>
    <?php
    return ob_get_clean();
}
add_shortcode('wpcalc_custom_calculator', 'wpcalc_display_calculator');

Этот код выводит форму с двумя полями и кнопкой. Результат будет отображаться в блоке с id wpcalc-result.

Добавляем AJAX для обработки расчетов без перезагрузки страницы

Чтобы сделать калькулятор интерактивным и не перезагружать страницу при отправке формы, используем AJAX WordPress. Для этого подключим JavaScript и зарегистрируем обработчик на сервере.

Шаг 1: Подключаем скрипт и локализуем параметры AJAX

function wpcalc_enqueue_scripts() {
    wp_enqueue_script('wpcalc-script', get_stylesheet_directory_uri() . '/js/wpcalc-script.js', array('jquery'), null, true);
    wp_localize_script('wpcalc-script', 'wpcalc_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'wpcalc_enqueue_scripts');

Создайте файл wpcalc-script.js в папке js вашей темы.

Шаг 2: Пишем JavaScript для отправки данных на сервер

jQuery(document).ready(function($) {
    $('#wpcalc-form').on('submit', function(e) {
        e.preventDefault();
        var input1 = $('#wpcalc-input1').val();
        var input2 = $('#wpcalc-input2').val();

        $.ajax({
            url: wpcalc_ajax_obj.ajax_url,
            type: 'POST',
            data: {
                action: 'wpcalc_calculate_sum',
                input1: input1,
                input2: input2
            },
            success: function(response) {
                $('#wpcalc-result').html('<strong>Результат: ' + response + '</strong>');
            },
            error: function() {
                $('#wpcalc-result').html('<strong>Ошибка при вычислении.</strong>');
            }
        });
    });
});

Шаг 3: Обрабатываем AJAX-запрос на PHP

function wpcalc_handle_ajax_calculate_sum() {
    $input1 = isset($_POST['input1']) ? floatval($_POST['input1']) : 0;
    $input2 = isset($_POST['input2']) ? floatval($_POST['input2']) : 0;
    $sum = $input1 + $input2;
    echo $sum;
    wp_die();
}
add_action('wp_ajax_wpcalc_calculate_sum', 'wpcalc_handle_ajax_calculate_sum');
add_action('wp_ajax_nopriv_wpcalc_calculate_sum', 'wpcalc_handle_ajax_calculate_sum');

Этот обработчик принимает данные из AJAX-запроса, суммирует два числа и возвращает результат.

Расширяем калькулятор: добавляем выбор операции и проверки

Наш базовый калькулятор можно легко расширить, добавив выбор операции (сложение, вычитание, умножение, деление) и базовые проверки данных.

Изменим HTML-форму:

<form id="wpcalc-form">
    <input type="number" id="wpcalc-input1" name="input1" required>
    <select id="wpcalc-operation" name="operation" required>
        <option value="add">Сложение</option>
        <option value="subtract">Вычитание</option>
        <option value="multiply">Умножение</option>
        <option value="divide">Деление</option>
    </select>
    <input type="number" id="wpcalc-input2" name="input2" required>
    <button type="submit">Рассчитать</button>
</form>

Изменим JS для передачи операции:

data: {
    action: 'wpcalc_calculate_sum',
    input1: input1,
    input2: input2,
    operation: $('#wpcalc-operation').val()
},

И расширим PHP-обработчик для разных операций и проверки деления на ноль:

function wpcalc_handle_ajax_calculate_sum() {
    $input1 = isset($_POST['input1']) ? floatval($_POST['input1']) : 0;
    $input2 = isset($_POST['input2']) ? floatval($_POST['input2']) : 0;
    $operation = isset($_POST['operation']) ? sanitize_text_field($_POST['operation']) : 'add';

    switch ($operation) {
        case 'subtract':
            $result = $input1 - $input2;
            break;
        case 'multiply':
            $result = $input1 * $input2;
            break;
        case 'divide':
            if ($input2 == 0) {
                echo 'Ошибка: деление на ноль';
                wp_die();
            }
            $result = $input1 / $input2;
            break;
        case 'add':
        default:
            $result = $input1 + $input2;
    }
    echo $result;
    wp_die();
}

Полезные советы по безопасности и производительности

При работе с AJAX и пользовательскими данными важно соблюдать ряд рекомендаций:

Используйте sanitize_text_field и floatval для очистки входящих данных.
Включайте nonce-проверки для защиты от CSRF (здесь для простоты не показано, но в реальных проектах обязательно).
Минимизируйте объем JavaScript и используйте кеширование для ускорения загрузки.
Если калькулятор сложный, выносите логику в отдельные классы или файлы для удобства поддержки.

Альтернативные плагины для калькуляторов, которые можно использовать с wpcalc.ru

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

Calculated Fields Form — мощный плагин для создания любых форм с расчетами, поддерживает сложные формулы.
Formidable Forms — конструктор форм с поддержкой вычислений и условной логики.
WP Cost Estimation & Payment Forms Builder — плагин для создания калькуляторов стоимости с интеграцией платежей.

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