Динамические опросы — это отличный способ повысить вовлечённость пользователей на сайте, позволяя им видеть результаты голосования без перезагрузки страницы. В этой статье разберём, как создать такой опрос в WordPress с использованием AJAX, чтобы ответы отправлялись и обрабатывались мгновенно.
Почему стоит использовать AJAX для опросов в WordPress
Традиционные формы опросов требуют перезагрузки страницы после отправки ответа, что ухудшает пользовательский опыт. AJAX позволяет отправлять данные на сервер асинхронно, без обновления страницы, и возвращать результаты в реальном времени. Это делает процесс голосования более плавным и современным.
Кроме того, AJAX-опросы позволяют:
- Мгновенно обновлять результаты после голосования.
- Сократить нагрузку на сервер за счёт уменьшения количества полных загрузок страниц.
- Создавать более интерактивные интерфейсы опросов.
Создание кастомного AJAX-опроса: основные этапы
Для реализации AJAX-опроса нам понадобятся следующие шаги:
- Создать простую форму опроса с вариантами ответов.
- Обработать отправку данных через AJAX на стороне WordPress.
- Сохранить результаты голосования в базе данных.
- Вернуть обновлённые результаты для отображения на странице.
1. Создание формы опроса
Для начала добавим в шаблон сайта или через шорткод HTML-форму с радиокнопками для выбора варианта:
<form id="wppolls-ajax-form">
<label>
<input type="radio" name="wppolls_option" value="option1"> Вариант 1
</label><br>
<label>
<input type="radio" name="wppolls_option" value="option2"> Вариант 2
</label><br>
<label>
<input type="radio" name="wppolls_option" value="option3"> Вариант 3
</label><br>
<button type="submit">Голосовать</button>
</form>
<div id="wppolls-results"></div>Здесь у нас три варианта ответа и кнопка для отправки голосования.
2. Подключение скрипта AJAX
Создайте JavaScript-файл, который будет отправлять выбранный вариант на сервер без перезагрузки:
jQuery(document).ready(function($) {
$('#wppolls-ajax-form').on('submit', function(e) {
e.preventDefault();
var selected = $('input[name="wppolls_option"]:checked').val();
if (!selected) {
alert('Пожалуйста, выберите вариант');
return;
}
$.ajax({
url: wppolls_ajax_object.ajax_url,
type: 'POST',
data: {
action: 'wppolls_ajax_vote',
option: selected,
security: wppolls_ajax_object.nonce
},
success: function(response) {
if(response.success) {
$('#wppolls-results').html(response.data);
$('#wppolls-ajax-form').hide();
} else {
alert(response.data);
}
}
});
});
});Этот скрипт перехватывает отправку формы, проверяет, что выбран вариант, и отправляет AJAX-запрос на сервер. При успехе отображает результаты и скрывает форму.
3. Регистрация скрипта и локализация данных в WordPress
Добавьте следующий PHP-код в functions.php вашей темы или в плагин для подключения скрипта и передачи данных:
function wppolls_enqueue_scripts() {
wp_enqueue_script('wppolls-ajax-script', get_template_directory_uri() . '/js/wppolls-ajax.js', array('jquery'), null, true);
wp_localize_script('wppolls-ajax-script', 'wppolls_ajax_object', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wppolls_nonce')
));
}
add_action('wp_enqueue_scripts', 'wppolls_enqueue_scripts');Здесь мы подключаем скрипт и передаём URL для AJAX-запросов и nonce для безопасности.
4. Обработка AJAX-запроса в WordPress
Теперь создадим функцию, которая будет принимать запрос, сохранять голос и возвращать результаты:
function wppolls_ajax_vote() {
check_ajax_referer('wppolls_nonce', 'security');
if (empty($_POST['option'])) {
wp_send_json_error('Не выбран вариант');
}
$option = sanitize_text_field($_POST['option']);
// Получаем текущие результаты из базы данных (опция WordPress)
$results = get_option('wppolls_results', array(
'option1' => 0,
'option2' => 0,
'option3' => 0
));
if (!array_key_exists($option, $results)) {
wp_send_json_error('Неверный вариант');
}
$results[$option]++;
update_option('wppolls_results', $results);
// Формируем HTML для отображения результатов
$total = array_sum($results);
$output = '<h3>Результаты голосования:</h3><ul>';
foreach ($results as $key => $count) {
$percent = $total ? round($count / $total * 100) : 0;
$output .= sprintf('<li>%s: %d голосов (%d%%)</li>', ucfirst($key), $count, $percent);
}
$output .= '</ul>';
wp_send_json_success($output);
}
add_action('wp_ajax_wppolls_ajax_vote', 'wppolls_ajax_vote');
add_action('wp_ajax_nopriv_wppolls_ajax_vote', 'wppolls_ajax_vote');Функция проверяет nonce, валидирует входные данные, увеличивает счётчик выбранного варианта и сохраняет результаты в опции WordPress. Затем формирует простой HTML с процентами голосов и возвращает его.
Дополнительные советы и улучшения для AJAX-опросов
Защита от повторного голосования
Чтобы избежать многократного голосования с одного устройства, можно использовать cookie или сессию. Например, после успешного голосования установить cookie:
setcookie('wppolls_voted', 'yes', time() + 86400 * 30, '/');И при загрузке формы проверять, есть ли этот cookie, и скрывать опрос, показывая только результаты.
Использование пользовательских таблиц вместо опций
Для больших сайтов или если требуется хранить подробные данные о голосах (время, IP, пользователь) лучше создать отдельную таблицу в базе данных. Это позволит делать более сложный анализ и отчёты.
Интеграция с плагинами
Если вы хотите расширить функционал, можно использовать плагины как WPRemark для анализа результатов или Quizle для создания более сложных опросов с логикой.
Выводы и краткий чек-лист по созданию AJAX-опроса
- Создайте HTML-форму с вариантами ответов.
- Напишите JavaScript для отправки данных через AJAX.
- Зарегистрируйте скрипт и передайте AJAX URL и nonce.
- Обработайте запрос на сервере, сохраните голос и верните результаты.
- Добавьте защиту от повторного голосования.
Такой подход позволит быстро и без лишних плагинов внедрить динамический опрос на ваш сайт WordPress, улучшая взаимодействие с посетителями и повышая их вовлечённость.