Как создать свой shortcode для опросов в WordPress

Почему стоит создавать собственный shortcode для опросов

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

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

Основы создания шорткода в WordPress

Шорткод — это специальный тег в записи или на странице, который WordPress заменяет на динамически сгенерированный контент. Для создания шорткода нужно использовать функцию add_shortcode, которая связывает тег с функцией вывода.

Пример базового шорткода:

function wppolls_simple_shortcode() {
    return '<p>Привет из шорткода!</p>';
}
add_shortcode('wppoll_test', 'wppolls_simple_shortcode');

В редакторе WordPress, вставив [wppoll_test], вы увидите текст "Привет из шорткода!".

Создание структуры опроса: вопросы и варианты ответов

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

Пример массива с вопросом и вариантами:

$question = 'Какой ваш любимый цвет?';
$options = [
    'Красный',
    'Зелёный',
    'Синий',
    'Жёлтый'
];

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

Формирование HTML формы для опроса

Чтобы пользователь мог проголосовать, создадим форму с радиокнопками. Важно добавить nonce-поле для безопасности.

function wppolls_render_poll() {
    $question = 'Какой ваш любимый цвет?';
    $options = ['Красный', 'Зелёный', 'Синий', 'Жёлтый'];
    $output = '<form method="post" action="#">';
    $output .= '<p><strong>' . esc_html($question) . '</strong></p>';
    foreach ($options as $key => $option) {
        $output .= '<p><label><input type="radio" name="wppolls_option" value="' . $key . '" required> ' . esc_html($option) . '</label></p>';
    }
    $output .= wp_nonce_field('wppolls_vote_action', 'wppolls_vote_nonce', true, false);
    $output .= '<p><input type="submit" name="wppolls_submit" value="Голосовать"></p>';
    $output .= '</form>';
    return $output;
}

Эту функцию мы свяжем с шорткодом дальше.

Обработка голосов: как сохранить результаты опроса

Нам нужно обработать POST-запрос, проверить nonce и сохранить голос. Для хранения используем опцию WordPress — это удобно для небольших опросов.

function wppolls_handle_vote() {
    if (isset($_POST['wppolls_submit'])) {
        if (!isset($_POST['wppolls_vote_nonce']) || !wp_verify_nonce($_POST['wppolls_vote_nonce'], 'wppolls_vote_action')) {
            wp_die('Ошибка безопасности.');
        }
        $option = intval($_POST['wppolls_option']);
        $results = get_option('wppolls_results', []);
        if (!isset($results[$option])) {
            $results[$option] = 0;
        }
        $results[$option]++;
        update_option('wppolls_results', $results);
        wp_redirect(add_query_arg('wppolls_thanks', '1', wp_get_referer()));
        exit;
    }
}
add_action('init', 'wppolls_handle_vote');

Функция проверяет nonce, сохраняет голос в опции и перенаправляет пользователя обратно с параметром "спасибо".

Вывод результатов опроса после голосования

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

function wppolls_poll_shortcode() {
    if (isset($_GET['wppolls_thanks'])) {
        $results = get_option('wppolls_results', []);
        $total = array_sum($results);
        $options = ['Красный', 'Зелёный', 'Синий', 'Жёлтый'];
        $output = '<h3>Результаты опроса</h3><ul>';
        foreach ($options as $key => $option) {
            $count = isset($results[$key]) ? $results[$key] : 0;
            $percent = $total ? round(($count / $total) * 100) : 0;
            $output .= '<li>' . esc_html($option) . ': ' . $count . ' голосов (' . $percent . '%)</li>';
        }
        $output .= '</ul>';
        return $output;
    }
    return wppolls_render_poll();
}
add_shortcode('wppoll_simple', 'wppolls_poll_shortcode');

Теперь, если пользователь проголосовал, он увидит результаты, в противном случае — форму опроса.

Расширение функционала: добавление нескольких опросов и кастомизация

Чтобы поддерживать несколько опросов, можно передавать ID опроса в шорткод через атрибуты. Для хранения данных лучше использовать собственную таблицу базы данных или CPT с метаполями.

Пример передачи ID:

function wppolls_poll_shortcode($atts) {
    $atts = shortcode_atts(['id' => 1], $atts, 'wppoll_simple');
    $poll_id = intval($atts['id']);
    // Здесь логика выборки вопроса и результатов по $poll_id
}

Также полезно добавить AJAX-голосование, чтобы не перезагружать страницу и улучшить UX.

Пример AJAX-обработчика для голосования

Добавим обработчик в PHP:

function wppolls_ajax_vote() {
    check_ajax_referer('wppolls_vote_nonce', 'nonce');
    $option = isset($_POST['option']) ? intval($_POST['option']) : -1;
    if ($option < 0) {
        wp_send_json_error('Некорректный вариант');
    }
    $results = get_option('wppolls_results', []);
    if (!isset($results[$option])) {
        $results[$option] = 0;
    }
    $results[$option]++;
    update_option('wppolls_results', $results);
    wp_send_json_success('Голос учтён');
}
add_action('wp_ajax_wppolls_vote', 'wppolls_ajax_vote');
add_action('wp_ajax_nopriv_wppolls_vote', 'wppolls_ajax_vote');

И JS для отправки голосов:

jQuery(document).ready(function($) {
    $('form.wppolls-form').on('submit', function(e) {
        e.preventDefault();
        var option = $(this).find('input[name="wppolls_option"]:checked').val();
        var nonce = $(this).find('input[name="wppolls_vote_nonce"]').val();
        $.post(wppolls_ajax_object.ajax_url, {
            action: 'wppolls_vote',
            option: option,
            nonce: nonce
        }, function(response) {
            if (response.success) {
                alert('Спасибо за голос!');
                location.reload();
            } else {
                alert('Ошибка: ' + response.data);
            }
        });
    });
});

Не забудьте локализовать скрипт и подключить jQuery.

Лучшие плагины для опросов на WordPress: что выбрать и почему

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

• YOP Poll — простой и мощный, подходит для большинства задач.
• WP-Polls — легкий и широко используемый, легко кастомизируется.
• Poll, Survey, Form & Quiz Maker by OpinionStage — современный и многофункциональный.

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

Резюме по созданию собственного шорткода для опросов

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

• создавать и регистрировать шорткод в WordPress;
• формировать HTML-форму с вопросами и вариантами;
• обрабатывать голосование с проверкой nonce и хранить результаты в опциях;
• отображать результаты после голосования;
• расширять функционал с поддержкой нескольких опросов и AJAX;
• оценивать плюсы популярных плагинов для опросов.

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