В условиях растущей важности энергоэффективности зданий и сооружений полезно иметь на сайте инструмент, который позволит посетителям быстро оценить энергопотребление и возможную экономию. В этой статье мы разберём, как создать собственный калькулятор расчёта энергоэффективности в WordPress с нуля, используя PHP и AJAX, а также рассмотрим плагины, которые помогут упростить задачу.
Почему важен калькулятор энергоэффективности
Энергоэффективность – показатель, который помогает оценить, насколько рационально используется энергия в доме, офисе или другом здании. Правильный расчёт позволяет выявить зоны наиболее больших потерь и принять меры для их снижения. Для сайта на WordPress такой калькулятор может быть полезен компаниям, которые занимаются энергоаудитом, установкой систем утепления, отопления и вентиляции.
Создание такого инструмента с нуля позволяет адаптировать калькулятор под ваши конкретные задачи, учесть уникальные формулы и параметры, которые важны именно для вашей аудитории.
Основные параметры для расчёта энергоэффективности
Перед созданием калькулятора нужно определить, какие данные будут вводить пользователи:
- Площадь помещения (м²)
- Тип здания (жилое, офисное, промышленное)
- Уровень теплоизоляции стен (низкий, средний, высокий)
- Количество окон и их тип (одинарные, двойные стеклопакеты)
- Тип отопления (электрическое, газовое, твердотопливное)
- Среднее потребление энергии в месяц (кВт⋅ч)
Основываясь на этих данных, можно рассчитать примерный коэффициент энергоэффективности и рекомендовать меры по улучшению.
Пошаговое создание калькулятора с AJAX и PHP
1. Создание формы ввода данных
Добавим форму на страницу WordPress. Для этого можно использовать шорткод, который зарегистрируем в functions.php вашей темы или в отдельном плагине:
function wpcalc_energy_efficiency_form() {
ob_start();
?>
<form id="wpcalc-energy-form">
<label>Площадь помещения (м²):<br><input type="number" name="area" required min="1"></label><br><br>
<label>Тип здания:<br>
<select name="building_type" required>
<option value="residential">Жилое</option>
<option value="office">Офисное</option>
<option value="industrial">Промышленное</option>
</select>
</label><br><br>
<label>Уровень теплоизоляции:<br>
<select name="insulation" required>
<option value="low">Низкий</option>
<option value="medium">Средний</option>
<option value="high">Высокий</option>
</select>
</label><br><br>
<label>Тип окон:<br>
<select name="window_type" required>
<option value="single">Одинарные</option>
<option value="double">Двойные стеклопакеты</option>
</select>
</label><br><br>
<label>Тип отопления:<br>
<select name="heating_type" required>
<option value="electric">Электрическое</option>
<option value="gas">Газовое</option>
<option value="solid_fuel">Твердотопливное</option>
</select>
</label><br><br>
<label>Среднее потребление энергии в месяц (кВт⋅ч):<br><input type="number" name="energy_usage" required min="0"></label><br><br>
<input type="submit" value="Рассчитать">
</form>
<div id="wpcalc-energy-result" style="margin-top:20px;"></div>
<script>
jQuery(document).ready(function($){
$('#wpcalc-energy-form').on('submit', function(e){
e.preventDefault();
var data = $(this).serialize();
$.post(wpcalc_energy_ajax.ajax_url, data + '&action=wpcalc_energy_efficiency_calc', function(response){
$('#wpcalc-energy-result').html(response.data);
});
});
});
</script>
<?php
return ob_get_clean();
}
add_shortcode('wpcalc_energy_efficiency', 'wpcalc_energy_efficiency_form');2. Обработка AJAX запроса в PHP
Добавим обработчик, который будет принимать данные, рассчитывать энергоэффективность и возвращать результат:
function wpcalc_energy_efficiency_calc_callback() {
// Проверяем и получаем данные
$area = floatval($_POST['area']);
$building_type = sanitize_text_field($_POST['building_type']);
$insulation = sanitize_text_field($_POST['insulation']);
$window_type = sanitize_text_field($_POST['window_type']);
$heating_type = sanitize_text_field($_POST['heating_type']);
$energy_usage = floatval($_POST['energy_usage']);
// Базовые коэффициенты
$building_coeffs = [
'residential' => 1.0,
'office' => 1.2,
'industrial' => 1.5
];
$insulation_coeffs = [
'low' => 1.5,
'medium' => 1.0,
'high' => 0.7
];
$window_coeffs = [
'single' => 1.4,
'double' => 1.0
];
$heating_coeffs = [
'electric' => 1.3,
'gas' => 1.0,
'solid_fuel' => 1.1
];
// Рассчёт энергоэффективности
$efficiency_score = ($energy_usage / $area) *
$building_coeffs[$building_type] *
$insulation_coeffs[$insulation] *
$window_coeffs[$window_type] *
$heating_coeffs[$heating_type];
// Формируем оценку
if ($efficiency_score < 5) {
$rating = 'Высокая энергоэффективность';
} elseif ($efficiency_score < 10) {
$rating = 'Средняя энергоэффективность';
} else {
$rating = 'Низкая энергоэффективность';
}
$result = '<h3>Результат расчёта</h3>';
$result .= '<p>Индекс энергоэффективности: ' . round($efficiency_score, 2) . '</p>';
$result .= '<p>Оценка: <strong>' . $rating . '</strong></p>';
wp_send_json_success($result);
}
add_action('wp_ajax_wpcalc_energy_efficiency_calc', 'wpcalc_energy_efficiency_calc_callback');
add_action('wp_ajax_nopriv_wpcalc_energy_efficiency_calc', 'wpcalc_energy_efficiency_calc_callback');3. Подключение скриптов и локализация AJAX URL
Чтобы AJAX работал, нужно добавить подключение jQuery и локализовать скрипт, передав AJAX URL. Добавьте в functions.php:
function wpcalc_enqueue_scripts() {
wp_enqueue_script('jquery');
// Локализация скрипта для передачи ajax_url
wp_localize_script('jquery', 'wpcalc_energy_ajax', [
'ajax_url' => admin_url('admin-ajax.php')
]);
}
add_action('wp_enqueue_scripts', 'wpcalc_enqueue_scripts');Использование плагинов для расширения функционала
Если вы не хотите писать код с нуля, обратите внимание на плагины, которые могут помочь с формами и расчётами:
- WPRemark – мощный плагин для создания динамических форм с расчетами на WordPress. Позволяет строить сложные формулы и интегрироваться с AJAX.
- Clearfy Pro – плагин для оптимизации сайта, который улучшит скорость работы вашего калькулятора, особенно при большом потоке пользователей.
Использование этих плагинов позволит упростить разработку и добавить дополнительные возможности, такие как сохранение результатов, экспорт в PDF или интеграция с CRM.
Советы по улучшению и оптимизации калькулятора
Чтобы калькулятор работал быстро и корректно, важно учесть следующие моменты:
- Используйте
wp_send_json_successиwp_send_json_errorдля корректного возврата ответов AJAX. - Кешируйте результаты расчётов с помощью Transients API, если данные повторяются, чтобы снизить нагрузку на сервер.
- Добавьте проверку и защиту от спама и ботов (например, reCAPTCHA) при необходимости.
- Обеспечьте адаптивность формы для мобильных устройств с помощью CSS и JavaScript.
- Тестируйте калькулятор на разных браузерах для совместимости.
Заключение
Создать калькулятор расчёта энергоэффективности в WordPress возможно как с помощью собственного кода, так и с использованием готовых плагинов. В статье приведён пример базового решения с AJAX и PHP, который легко масштабируется и настраивается под ваши задачи. Интеграция с такими инструментами, как WPRemark, позволит значительно расширить функциональность и упростить поддержку калькулятора на вашем сайте.