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

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

Что такое шорткод в WordPress и зачем он нужен

Шорткод — это сокращённый тег в квадратных скобках, который WordPress преобразует в определённый функционал или контент при выводе страницы. Например, [gallery] — стандартный шорткод для вывода галереи изображений.

Основная задача шорткодов — дать возможность пользователю быстро и удобно вставлять сложные элементы без необходимости писать HTML или PHP-код.

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

Регистрация собственного шорткода в WordPress

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

function wp_theme_rus_hello_shortcode($atts) {
    $atts = shortcode_atts(
        array('name' => 'Гость'),
        $atts,
        'hello'
    );
    return '<p>Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на сайт.</p>';
}
add_shortcode('hello', 'wp_theme_rus_hello_shortcode');

В этом примере шорткод [hello] выведет приветствие. Если указать атрибут, например [hello name="Алексей"], то будет выведено «Привет, Алексей!».

Разбор кода

Функция wp_theme_rus_hello_shortcode принимает массив атрибутов $atts. Функция shortcode_atts задаёт значения по умолчанию. Далее возвращается строка с HTML, которую WordPress подставляет вместо шорткода.

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

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

function wp_theme_rus_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#',
            'color' => 'blue'
        ),
        $atts,
        'button'
    );
    $color = sanitize_html_class($atts['color']);
    $text = esc_html($atts['text']);
    $url = esc_url($atts['url']);
    return "<a href='$url' class='wp-theme-btn wp-theme-btn-$color'>$text</a>";
}
add_shortcode('button', 'wp_theme_rus_button_shortcode');

Теперь вы можете вставлять в статьи [button text="Подробнее" url="https://example.com" color="red"] и получать стилизованную кнопку.

Добавление CSS для кнопки

Для красивого отображения кнопки добавим стили в файл стилей темы или через функцию:

function wp_theme_rus_enqueue_styles() {
    wp_add_inline_style('wp-block-library', '
        .wp-theme-btn { padding: 10px 20px; text-decoration: none; border-radius: 4px; color: #fff; display: inline-block; }
        .wp-theme-btn-blue { background-color: #0073aa; }
        .wp-theme-btn-red { background-color: #d63638; }
    ');
}
add_action('wp_enqueue_scripts', 'wp_theme_rus_enqueue_styles');

Передача содержимого в шорткод (контентные шорткоды)

Шорткоды могут иметь содержимое между открывающим и закрывающим тегами. Например, [box]Текст внутри блока[/box]. Создадим такой шорткод.

function wp_theme_rus_box_shortcode($atts, $content = null) {
    return '<div class="wp-theme-box">' . do_shortcode($content) . '</div>';
}
add_shortcode('box', 'wp_theme_rus_box_shortcode');

Добавим CSS для блока:

.wp-theme-box {
    border: 2px solid #0073aa;
    padding: 15px;
    background-color: #f0f8ff;
    margin: 10px 0;
}

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

Как избежать распространённых ошибок при создании шорткодов

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

Всегда используйте функции esc_html, esc_url, sanitize_html_class для обработки входящих данных.
Добавляйте префиксы к названиям функций, чтобы избежать конфликтов с другими плагинами и темами.
Если шорткод принимает содержимое, не забудьте использовать второй параметр функции и применять do_shortcode для вложенных шорткодов.
Тестируйте шорткод на разных страницах и с разными атрибутами.

Пример создания комплексного шорткода с параметрами и содержимым

Напишем шорткод, который создаст карточку товара с заголовком, описанием и ссылкой на покупку.

function wp_theme_rus_product_card_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            'title' => 'Название товара',
            'price' => '0',
            'url' => '#'
        ),
        $atts,
        'product_card'
    );
    $title = esc_html($atts['title']);
    $price = esc_html($atts['price']);
    $url = esc_url($atts['url']);
    $desc = do_shortcode($content);

    return "<div class='wp-theme-product-card'>" .
           "<h3>$title</h3>" .
           "<p class='description'>$desc</p>" .
           "<p class='price'>Цена: $price руб.</p>" .
           "<a href='$url' class='buy-button'>Купить</a>" .
           "</div>";
}
add_shortcode('product_card', 'wp_theme_rus_product_card_shortcode');

CSS для карточки:

.wp-theme-product-card {
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 5px;
}
.wp-theme-product-card h3 {
    margin-top: 0;
    color: #0073aa;
}
.wp-theme-product-card .price {
    font-weight: bold;
    margin: 10px 0;
}
.wp-theme-product-card .buy-button {
    background: #0073aa;
    color: #fff;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 3px;
}
.wp-theme-product-card .buy-button:hover {
    background: #005177;
}

Пример использования:

[product_card title="Умная лампа" price="1500" url="https://shop.example.com/lamp"]Современная лампа с управлением через смартфон.[/product_card]

Полезные плагины для работы с шорткодами

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

Shortcodes Ultimate — один из самых популярных плагинов с набором готовых шорткодов и удобным интерфейсом.
WP Shortcode — простой плагин с базовым набором, легко расширяемый.
Custom Content Shortcode — позволяет создавать свои шорткоды с помощью интерфейса без программирования.

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