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

Автор: Полина Лебедева | Опубликовано: 06.11.2025

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

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

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

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

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

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

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

Рассмотрим базовый пример, создающий шорткод [wpmanual_greeting], который выводит приветственное сообщение.

function wpmanual_greeting_shortcode() {
    return '<p>Привет, это мой собственный шорткод!</p>';
}
add_shortcode('wpmanual_greeting', 'wpmanual_greeting_shortcode');

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

Передача параметров в шорткод

Шорткоды можно делать более гибкими, передавая параметры. Например, добавим параметр name для персонализации приветствия.

function wpmanual_greeting_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'name' => 'гость',
        ), $atts, 'wpmanual_greeting'
    );
    return '<p>Привет, ' . esc_html($atts['name']) . '!</p>';
}
add_shortcode('wpmanual_greeting', 'wpmanual_greeting_shortcode');

Теперь вы можете использовать [wpmanual_greeting name="Алексей"], и шорткод выведет «Привет, Алексей!».

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

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

1. Шорткод для вывода текущей даты

Иногда нужно показывать пользователям актуальную дату. Создадим шорткод [wpmanual_date], который будет выводить дату в нужном формате.

function wpmanual_date_shortcode($atts) {
    $atts = shortcode_atts(
        array('format' => 'd.m.Y'), $atts, 'wpmanual_date'
    );
    return date($atts['format']);
}
add_shortcode('wpmanual_date', 'wpmanual_date_shortcode');

Вы можете использовать его так: [wpmanual_date format="j F Y"], чтобы вывести дату в формате «1 января 2024».

2. Шорткод для показа списка последних постов

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

function wpmanual_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(
        array('count' => 5), $atts, 'wpmanual_recent_posts'
    );

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

    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('wpmanual_recent_posts', 'wpmanual_recent_posts_shortcode');

Вызовите шорткод [wpmanual_recent_posts count=3], чтобы показать 3 последние поста.

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

При создании шорткодов важно соблюдать несколько правил:

Экранируйте вывод — используйте функции esc_html, esc_attr, wp_kses_post в зависимости от контента, чтобы избежать XSS-уязвимостей.
Используйте кэширование, если шорткод выполняет тяжелые запросы к базе данных или внешним сервисам, чтобы не нагружать сервер.
Избегайте вывода напрямую — всегда возвращайте результат из функции шорткода, а не выводите его через echo. Это важно для корректной работы WordPress с контентом.
Проверяйте входные данные и корректно обрабатывайте параметры, чтобы шорткод не ломался при неправильном вводе.
Делайте шорткоды легковесными, не загружайте лишние скрипты или стили без необходимости. Если нужно — подключайте их только при использовании шорткода.

Расширение функционала: подключение CSS и JS к шорткодам

Иногда шорткоду нужен собственный стиль или скрипт. Чтобы подключить их только при использовании шорткода, выполните следующие шаги.

Например, добавим к шорткоду [wpmanual_box] стилизованный контейнер с подключением CSS.

function wpmanual_box_shortcode($atts, $content = null) {
    wp_enqueue_style('wpmanual-box-style', get_stylesheet_directory_uri() . '/css/wpmanual-box.css');

    return '<div class="wpmanual-box">' . do_shortcode($content) . '</div>';
}
add_shortcode('wpmanual_box', 'wpmanual_box_shortcode');

В файле wpmanual-box.css можно написать стили для класса wpmanual-box. Таким образом, стили будут загружаться только при использовании шорткода, что улучшит производительность сайта.

Заключение

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

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