Как добавить внешний квиз на сайт WordPress без плагинов

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

Часто возникает задача добавить на сайт WordPress внешний квиз, который размещён на сторонней платформе или сервисе. При этом хочется обойтись без установки дополнительных плагинов, чтобы не нагружать сайт и не усложнять его поддержку. В этой статье мы подробно разберём несколько способов интеграции внешних квизов в WordPress, включая вставку через iframe, использование REST API и создание кастомного шорткода для удобного управления.

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

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

Добавление квиза без плагинов снижает нагрузку, уменьшает риски безопасности и упрощает обновление сайта. Вместе с тем, важно обеспечить корректное отображение и взаимодействие с внешним сервисом.

Вариант 1. Встраивание квиза через iframe

Самый простой способ — вставить квиз с другого сайта через тег <iframe>. Он позволяет отображать внешний контент внутри страницы WordPress без дополнительного кода на стороне сервера.

Например, если сервис квизов предоставляет ссылку, её можно вставить в пост или страницу с помощью кастомного шорткода для удобства:

function wpquiz_add_iframe_quiz_shortcode($atts) {
    $atts = shortcode_atts(array(
        'src' => '',
        'width' => '100%',
        'height' => '600',
        'frameborder' => '0',
        'allowfullscreen' => 'true'
    ), $atts, 'wpquiz_iframe_quiz');

    if (empty($atts['src'])) {
        return '<p>URL квиза не указан.</p>';
    }

    return '<iframe src="' . esc_url($atts['src']) . '" width="' . esc_attr($atts['width']) . '" height="' . esc_attr($atts['height']) . '" frameborder="' . esc_attr($atts['frameborder']) . '" allowfullscreen="' . esc_attr($atts['allowfullscreen']) . '"></iframe>';
}
add_shortcode('wpquiz_iframe_quiz', 'wpquiz_add_iframe_quiz_shortcode');

Для использования вставьте в контент страницы:

[wpquiz_iframe_quiz src="https://example.com/quiz/embed" width="800" height="700"]

Преимущества такого подхода — простота и универсальность. Недостаток — ограниченное взаимодействие с квизом и невозможность стилизовать его под тему сайта.

Вариант 2. Интеграция через REST API внешнего квиза

Если внешний сервис предоставляет API, можно получать вопросы, отправлять ответы и отображать результаты прямо на сайте WordPress, создавая собственный интерфейс квиза и полностью контролируя дизайн и логику.

Для начала нужно ознакомиться с документацией API внешнего сервиса, получить ключи доступа и настроить вызовы через PHP или JavaScript.

Пример получения данных квиза через PHP с использованием wpquiz

function wpquiz_fetch_external_quiz_data($quiz_id) {
    $api_url = 'https://api.examplequiz.com/v1/quizzes/' . intval($quiz_id);
    $response = wp_remote_get($api_url, array(
        'headers' => array(
            'Authorization' => 'Bearer ' . 'your_api_token_here'
        )
    ));

    if (is_wp_error($response)) {
        return false;
    }

    $body = wp_remote_retrieve_body($response);
    $data = json_decode($body, true);
    if (json_last_error() !== JSON_ERROR_NONE) {
        return false;
    }

    return $data;
}

Далее, полученные данные можно обработать и вывести в удобном формате. Для удобства создадим шорткод для отображения квиза:

function wpquiz_render_external_quiz($atts) {
    $atts = shortcode_atts(array('id' => 0), $atts, 'wpquiz_external');
    $quiz_data = wpquiz_fetch_external_quiz_data($atts['id']);

    if (!$quiz_data) {
        return '<p>Ошибка загрузки квиза.</p>';
    }

    $output = '<form id="wpquiz_form">';
    foreach ($quiz_data['questions'] as $index => $question) {
        $output .= '<fieldset><legend>' . esc_html($question['text']) . '</legend>';
        foreach ($question['answers'] as $answer) {
            $output .= '<label><input type="radio" name="q' . $index . '" value="' . esc_attr($answer['id']) . '">' . esc_html($answer['text']) . '</label><br>';
        }
        $output .= '</fieldset>';
    }
    $output .= '<button type="submit">Отправить</button></form>';

    return $output;
}
add_shortcode('wpquiz_external', 'wpquiz_render_external_quiz');

Такой подход требует знания API и навыков программирования, но даёт полную свободу кастомизации и интеграции с системой WordPress.

Вариант 3. Использование JavaScript для динамической загрузки квиза

Если API поддерживает CORS, можно динамически загружать вопросы и ответы на страницу с помощью AJAX-запросов и jQuery или чистого JavaScript.

Пример простого AJAX-запроса с выводом на страницу:

document.addEventListener('DOMContentLoaded', function() {
    fetch('https://api.examplequiz.com/v1/quizzes/123')
        .then(response => response.json())
        .then(data => {
            const container = document.getElementById('wpquiz-container');
            let html = '';
            data.questions.forEach((q, i) => {
                html += `<div><h3>${q.text}</h3>`;
                q.answers.forEach(a => {
                    html += `<label><input type=\"radio\" name=\"q${i}\" value=\"${a.id}\">${a.text}</label><br>`;
                });
                html += '</div>';
            });
            container.innerHTML = html;
        })
        .catch(error => console.error('Ошибка загрузки квиза:', error));
});

Для отправки ответов и получения результатов также можно реализовать AJAX-запросы с обработкой на стороне внешнего API.

Полезные плагины для интеграции и оптимизации квизов

Если всё же решите использовать плагины для облегчения интеграции, обратите внимание на:

WP Quiz — мощный плагин для создания и управления квизами;
Clearfy Pro — для оптимизации и ускорения сайта при большом количестве запросов;
Expert Review — для сбора и вывода отзывов, которые могут дополнять квизы.

Эти инструменты помогут расширить функционал и упростить работу с квизами на WordPress.