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

Автор: Ирина Семенова | Опубликовано: 12.11.2025

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

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

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

Преимущества шорткодов:

Удобство использования для контент-менеджеров без знаний программирования.
Повторное использование кода в разных местах сайта.
Разделение логики и контента.

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

Как создать базовый шорткод в WordPress

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

function wordpressy_custom_shortcode() {
    return '<div class="wordpressy-box">Это мой первый шорткод!</div>';
}
add_shortcode('wordpressy_box', 'wordpressy_custom_shortcode');

Теперь, если в редакторе WordPress вставить [wordpressy_box], на сайте отобразится див с текстом «Это мой первый шорткод!». Такой подход очень прост, но уже полезен.

Где размещать код шорткода

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

Добавление параметров к шорткоду: расширяем функционал

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

Пример расширенного шорткода с параметрами:

function wordpressy_custom_shortcode_atts($atts, $content = null) {
    $atts = shortcode_atts( array(
        'color' => 'blue',
        'text' => 'Привет, WordPressy!'
    ), $atts, 'wordpressy_box' );

    return '<div style="color:' . esc_attr($atts['color']) . ';">' . esc_html($atts['text']) . '</div>';
}
add_shortcode('wordpressy_box', 'wordpressy_custom_shortcode_atts');

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

[wordpressy_box color="red" text="Красный текст"]

Этот шорткод выведет красный текст «Красный текст». Если параметры не передать, будут использованы значения по умолчанию.

Безопасность и экранирование данных

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

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

Шорткоды могут быть как самозакрывающимися, так и контейнерными, то есть с содержимым между открывающим и закрывающим тегом.

Например:

[wordpressy_box]Содержимое шорткода[/wordpressy_box]

Чтобы обработать вложенный контент, функция шорткода принимает второй параметр:

function wordpressy_box_with_content($atts, $content = null) {
    $content = do_shortcode($content); // Обработка вложенных шорткодов
    return '<div class="wordpressy-box">' . wp_kses_post($content) . '</div>';
}
add_shortcode('wordpressy_box', 'wordpressy_box_with_content');

Теперь можно вставлять любой HTML или другие шорткоды внутрь [wordpressy_box].

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

1. Вывод последних записей с миниатюрой

Такой шорткод позволит вывести последние статьи с картинками.

function wordpressy_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5
    ), $atts, 'wordpressy_latest_posts');

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

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

    $output = '<ul class="wordpressy-latest-posts">';
    while ($query->have_posts()) {
        $query->the_post();
        $thumb = get_the_post_thumbnail(get_the_ID(), 'thumbnail');
        $output .= '<li>' . $thumb . ' <a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    wp_reset_postdata();
    $output .= '</ul>';
    return $output;
}
add_shortcode('wordpressy_latest_posts', 'wordpressy_latest_posts_shortcode');

Использование: [wordpressy_latest_posts count="3"]

2. Кнопка с кастомным стилем и ссылкой

Очень часто нужны красивые кнопки. Создадим шорткод с параметрами:

function wordpressy_button_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'url' => '#',
        'color' => '#0085ba'
    ), $atts, 'wordpressy_button');

    $content = $content ? $content : 'Нажми меня';
    $url = esc_url($atts['url']);
    $color = esc_attr($atts['color']);

    return '<a href="' . $url . '" style="background-color:' . $color . '; color:#fff; padding:10px 20px; text-decoration:none; border-radius:3px; display:inline-block;">' . esc_html($content) . '</a>';
}
add_shortcode('wordpressy_button', 'wordpressy_button_shortcode');

Пример использования: [wordpressy_button url="https://wordpressy.ru" color="#e74c3c"]Перейти на WordPressy.ru[/wordpressy_button]

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