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

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

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

Шорткод — это специальный тег в квадратных скобках, например [myshortcode], который WordPress заменяет на определенный контент при выводе страницы. Они позволяют легко добавлять сложные элементы — формы, таблицы, галереи, динамические данные — без глубокого знания PHP.

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

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

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

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

function wpplugins_greeting_shortcode($atts) {
    $atts = shortcode_atts(array(
        'name' => 'Гость'
    ), $atts, 'greeting');

    return '<p>Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на сайт.</p>';
}
add_shortcode('greeting', 'wpplugins_greeting_shortcode');

Теперь в любом месте контента можно написать [greeting name="Алексей"], и посетители увидят: «Привет, Алексей! Добро пожаловать на сайт.»

Разбор кода

shortcode_atts объединяет переданные атрибуты с дефолтными значениями, что упрощает обработку параметров. Функция возвращает строку HTML, которая и вставляется в место шорткода. Важно использовать esc_html для безопасности.

Пример сложного шорткода: вывод последних записей с кастомным дизайном

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

function wpplugins_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'category' => '',
        'count' => 5
    ), $atts, 'latest_posts');

    $args = array(
        'posts_per_page' => intval($atts['count']),
        'category_name' => sanitize_text_field($atts['category'])
    );

    $query = new WP_Query($args);

    if (!$query->have_posts()) {
        return '<p>Записей не найдено.</p>';
    }

    $output = '<ul class="wpplugins-latest-posts">';

    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a> - ' . get_the_date() . '</li>';
    }

    wp_reset_postdata();

    $output .= '</ul>';

    return $output;
}
add_shortcode('latest_posts', 'wpplugins_latest_posts_shortcode');

Использование: [latest_posts category="novosti" count="3"] покажет 3 последние записи из категории «новости».

Пояснения и безопасность

Мы используем класс WP_Query для выборки записей. Параметры атрибутов обязательно фильтруем: intval для чисел, sanitize_text_field для текста. После цикла вызываем wp_reset_postdata(), чтобы не повлиять на глобальные переменные.

Интеграция шорткодов с плагинами: пример использования Contact Form 7

Многие популярные плагины используют шорткоды для вставки своих форм и виджетов. Например, Contact Form 7 создает шорткод для каждой формы, который можно вставлять в записи.

Если вы хотите динамически выводить форму Contact Form 7 через свой шорткод, можно написать обертку:

function wpplugins_cf7_shortcode_wrapper($atts) {
    $atts = shortcode_atts(array(
        'id' => 0
    ), $atts, 'cf7_wrapper');

    if (!$atts['id']) {
        return '<p>ID формы не указан.</p>';
    }

    return do_shortcode('[contact-form-7 id="' . intval($atts['id']) . '"]');
}
add_shortcode('cf7_wrapper', 'wpplugins_cf7_shortcode_wrapper');

Теперь можно вставлять [cf7_wrapper id="123"] — и плагин Contact Form 7 выведет форму с ID 123.

Расширенные возможности: вложенные шорткоды и параметры

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

Пример шорткода, который оборачивает контент в стилизованный блок:

function wpplugins_box_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => 'blue'
    ), $atts, 'box');

    $color = esc_attr($atts['color']);
    $content = do_shortcode($content);

    return '<div style="border: 2px solid ' . $color . '; padding: 10px; margin: 10px 0;">' . $content . '</div>';
}
add_shortcode('box', 'wpplugins_box_shortcode');

Теперь можно использовать:

[box color="red"]Текст внутри красной рамки [greeting name="Оля"][/box]

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

Советы по отладке и безопасности шорткодов

При разработке шорткодов важно:

• Использовать фильтрацию и экранирование данных, чтобы избежать XSS-уязвимостей.
• Использовать shortcode_atts для обработки атрибутов с дефолтами.
• Тестировать шорткод с разными входными данными, включая отсутствующие атрибуты.
• Не выводить напрямую HTML без обработки, используйте функции WordPress для генерации ссылок и данных.

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

Заключение

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

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