Как установить и настроить квиз в WordPress без плагинов

Автор: Марина Ларионова | Опубликовано: 17.01.2026

Квизы — отличный способ вовлечь пользователей на вашем сайте, повысить время их пребывания и собрать полезные данные. Хотя существует множество плагинов для создания квизов в WordPress, иногда бывает полезно обойтись без них — например, если нужна максимальная легковесность, уникальный дизайн или специфический функционал. В этой статье рассмотрим, как создать и настроить квиз без плагинов, используя только стандартные возможности WordPress и кастомный PHP и JavaScript код.

Почему создавать квиз без плагинов

Использование плагинов — простой и быстрый способ добавить квиз. Однако плагины добавляют нагрузку, могут конфликтовать с другими решениями и часто имеют избыточный функционал. Создание собственного квиза даст вам следующие преимущества:

Точный контроль над дизайном и логикой;
Оптимизированный и легкий код, что улучшает производительность;
Отсутствие зависимости от сторонних обновлений и уязвимостей;
Возможность интеграции с уникальными системами и REST API.

Далее — пошаговое руководство по созданию простого, но функционального квиза.

Создаем структуру квиза с помощью кастомного шорткода

Для удобства вставки квиза на любую страницу создадим шорткод [wpquiz_custom]. Для его реализации добавьте следующий код в файл functions.php вашей активной темы или в подключаемый файл плагина:

function wpquiz_custom_shortcode() {
    ob_start();
    ?>
    <form id="wpquiz-form">
        <div class="wpquiz-question" data-question="1">
            <p>Какой язык программирования используется для разработки WordPress?</p>
            <label><input type="radio" name="q1" value="php"> PHP</label><br>
            <label><input type="radio" name="q1" value="js"> JavaScript</label><br>
            <label><input type="radio" name="q1" value="python"> Python</label><br>
        </div>
        <div class="wpquiz-question" data-question="2" style="display:none;">
            <p>Что такое хук в WordPress?</p>
            <label><input type="radio" name="q2" value="filter"> Фильтр</label><br>
            <label><input type="radio" name="q2" value="action"> Действие</label><br>
            <label><input type="radio" name="q2" value="widget"> Виджет</label><br>
        </div>
        <button type="button" id="wpquiz-next">Далее</button>
        <button type="submit" id="wpquiz-submit" style="display:none;">Отправить</button>
    </form>
    <div id="wpquiz-result" style="display:none;"></div>
    <script>
        (function(){
            const form = document.getElementById('wpquiz-form');
            const questions = form.querySelectorAll('.wpquiz-question');
            let current = 0;
            const nextBtn = document.getElementById('wpquiz-next');
            const submitBtn = document.getElementById('wpquiz-submit');
            const resultDiv = document.getElementById('wpquiz-result');

            nextBtn.addEventListener('click', ()=>{
                const inputs = questions[current].querySelectorAll('input[type=radio]');
                let answered = false;
                inputs.forEach(input=>{
                    if(input.checked) answered = true;
                });
                if(!answered) {
                    alert('Пожалуйста, выберите ответ.');
                    return;
                }
                questions[current].style.display = 'none';
                current++;
                if(current < questions.length) {
                    questions[current].style.display = 'block';
                }
                if(current === questions.length - 1) {
                    nextBtn.style.display = 'none';
                    submitBtn.style.display = 'inline';
                }
            });

            form.addEventListener('submit', function(e){
                e.preventDefault();
                // Собираем ответы
                const answers = {};
                questions.forEach(q=>{
                    const name = q.querySelector('input[type=radio]').name;
                    const checked = q.querySelector('input[type=radio]:checked');
                    answers[name] = checked ? checked.value : null;
                });
                // Считаем результат
                let score = 0;
                if(answers.q1 === 'php') score++;
                if(answers.q2 === 'action') score++;

                form.style.display = 'none';
                resultDiv.style.display = 'block';
                resultDiv.innerHTML = `<p>Ваш результат: ${score} из ${questions.length}</p>`;
            });
        })();
    </script>
    <style>
        #wpquiz-form { max-width: 400px; margin: 20px auto; font-family: Arial, sans-serif; }
        .wpquiz-question { margin-bottom: 20px; }
        button { padding: 8px 16px; font-size: 16px; cursor: pointer; }
    </style>
    <?php
    return ob_get_clean();
}
add_shortcode('wpquiz_custom', 'wpquiz_custom_shortcode');

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

Добавляем сохранение результатов и защиту от повторного прохождения

Чтобы данные о прохождении квиза сохранялись, а пользователь не мог пройти тест несколько раз, реализуем AJAX-сохранение в базе данных и проверку по cookie.

Для начала зарегистрируем AJAX-обработчик в functions.php:

function wpquiz_custom_save_result() {
    if ( ! isset( $_POST['answers'] ) || ! is_user_logged_in() ) {
        wp_send_json_error('Недостаточно данных или пользователь не авторизован');
    }
    $user_id = get_current_user_id();
    $answers = sanitize_text_field( wp_unslash( $_POST['answers'] ) );
    update_user_meta( $user_id, 'wpquiz_custom_result', $answers );
    wp_send_json_success( 'Результат сохранен' );
}
add_action('wp_ajax_wpquiz_custom_save_result', 'wpquiz_custom_save_result');

В JavaScript добавим отправку результатов после подсчета:

fetch(ajaxurl, {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
    body: new URLSearchParams({
        action: 'wpquiz_custom_save_result',
        answers: JSON.stringify(answers)
    })
})
.then(response => response.json())
.then(data => {
    if(data.success) {
        console.log('Результат сохранен на сервере');
    } else {
        console.error('Ошибка при сохранении');
    }
});

Также реализуйте проверку cookie или user meta, чтобы скрыть форму для уже прошедших пользователей. Это повысит UX и предотвратит многократное прохождение.

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

Если позже потребуется расширить функционал, можно интегрировать собственный квиз с плагинами из WPShop.ru. Например:

Quizle — для создания адаптивных квизов с большим количеством настроек и аналитикой;
Expert Review — для организации экспертных оценок и отзывов;
ABC Pagination — для удобного разбиения вопросов на страницы.

Интеграция собственного кода с этими плагинами даст вам гибкость и мощь одновременно.

Пример подключения Quizle для импорта вопросов

Вы можете экспортировать ваши вопросы из кастомного квиза в формат, поддерживаемый Quizle, и загрузить их через интерфейс плагина. Это ускорит переход на более функциональное решение без потери данных.

Оптимизация и безопасность

При создании собственного квиза важно учесть следующие моменты:

Всегда используйте функции WordPress для проверки и очистки данных (sanitize_text_field, wp_unslash и др.);
Используйте nonce для защиты AJAX-запросов от CSRF;
Минимизируйте количество запросов к базе данных — например, кэшируйте результаты;
Обрабатывайте ошибки и уведомляйте пользователя о статусе;
Тестируйте работу квиза на разных устройствах и браузерах.

Если вам нужна более глубокая интеграция — рассмотрите использование REST API WordPress для обмена данными между фронтендом и бекендом.