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

Автор: София Тарасова | Опубликовано: 31.10.2025

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

Что такое шорткод и зачем создавать собственный?

Шорткод — это сокращённая запись вида [название] или с параметрами [название параметр="значение"], которая заменяется на определённый вывод при отображении страницы. Это удобный способ создавать динамический и часто повторяющийся контент без необходимости писать HTML или PHP каждый раз.

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

Например, можете создать шорткод для вывода списка последних товаров, отзывов, форм обратной связи или даже нестандартных виджетов.

Как зарегистрировать шорткод в WordPress

Регистрация шорткода происходит с помощью функции add_shortcode. Она принимает два параметра: имя шорткода и функцию-обработчик, которая должна вернуть HTML или другой вывод.

function wpfinder_shortcode_example($atts, $content = null) {
    return '<strong>Пример собственного шорткода!</strong>';
}
add_shortcode('wpfinder_example', 'wpfinder_shortcode_example');

В данном примере шорткод [wpfinder_example] будет выводить жирный текст «Пример собственного шорткода!».

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

Передача атрибутов в шорткод

Часто шорткод нуждается в параметрах. WordPress передаёт их в виде массива $atts. Чтобы задать значения по умолчанию и корректно обрабатывать параметры, используйте функцию shortcode_atts.

function wpfinder_shortcode_greeting($atts) {
    $atts = shortcode_atts(array(
        'name' => 'Гость',
        'time' => 'день'
    ), $atts, 'wpfinder_greeting');

    return 'Привет, ' . esc_html($atts['name']) . '! Хорошего ' . esc_html($atts['time']) . '!';
}
add_shortcode('wpfinder_greeting', 'wpfinder_shortcode_greeting');

Теперь шорткод [wpfinder_greeting name="Иван" time="вечер"] выведет «Привет, Иван! Хорошего вечер!». Если параметры не переданы, используются значения по умолчанию.

Пример создания сложного шорткода с выводом данных из базы

Рассмотрим более практический пример. Допустим, нужно вывести список последних записей блога в виде краткого списка с ссылками.

function wpfinder_shortcode_latest_posts($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
        'category' => ''
    ), $atts, 'wpfinder_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']);
    }

    $posts = get_posts($args);

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

    $output = '<ul class="wpfinder-latest-posts">';
    foreach ($posts as $post) {
        $title = esc_html(get_the_title($post));
        $link = esc_url(get_permalink($post));
        $output .= '<li><a href="' . $link . '">' . $title . '</a></li>';
    }
    $output .= '</ul>';

    return $output;
}
add_shortcode('wpfinder_latest_posts', 'wpfinder_shortcode_latest_posts');

Шорткод [wpfinder_latest_posts count="3" category="novosti"] выведет список из трёх последних записей категории «novosti». Этот шорткод легко кастомизировать и расширять.

Стилизация и подключение CSS для шорткодов

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

function wpfinder_enqueue_shortcode_styles() {
    wp_enqueue_style('wpfinder-shortcode-style', get_stylesheet_directory_uri() . '/css/wpfinder-shortcode.css');
}
add_action('wp_enqueue_scripts', 'wpfinder_enqueue_shortcode_styles');

В файле wpfinder-shortcode.css можно описать стили, например:

.wpfinder-latest-posts {
    list-style: disc inside;
    padding-left: 0;
}
.wpfinder-latest-posts li {
    margin-bottom: 5px;
}
.wpfinder-latest-posts li a {
    text-decoration: none;
    color: #0073aa;
}
.wpfinder-latest-posts li a:hover {
    text-decoration: underline;
}

Обработка вложенного контента в шорткодах

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

function wpfinder_shortcode_box($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => '#f0f0f0'
    ), $atts, 'wpfinder_box');

    $style = 'background-color:' . esc_attr($atts['color']) . '; padding: 15px; border-radius: 5px;';

    return '<div style="' . $style . '">' . do_shortcode($content) . '</div>';
}
add_shortcode('wpfinder_box', 'wpfinder_shortcode_box');

Пример использования: [wpfinder_box color="#dff0d8"]Внутренний текст и другие шорткоды[/wpfinder_box]. Шорткод создаст блок с фоновым цветом и отступами.

Рекурсивный вызов внутри шорткода

Обратите внимание, что для корректного вывода вложенных шорткодов внутри контента нужно использовать функцию do_shortcode($content). Без неё вложенные шорткоды не обработаются.

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

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

Используйте esc_html, esc_attr, esc_url для вывода данных, чтобы избежать XSS-уязвимостей.
Обрабатывайте и фильтруйте входящие атрибуты с помощью sanitize_text_field, intval и других функций.
Не выводите необработанный пользовательский ввод напрямую.

Это защитит ваш сайт и пользователей от возможных атак и ошибок.

Как отлаживать и тестировать шорткоды

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

Также полезно включить режим отладки WordPress в файле wp-config.php:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

Ошибки будут записываться в файл wp-content/debug.log, где вы сможете найти подробности.

Расширение возможностей шорткодов через параметры

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

Пример: добавить атрибут order для выбора порядка сортировки постов.

function wpfinder_shortcode_latest_posts_extended($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
        'category' => '',
        'order' => 'DESC'
    ), $atts, 'wpfinder_latest_posts_ext');

    $args = array(
        'posts_per_page' => intval($atts['count']),
        'post_status' => 'publish',
        'order' => ($atts['order'] === 'ASC') ? 'ASC' : 'DESC'
    );

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

    $posts = get_posts($args);

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

    $output = '<ul class="wpfinder-latest-posts">';
    foreach ($posts as $post) {
        $title = esc_html(get_the_title($post));
        $link = esc_url(get_permalink($post));
        $output .= '<li><a href="' . $link . '">' . $title . '</a></li>';
    }
    $output .= '</ul>';

    return $output;
}
add_shortcode('wpfinder_latest_posts_ext', 'wpfinder_shortcode_latest_posts_extended');