Как сделать многоуровневый вопросник в WordPress с примерами кода

Автор: Артем Фомин | Опубликовано: 27.01.2026

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

Что такое многоуровневый вопросник в WordPress и зачем он нужен

Многоуровневый вопросник — это опрос, где следующий вопрос зависит от ответа на предыдущий. Это создаёт персонализированный опыт, помогает сегментировать аудиторию и повысить точность получаемых данных.

В WordPress можно реализовать такой квиз двумя способами: с помощью плагинов или полностью на чистом коде. Плагины ускоряют разработку, а кастомный код даёт полный контроль.

Преимущества многоуровневых вопросников

Персонализация вопросов и вариантов ответов для каждого пользователя.
Повышение вовлечённости за счёт интерактивности.
Возможность создавать сложные опросы с ветвлениями и адаптивной логикой.

Недостатки и сложности

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

Плагины для создания многоуровневых вопросников в WordPress

Если вы хотите быстро получить работающий многоуровневый вопросник, обратите внимание на следующие плагины:

Quizle — плагин с поддержкой многоуровневых квизов, логикой переходов и красивым интерфейсом. Имеет удобный конструктор и возможность интеграции с WooCommerce.
Подробнее о Quizle на WPSHOP
Expert Review — позволяет создавать экспертные опросы с ветвлениями и условными переходами.
Подробнее об Expert Review на WPSHOP
WP Quiz — популярный плагин с базовой поддержкой вопросников, который можно доработать кодом.

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

Создание простого многоуровневого вопросника на коде в WordPress

Давайте рассмотрим пример реализации квиза с двумя уровнями вопросов, где следующий вопрос зависит от выбранного ответа.

Шаг 1. Добавляем шорткод для вывода вопросника

Создайте функцию wpquizru_render_multilevel_quiz, которая выводит первый вопрос и подключает JavaScript для обработки ответов.

function wpquizru_render_multilevel_quiz() {
    ob_start();
    ?>
    <div id="wpquizru-quiz-container">
        <div class="question" data-question="1">
            <p>Какой тип контента вас интересует?</p>
            <button class="answer" data-next="2a">Статьи</button>
            <button class="answer" data-next="2b">Видео</button>
        </div>
        <div class="question" data-question="2a" style="display:none;">
            <p>Какую тему статей вы предпочитаете?</p>
            <button class="answer" data-next="end">Технологии</button>
            <button class="answer" data-next="end">Образование</button>
        </div>
        <div class="question" data-question="2b" style="display:none;">
            <p>Какой формат видео вам больше нравится?</p>
            <button class="answer" data-next="end">Обучающие</button>
            <button class="answer" data-next="end">Развлекательные</button>
        </div>
        <div class="question" data-question="end" style="display:none;">
            <p>Спасибо за участие! Ваш выбор сохранён.</p>
        </div>
    </div>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const container = document.getElementById('wpquizru-quiz-container');
        container.addEventListener('click', function(e) {
            if(e.target.classList.contains('answer')) {
                const current = e.target.closest('.question');
                const nextId = e.target.getAttribute('data-next');
                current.style.display = 'none';
                const nextQuestion = container.querySelector('[data-question="' + nextId + '"]');
                if(nextQuestion) {
                    nextQuestion.style.display = 'block';
                }
            }
        });
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wpquizru_multilevel_quiz', 'wpquizru_render_multilevel_quiz');

Этот код создаёт простой переход по вопросам без перезагрузки страницы, используя JavaScript. Вопросы скрываются и показываются динамически.

Шаг 2. Добавляем сохранение ответов через AJAX

Чтобы собирать данные, расширим функционал AJAX, который будет отправлять ответы на сервер.

add_action('wp_ajax_wpquizru_save_answer', 'wpquizru_save_answer_callback');
add_action('wp_ajax_nopriv_wpquizru_save_answer', 'wpquizru_save_answer_callback');

function wpquizru_save_answer_callback() {
    if(!isset($_POST['answer'])) {
        wp_send_json_error('Нет данных');
    }
    $answer = sanitize_text_field($_POST['answer']);
    // Здесь можно сохранить ответ в базу данных, например в user meta или в отдельную таблицу
    // update_user_meta(get_current_user_id(), 'wpquizru_answer', $answer);
    wp_send_json_success('Ответ сохранён');
}

И изменим JavaScript для отправки данных на сервер:

const container = document.getElementById('wpquizru-quiz-container');
container.addEventListener('click', function(e) {
    if(e.target.classList.contains('answer')) {
        const current = e.target.closest('.question');
        const nextId = e.target.getAttribute('data-next');
        const answerText = e.target.textContent;

        // Отправляем AJAX
        fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            },
            body: new URLSearchParams({
                action: 'wpquizru_save_answer',
                answer: answerText
            })
        }).then(response => response.json()).then(data => {
            if(data.success) {
                current.style.display = 'none';
                const nextQuestion = container.querySelector('[data-question="' + nextId + '"]');
                if(nextQuestion) {
                    nextQuestion.style.display = 'block';
                }
            } else {
                alert('Ошибка при сохранении ответа');
            }
        });
    }
});

Расширение и интеграция с плагинами WPSHOP

Для более сложных решений удобно интегрировать кастомный вопросник с плагинами из WPSHOP.

Использование Quizle как базы для многоуровневого квиза

Quizle поддерживает условные переходы и API для расширения. Вы можете создавать вопросы в админке, а затем с помощью хуков добавить свою логику обработки ответов.

Пример расширения Quizle с помощью фильтров

add_filter('quizle_question_output', function($output, $question) {
    if($question->id === 5) { // ID вопроса
        $output .= '<p>Дополнительная подсказка для этого вопроса.</p>';
    }
    return $output;
}, 10, 2);

Советы по проектированию многоуровневых вопросников

Чтобы вопросник был удобен и эффективен, продумайте следующие моменты:

1. Логика переходов

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

2. Производительность

Используйте AJAX для подгрузки вопросов без перезагрузки страницы. Кешируйте на сервере часто используемые данные.

3. UX и дизайн

Продумайте удобство интерфейса: крупные кнопки, индикация прогресса, возможность вернуться к предыдущим вопросам.

4. Аналитика

Собирайте и анализируйте ответы, чтобы улучшать вопросы и повышать конверсию.

Итог

Создание многоуровневого вопросника в WordPress — задача выполнимая как при помощи плагинов (например, Quizle), так и на собственном коде. В статье приведён базовый пример с использованием шорткода, JavaScript и AJAX для динамических переходов и сохранения ответов. Такой подход позволяет гибко масштабировать систему и интегрировать её с разными инструментами.

Для более продвинутых функций рекомендуем изучить возможности плагинов из WPSHOP и их API.