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

Что такое shortcode в WordPress и зачем создавать свои

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

Пользовательские шорткоды полезны, когда нужно:

• Вставлять сложный HTML или PHP код без редактирования шаблонов.
• Добавлять кастомные элементы интерфейса или данные из базы.
• Облегчить работу контент-менеджерам, предоставив им удобные теги для вставки функционала.

В этой статье мы рассмотрим, как создать shortcode в WordPress с нуля, подключить параметры и вывести динамический контент.

Создание простого shortcode в functions.php

Для начала создадим простой shortcode, который выводит приветствие. Добавьте следующий код в файл functions.php вашей темы или в отдельный плагин:

function wptask_hello_shortcode($atts) {
    return '<p>Привет, это мой первый shortcode на wptask.ru!</p>';
}
add_shortcode('wptask_hello', 'wptask_hello_shortcode');

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

Разбор кода

Функция wptask_hello_shortcode — обработчик шорткода. Она возвращает HTML-строку, которая вставляется вместо тега. Функция add_shortcode регистрирует новый тег wptask_hello и связывает его с обработчиком.

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

Использование атрибутов в shortcode

Shortcode могут принимать параметры, которые позволяют менять поведение. Например, сделаем приветствие с именем:

function wptask_hello_shortcode($atts) {
    $atts = shortcode_atts(
        array('name' => 'гость'), $atts, 'wptask_hello'
    );

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

Теперь можно использовать [wptask_hello name="Алексей"], и вывод будет: Привет, Алексей! Если параметр не задан, используется значение по умолчанию - «гость».

Почему важна функция shortcode_atts

Она объединяет переданные атрибуты с дефолтными и гарантирует, что у всех параметров есть значения. Это предотвращает ошибки и упрощает обработку данных.

Сложный пример: вывод списка последних записей с помощью shortcode

Рассмотрим, как через shortcode вывести последние записи блога с кастомными параметрами — количеством и категорией:

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

    $args = array(
        'posts_per_page' => intval($atts['count']),
        'post_status' => 'publish'
    );

    if (!empty($atts['category'])) {
        $args['category_name'] = sanitize_text_field($atts['category']);
    }

    $query = new WP_Query($args);
    if (!$query->have_posts()) {
        return '<p>Нет записей для отображения.</p>';
    }

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

    return $output;
}
add_shortcode('wptask_latest_posts', 'wptask_latest_posts_shortcode');

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

[wptask_latest_posts count="3" category="news"]

Выведет 3 последние записи из категории «news».

Объяснение

Мы используем класс WP_Query для выборки постов с заданными параметрами. Важно после цикла вызвать wp_reset_postdata(), чтобы не нарушить глобальный запрос.

При фильтрации по категории мы используем параметр category_name, который принимает слаг категории.

Лучшие плагины для работы с shortcode

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

• Shortcodes Ultimate — огромный набор готовых шорткодов для разных целей (кнопки, вкладки, колонки, слайдеры и т.п.). Очень удобно, если не хочется писать код.
• WP Shortcode by MyThemeShop — набор простых шорткодов с чистым дизайном, подходит для базовых задач.
• Custom Content Shortcode — позволяет создавать собственные шорткоды через админку, задавая HTML и CSS.

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

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

При разработке shortcode стоит помнить следующие моменты:

• Всегда экранируйте вывод, особенно если вставляете данные из параметров — используйте esc_html, esc_attr, wp_kses_post в зависимости от контекста.
• Не выводите содержимое напрямую — возвращайте его строкой.
• Избегайте тяжелых операций в шорткодах, чтобы не замедлять загрузку страниц.
• Используйте префиксы в названиях функций и шорткодов, чтобы избежать конфликтов с другими плагинами и темами.
• Тестируйте шорткоды с разными параметрами и в разных местах сайта.