Редактор Gutenberg в WordPress стал стандартом для создания контента, предоставляя удобный визуальный интерфейс для добавления различных блоков. Для сайтов с опросами, например на wppolls.ru, важно уметь интегрировать интерактивные опросы непосредственно в блоки Gutenberg, чтобы повысить вовлечённость пользователей и упростить администрирование.
Почему важно использовать блоки Gutenberg для опросов
До Gutenberg большинство опросов внедрялось через шорткоды или виджеты, что было не всегда удобно и гибко. Использование блока позволяет:
- Визуально настраивать опросы прямо в редакторе страниц и записей.
- Обеспечить адаптивность и современный дизайн.
- Интегрировать динамические данные через JavaScript без перезагрузки страницы.
- Упростить повторное использование опросов с помощью блоков.
Таким образом, добавление опросов в Gutenberg — это шаг к более современному и удобному UX на вашем сайте.
Популярные плагины для создания опросов с блоками Gutenberg
Рассмотрим несколько популярных и проверенных плагинов, которые поддерживают блоки опросов в Gutenberg:
1. YOP Poll
YOP Poll предлагает простой интерфейс для создания опросов и добавления их через блоки или шорткоды. Плагин поддерживает многовариантные опросы, ограничение голосов, расписание публикаций.
2. WP-Polls
Очень популярный плагин с возможностью интеграции в Gutenberg через кастомный блок. Позволяет гибко настраивать дизайн и логику опросов.
3. Quizle от WPShop
Современный плагин с поддержкой многоэтапных опросов и викторин, отлично интегрируется в Gutenberg через собственные блоки. Позволяет создавать интерактивные сценарии с ветвлением.
Как создать кастомный блок Gutenberg для опроса: пошаговое руководство
Если вы хотите реализовать собственный блок опроса без использования сторонних плагинов, можно создать кастомный блок с помощью React и API Gutenberg. Ниже пример минимальной реализации.
Шаг 1. Подключение скрипта блока
В functions.php вашей темы или плагина добавьте:
function wppolls_register_poll_block() {
wp_register_script(
'wppolls-poll-block',
get_template_directory_uri() . '/blocks/poll/block.js',
array('wp-blocks', 'wp-element', 'wp-editor'),
filemtime(get_template_directory() . '/blocks/poll/block.js')
);
register_block_type('wppolls/poll', array(
'editor_script' => 'wppolls-poll-block',
'render_callback' => 'wppolls_render_poll_block',
'attributes' => array(
'question' => array('type' => 'string'),
'options' => array('type' => 'array', 'default' => array()),
),
));
}
add_action('init', 'wppolls_register_poll_block');Шаг 2. Создание файла block.js с React кодом
Создайте файл blocks/poll/block.js с содержимым:
const { registerBlockType } = wp.blocks;
const { TextControl, Button } = wp.components;
const { useState } = wp.element;
registerBlockType('wppolls/poll', {
title: 'Опрос',
icon: 'list-view',
category: 'widgets',
attributes: {
question: { type: 'string' },
options: { type: 'array', default: [] },
},
edit: (props) => {
const { attributes, setAttributes } = props;
const { question, options } = attributes;
const [optionText, setOptionText] = useState('');
function wppolls_addOption() {
if(optionText.trim() !== '') {
setAttributes({ options: [...options, optionText.trim()] });
setOptionText('');
}
}
return (
<div>
<TextControl
label="Вопрос опроса"
value={ question }
onChange={ (value) => setAttributes({ question: value }) }
/>
<div>
<TextControl
label="Добавить вариант ответа"
value={ optionText }
onChange={ setOptionText }
/>
<Button isPrimary onClick={ wppolls_addOption }>Добавить</Button>
</div>
<ul>
{options.map((opt, index) => <li key={index}>{opt}</li>)}
</ul>
</div>
);
},
save: () => {
// Рендеринг на фронтенде через PHP
return null;
},
});Шаг 3. Рендеринг блока на фронтенде
В functions.php добавьте функцию для рендеринга:
function wppolls_render_poll_block($attributes) {
$question = esc_html($attributes['question'] ?? '');
$options = $attributes['options'] ?? [];
if (empty($question) || empty($options)) {
return '';
}
ob_start();
?>
<form class="wppolls-poll-form">
<p><strong><?php echo $question; ?></strong></p>
<?php foreach ($options as $i => $option): ?>
<label>
<input type="radio" name="wppolls_poll" value="<?php echo esc_attr($option); ?>"> <?php echo esc_html($option); ?>
</label><br>
<?php endforeach; ?>
<button type="submit">Голосовать</button>
</form>
<div class="wppolls-poll-result" style="display:none;"></div>
<script>
(function(){
const form = document.currentScript.previousElementSibling;
const resultDiv = form.nextElementSibling;
form.addEventListener('submit', function(e){
e.preventDefault();
const selected = form.querySelector('input[name=wppolls_poll]:checked');
if(!selected) {
alert('Пожалуйста, выберите вариант ответа');
return;
}
// Здесь можно отправить AJAX запрос для сохранения голосов
form.style.display = 'none';
resultDiv.style.display = 'block';
resultDiv.innerHTML = '<p>Спасибо за ваш голос: ' + selected.value + '</p>';
});
})();
</script>
<?php
return ob_get_clean();
}Как интегрировать Quizle для расширенных опросов в Gutenberg
Плагин Quizle позволяет создавать сложные опросы с ветвлением и визуально добавлять их через блоки. После установки плагина:
- Создайте новый опрос в админке Quizle.
- Скопируйте шорткод опроса.
- Используйте блок «Шорткод» в Gutenberg и вставьте туда этот шорткод.
Quizle также предлагает собственные блоки, которые автоматически подгружают опросы по ID, что удобно для повторного использования и управления.
Советы по улучшению UX при использовании опросов в Gutenberg
Для повышения удобства пользователей и улучшения визуального восприятия опросов в блоках рекомендуем:
- Добавить стили для радиокнопок и кнопки голосования, чтобы они были заметнее и соответствовали дизайну сайта.
- Использовать AJAX для отправки ответов без перезагрузки страницы, как в примере кастомного блока.
- Добавить сообщения об ошибках и успешном голосовании для ясности.
- Ограничить количество голосов с помощью куки или авторизации.
- Показывать результаты опроса после голосования, чтобы повысить вовлечённость.
Это значительно улучшит взаимодействие посетителей с вашим сайтом и повысит качество сбора данных.