Как создать собственный шорткод с параметрами в WordPress: практическое руководство

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

Что такое шорткод с параметрами в WordPress

Стандартный шорткод записывается в квадратных скобках, например, [example]. Если добавить параметры, это будет выглядеть так: [example param1="value1" param2="value2"]. Параметры позволяют изменять вывод шорткода в зависимости от переданных значений.

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

Далее мы создадим примерный шорткод [wpmark_button], который выводит кнопку с настраиваемым текстом, ссылкой и цветом.

Как зарегистрировать шорткод с параметрами в WordPress

Регистрация шорткода производится с помощью функции add_shortcode. Реализуем функцию обработчик с параметрами и значениями по умолчанию, чтобы избежать ошибок при отсутствии параметров.

function wpmark_shortcode_button($atts) {
    // Значения параметров по умолчанию
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#',
            'color' => 'blue'
        ),
        $atts,
        'wpmark_button'
    );

    // Экранирование параметров для безопасности
    $text = esc_html($atts['text']);
    $url = esc_url($atts['url']);
    $color = esc_attr($atts['color']);

    // Формируем HTML кнопки
    return '<a href="' . $url . '" class="wpmark-btn" style="background-color:' . $color . '; padding:10px 20px; color:#fff; text-decoration:none; border-radius:4px;">' . $text . '</a>';
}
add_shortcode('wpmark_button', 'wpmark_shortcode_button');

В данном примере при использовании шорткода [wpmark_button text="Купить" url="https://example.com" color="#ff0000"] вы получите красную кнопку с текстом «Купить» и ссылкой на example.com.

Безопасность и фильтрация параметров шорткодов

Важно обрабатывать входящие параметры для предотвращения XSS-атак и других уязвимостей. Мы использовали функции esc_html, esc_url и esc_attr, чтобы экранировать данные перед выводом.

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

Пример расширенной фильтрации параметров

Если параметр должен принимать только определённые значения, можно реализовать проверку и замену на значение по умолчанию:

function wpmark_validate_color($color) {
    $allowed_colors = array('blue', 'red', 'green', 'black');
    if (in_array(strtolower($color), $allowed_colors)) {
        return strtolower($color);
    }
    return 'blue';
}

function wpmark_shortcode_button_secure($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#',
            'color' => 'blue'
        ),
        $atts,
        'wpmark_button'
    );

    $text = esc_html($atts['text']);
    $url = esc_url($atts['url']);
    $color = wpmark_validate_color($atts['color']);

    return '<a href="' . $url . '" class="wpmark-btn wpmark-btn-' . $color . '">' . $text . '</a>';
}
add_shortcode('wpmark_button', 'wpmark_shortcode_button_secure');

В этом варианте класс кнопки зависит от заранее определённого списка цветов, что повышает безопасность и позволяет использовать стили в CSS.

Подключение стилей для шорткода

Чтобы кнопка выглядела красиво, добавим CSS. Рекомендуется подключать стили через функцию wp_enqueue_scripts.

function wpmark_enqueue_styles() {
    wp_enqueue_style('wpmark-shortcode-style', 'https://wpmark.ru/wp-content/plugins/wpmark-shortcodes/css/style.css', array(), '1.0');
}
add_action('wp_enqueue_scripts', 'wpmark_enqueue_styles');

В файле style.css можно определить стили для кнопок:

.wpmark-btn {
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.wpmark-btn-blue { background-color: #0073aa; }
.wpmark-btn-red { background-color: #d54e21; }
.wpmark-btn-green { background-color: #46b450; }
.wpmark-btn-black { background-color: #000; }
.wpmark-btn:hover { opacity: 0.8; }

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

Такие шорткоды отлично подходят для:

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

Например, шорткод для вывода отзыва с параметрами:

function wpmark_shortcode_review($atts, $content = null) {
    $atts = shortcode_atts(array(
        'author' => 'Аноним',
        'rating' => 5
    ), $atts, 'wpmark_review');

    $author = esc_html($atts['author']);
    $rating = intval($atts['rating']);

    $stars = str_repeat('★', $rating) . str_repeat('☆', 5 - $rating);

    return '<div class="wpmark-review"><p>' . $content . '</p><strong>' . $author . '</strong> <span class="wpmark-rating">' . $stars . '</span></div>';
}
add_shortcode('wpmark_review', 'wpmark_shortcode_review');

Использование: [wpmark_review author="Иван Иванов" rating="4"]Отличный продукт![/wpmark_review]

Заключение

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

Если хотите упростить работу с отзывами и рейтингами, обратите внимание на плагин WPRemark – он позволяет автоматизировать отзывы и интегрируется с шорткодами.