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

Автор: Алексей Комаров | Опубликовано: 25.11.2025

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

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

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

Например, шорткод [gallery] выводит галерею изображений, а [audio] вставляет аудиоплеер. Это встроенные шорткоды. Создавая свои, вы расширяете функциональность сайта под свои конкретные задачи.

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

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

function wpicons_hello_shortcode($atts) {
    $attributes = shortcode_atts(
        array('name' => 'гость'), $atts
    );
    return 'Привет, ' . esc_html($attributes['name']) . '! Добро пожаловать на wpicons.ru.';
}
add_shortcode('wpicons_hello', 'wpicons_hello_shortcode');

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

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

Атрибуты позволяют передавать параметры в шорткод, меняя его поведение без изменения кода. В примере выше мы использовали функцию shortcode_atts() для установки значений по умолчанию и объединения их с переданными.

Можно создавать шорткоды с несколькими атрибутами, например, создадим шорткод для вывода иконки с заданным цветом и размером:

function wpicons_icon_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'icon' => 'star',
            'color' => '#000000',
            'size' => '24px'
        ), $atts, 'wpicons_icon'
    );

    return '<i class="wpicons-icon wpicons-icon-' . esc_attr($atts['icon']) . '" ' .
           'style="color:' . esc_attr($atts['color']) . '; font-size:' . esc_attr($atts['size']) . ';"></i>';
}
add_shortcode('wpicons_icon', 'wpicons_icon_shortcode');

Использование в записи: [wpicons_icon icon="heart" color="#e74c3c" size="30px"] выведет красную иконку сердца размером 30 пикселей. Чтобы это работало, понадобится подключить CSS с классами wpicons-icon и соответствующими иконками, например, из FontAwesome или собственного набора.

Шорткоды с контентом: обработка вложенного содержимого

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

function wpicons_box_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array('title' => 'Важная информация'), $atts, 'wpicons_box'
    );

    $output = '<div class="wpicons-box">';
    $output .= '<h3 class="wpicons-box-title">' . esc_html($atts['title']) . '</h3>';
    $output .= '<div class="wpicons-box-content">' . do_shortcode($content) . '</div>';
    $output .= '</div>';

    return $output;
}
add_shortcode('wpicons_box', 'wpicons_box_shortcode');

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

[wpicons_box title="Совет"]
Используйте шорткоды для упрощения контента и повторного использования.
[/wpicons_box]

Это создаст блок с заголовком «Совет» и текстом внутри. Важно использовать do_shortcode($content), если внутри могут быть вложенные шорткоды.

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

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

Shortcoder — позволяет создавать пользовательские шорткоды с HTML, JavaScript и PHP прямо из админки.
Shortcodes Ultimate — набор готовых шорткодов с возможностью кастомизации, включающий кнопки, вкладки, иконки и многое другое.
WP Shortcode by MyThemeShop — простой плагин с набором полезных шорткодов для форматирования контента.

Эти плагины отлично подходят для быстрого добавления функционала без глубокого погружения в код.

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

При создании шорткодов важно помнить о безопасности. Вставляемый пользователем контент всегда должен фильтроваться с помощью функций esc_html(), esc_attr(), wp_kses_post() и других, чтобы избежать XSS-атак. Никогда не выводите необработанные данные.

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

Продвинутые примеры: шорткод с запросом к базе данных

Допустим, нужно вывести последние 3 поста определённой категории с иконками. Пример шорткода:

function wpicons_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(
        array('cat' => '', 'count' => 3), $atts, 'wpicons_recent_posts'
    );

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

    $query = new WP_Query($args);
    if (!$query->have_posts()) {
        return '<p>Посты не найдены.</p>';
    }

    $output = '<ul class="wpicons-recent-posts">';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<li><i class="wpicons-icon wpicons-icon-file"></i> ' .
                   '<a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    wp_reset_postdata();
    $output .= '</ul>';

    return $output;
}
add_shortcode('wpicons_recent_posts', 'wpicons_recent_posts_shortcode');

Используйте [wpicons_recent_posts cat="news" count="5"], чтобы вывести 5 последних записей из категории «news» с иконками файла.

Заключение: создаём мощные и удобные шорткоды

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

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