Что такое шорткод в WordPress и зачем он нужен для калькулятора
Шорткод — это удобный способ вставить функционал в любую часть сайта без необходимости писать сложный код прямо в редакторе. Особенно полезен он для калькуляторов, потому что позволяет пользователям легко добавлять интерактивные элементы на страницы или в записи. Вместо того чтобы каждый раз вставлять скрипты или плагины, вы создаёте один шорткод и используете его сколько угодно раз.
В этой статье мы подробно разберём, как создать собственный шорткод для калькулятора на WordPress, с примером кода и объяснениями. Также покажем, как добавить параметры для гибкости и интегрировать JavaScript для динамических вычислений.
Создание базового шорткода для калькулятора: пример на PHP
Для начала создадим простой калькулятор сложения, который принимает два числа и выводит результат. Код добавим в файл functions.php вашей темы или в отдельный плагин.
function wpcalc_simple_calculator_shortcode($atts) {
$a = isset($atts['a']) ? floatval($atts['a']) : 0;
$b = isset($atts['b']) ? floatval($atts['b']) : 0;
$result = $a + $b;
return "Результат сложения: " . $result;
}
add_shortcode('wpcalc_sum', 'wpcalc_simple_calculator_shortcode');Теперь, если вы вставите в запись или страницу шорткод [wpcalc_sum a=5 b=10], то увидите вывод: «Результат сложения: 15».
Такой подход прост, но не интерактивен — значения задаются в шорткоде. Чтобы сделать калькулятор, который пользователь может заполнять сам, нужно добавить HTML форму и JavaScript.
Добавление интерактивной формы и JavaScript для динамического калькулятора
Давайте расширим шорткод, чтобы он выводил форму с двумя полями для чисел и кнопкой, а результат вычислялся на лету без перезагрузки страницы.
Вот как это можно сделать:
function wpcalc_interactive_calculator_shortcode() {
ob_start();
?>
<form id="wpcalc-form">
<input type="number" id="wpcalc-a" placeholder="Число A" required />
<input type="number" id="wpcalc-b" placeholder="Число B" required />
<button type="button" id="wpcalc-calc-btn">Сложить</button>
</form>
<div id="wpcalc-result"></div>
<script>
document.getElementById('wpcalc-calc-btn').addEventListener('click', function() {
var a = parseFloat(document.getElementById('wpcalc-a').value) || 0;
var b = parseFloat(document.getElementById('wpcalc-b').value) || 0;
var result = a + b;
document.getElementById('wpcalc-result').textContent = 'Результат сложения: ' + result;
});
</script>
<?php
return ob_get_clean();
}
add_shortcode('wpcalc_interactive_sum', 'wpcalc_interactive_calculator_shortcode');Теперь вы можете использовать [wpcalc_interactive_sum] в любом месте сайта, и посетители увидят форму с полями для ввода, кнопкой и динамическим выводом результата.
Передача параметров в шорткод: настройка калькулятора
Чтобы сделать калькулятор гибче, полезно передавать настройки через атрибуты шорткода. Например, можно указать тип операции (сложение, вычитание) или добавить начальные значения в поля.
Вот пример, как это реализовать:
function wpcalc_flexible_calculator_shortcode($atts) {
$atts = shortcode_atts(array(
'operation' => 'sum',
'a' => '',
'b' => '',
), $atts, 'wpcalc_flexible_calc');
ob_start();
?>
<form id="wpcalc-flexible-form">
<input type="number" id="wpcalc-a" placeholder="Число A" value="<?php echo esc_attr($atts['a']); ?>" required />
<input type="number" id="wpcalc-b" placeholder="Число B" value="<?php echo esc_attr($atts['b']); ?>" required />
<select id="wpcalc-operation">
<option value="sum" <?php selected($atts['operation'], 'sum'); ?>>Сложение</option>
<option value="sub" <?php selected($atts['operation'], 'sub'); ?>>Вычитание</option>
<option value="mul" <?php selected($atts['operation'], 'mul'); ?>>Умножение</option>
<option value="div" <?php selected($atts['operation'], 'div'); ?>>Деление</option>
</select>
<button type="button" id="wpcalc-calc-btn">Посчитать</button>
</form>
<div id="wpcalc-result"></div>
<script>
document.getElementById('wpcalc-calc-btn').addEventListener('click', function() {
var a = parseFloat(document.getElementById('wpcalc-a').value) || 0;
var b = parseFloat(document.getElementById('wpcalc-b').value) || 0;
var op = document.getElementById('wpcalc-operation').value;
var res = 0;
switch(op) {
case 'sum': res = a + b; break;
case 'sub': res = a - b; break;
case 'mul': res = a * b; break;
case 'div': res = b !== 0 ? a / b : 'Ошибка: деление на 0'; break;
}
document.getElementById('wpcalc-result').textContent = 'Результат: ' + res;
});
</script>
<?php
return ob_get_clean();
}
add_shortcode('wpcalc_flexible_calc', 'wpcalc_flexible_calculator_shortcode');Пример использования шорткода с параметрами:
[wpcalc_flexible_calc operation="mul" a="3" b="4"]
Это выведет форму с предустановленными числами 3 и 4, и выбранной операцией умножения.
Рекомендуемые плагины для расширения функционала калькуляторов на WordPress
Если вы хотите более сложные калькуляторы с графиками, условной логикой или интеграцией с формами, можно использовать готовые плагины. Вот несколько проверенных вариантов:
- Calculated Fields Form — позволяет создавать многофункциональные калькуляторы с формулами, условной логикой и экспортом данных.
- Formidable Forms — мощный конструктор форм с возможностью создавать калькуляторы и кастомные вычисления.
- WP Cost Estimation & Payment Forms Builder — подходит для создания калькуляторов стоимости и заказов.
Эти плагины отлично подходят для тех, кто не хочет писать код, но желает получить сложный и красивый калькулятор.
Советы по оптимизации и безопасности шорткодов с калькуляторами
При создании калькуляторов через шорткоды важно учитывать безопасность и производительность:
- Всегда используйте функции
esc_html()иesc_attr()для вывода данных, чтобы избежать XSS-уязвимостей. - Если добавляете JavaScript, не забывайте о конфликте скриптов — лучше подключать JS отдельно через
wp_enqueue_script(). - Проверяйте и фильтруйте входящие данные, особенно если они передаются через атрибуты шорткодов.
- Для сложных вычислений можно вынести их на сервер, используя AJAX, чтобы не нагружать клиент.
Следуя этим рекомендациям, вы создадите удобные и безопасные калькуляторы для своих пользователей.