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

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

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

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

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

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

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

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

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

Рассмотрим простой пример. Пусть мы хотим создать шорткод [wpgen_greeting], который выводит приветствие.

function wpgen_greeting_shortcode() {
    return '<p>Привет, посетитель! Это шорткод от WPGen.</p>';
}
add_shortcode('wpgen_greeting', 'wpgen_greeting_shortcode');

После добавления этого кода в файл functions.php вашей темы или в ваш плагин, при вставке [wpgen_greeting] в редакторе WordPress на сайте появится приветственное сообщение.

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

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

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

Шорткоды могут принимать параметры — атрибуты, которые позволяют менять поведение или вывод. Это расширяет возможности и делает шорткоды гибкими.

Например, добавим параметр name в наш шорткод:

function wpgen_greeting_shortcode($atts) {
    $atts = shortcode_atts(
        array('name' => 'гость'),
        $atts,
        'wpgen_greeting'
    );
    return '<p>Привет, ' . esc_html($atts['name']) . '! Это шорткод от WPGen.</p>';
}
add_shortcode('wpgen_greeting', 'wpgen_greeting_shortcode');

Теперь в записи можно использовать [wpgen_greeting name="Алексей"], и на сайте отобразится «Привет, Алексей! Это шорткод от WPGen.»

Обработка нескольких параметров

Если шорткод требует больше параметров, добавьте их в массив shortcode_atts. Например, шорткод для кнопки с настраиваемым текстом и ссылкой:

function wpgen_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#'
        ),
        $atts,
        'wpgen_button'
    );
    $text = esc_html($atts['text']);
    $url = esc_url($atts['url']);
    return '<a href="' . $url . '" class="wpgen-button">' . $text . '</a>';
}
add_shortcode('wpgen_button', 'wpgen_button_shortcode');

Использование: [wpgen_button text="Купить" url="https://example.com"]

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

При создании шорткодов важно обезопасить сайт от XSS и других уязвимостей. Всегда применяйте функции экранирования, например, esc_html() для текста и esc_url() для URL.

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

Добавление CSS для шорткода

Чтобы шорткод выглядел красиво, добавьте стили. Например, можно зарегистрировать и подключить CSS-файл в вашем плагине:

function wpgen_enqueue_styles() {
    wp_enqueue_style('wpgen_shortcode_styles', plugin_dir_url(__FILE__) . 'css/wpgen-shortcodes.css');
}
add_action('wp_enqueue_scripts', 'wpgen_enqueue_styles');

В файле wpgen-shortcodes.css разместите стили для класса .wpgen-button:

.wpgen-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
}
.wpgen-button:hover {
    background-color: #005177;
}

Примеры сложных шорткодов с использованием WP Query

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

function wpgen_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(
        array('category' => '', 'posts' => 3),
        $atts,
        'wpgen_latest_posts'
    );
    $query_args = array(
        'post_type' => 'post',
        'posts_per_page' => intval($atts['posts']),
    );
    if (!empty($atts['category'])) {
        $query_args['category_name'] = sanitize_text_field($atts['category']);
    }
    $query = new WP_Query($query_args);
    if (!$query->have_posts()) {
        return '<p>Нет записей для отображения</p>';
    }
    $output = '<ul class="wpgen-latest-posts">';
    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('wpgen_latest_posts', 'wpgen_latest_posts_shortcode');

Использование: [wpgen_latest_posts category="novosti" posts="5"] выведет 5 последних записей из категории "новости".

Расширение функционала

Вложенность шорткодов, условный вывод, AJAX-загрузка — всё это можно реализовать, но требует более сложного кода и знаний JavaScript.

Отладка и тестирование шорткодов

Чтобы убедиться, что шорткод работает корректно, тестируйте его в разных местах сайта и с разными параметрами. Проверяйте безопасность вывода и корректность данных. Используйте отладочные функции, например, error_log() или плагины для отладки.

Если шорткод не работает, убедитесь, что:

Функция зарегистрирована через add_shortcode.
Код подключён и активен.
Нет конфликтов с другими плагинами или темой.

Заключение

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

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