WPKit: как создать свой шорткод для WordPress с примерами кода

Автор: Дарья Данилова | Опубликовано: 27.11.2025

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

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

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

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

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

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

function wpkit_hello_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'name' => 'Гость',
    ), $atts, 'wpkit_hello' );

    return '<p>Привет, ' . esc_html( $atts['name'] ) . '! Добро пожаловать на WPKit.</p>';
}
add_shortcode( 'wpkit_hello', 'wpkit_hello_shortcode' );

В этом примере шорткод [wpkit_hello name="Иван"] выведет: Привет, Иван! Добро пожаловать на WPKit. Если параметр name не указан, выведется приветствие для гостя.

Пояснения к коду

Функция принимает атрибуты шорткода, задаёт значения по умолчанию через shortcode_atts().
Используется esc_html() для безопасного вывода пользовательских данных.
Функция возвращает HTML в виде строки, который WordPress вставляет на страницу.
Регистрация шорткода происходит через add_shortcode(), где первый параметр — тег шорткода, второй — функция-обработчик.

Создание шорткода с поддержкой вложенного контента

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

Пример шорткода, который выделяет текст рамкой и добавляет класс:

function wpkit_box_shortcode( $atts, $content = null ) {
    $atts = shortcode_atts( array(
        'color' => 'blue',
    ), $atts, 'wpkit_box' );

    $color = esc_attr( $atts['color'] );
    $content = do_shortcode( $content ); // Обработка вложенных шорткодов

    return '<div class="wpkit-box wpkit-box-' . $color . '">' . $content . '</div>';
}
add_shortcode( 'wpkit_box', 'wpkit_box_shortcode' );

Использование: [wpkit_box color="red"]Важная информация[/wpkit_box] выведет блок с красной рамкой.

Для стилизации нужно добавить CSS:

.wpkit-box {
    border: 2px solid;
    padding: 10px;
    margin: 15px 0;
    border-radius: 5px;
}
.wpkit-box-blue { border-color: blue; }
.wpkit-box-red { border-color: red; }

Практические примеры полезных шорткодов для WPKit.ru

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

Этот шорткод покажет список последних публикаций с ссылками и датами:

function wpkit_recent_posts_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'count' => 5,
        'category' => '',
    ), $atts, 'wpkit_recent_posts' );

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

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

    $query = new WP_Query( $args );

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

    $output = '<ul class="wpkit-recent-posts">';
    while ( $query->have_posts() ) {
        $query->the_post();
        $output .= '<li><a href="' . esc_url( get_permalink() ) . '">' . esc_html( get_the_title() ) . '</a> <span>(' . get_the_date() . ')</span></li>';
    }
    wp_reset_postdata();
    $output .= '</ul>';

    return $output;
}
add_shortcode( 'wpkit_recent_posts', 'wpkit_recent_posts_shortcode' );

Использование: [wpkit_recent_posts count="3" category="wordpress"] выведет 3 последних поста из категории WordPress.

2. Шорткод для вставки кнопки с кастомным URL

Кнопка с возможностью задать ссылку и текст:

function wpkit_button_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'url' => '#',
        'text' => 'Кнопка',
        'target' => '_self',
    ), $atts, 'wpkit_button' );

    $url = esc_url( $atts['url'] );
    $text = esc_html( $atts['text'] );
    $target = in_array( $atts['target'], array( '_self', '_blank' ), true ) ? $atts['target'] : '_self';

    return '<a href="' . $url . '" class="wpkit-button" target="' . $target . '">' . $text . '</a>';
}
add_shortcode( 'wpkit_button', 'wpkit_button_shortcode' );

Добавьте CSS для стиля кнопки:

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

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

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

Экранирование данных. Всегда используйте функции типа esc_html(), esc_attr(), esc_url(), чтобы избежать XSS-уязвимостей.
Обработка вложенных шорткодов. Если ваш шорткод может содержать другие шорткоды, применяйте do_shortcode() к содержимому.
Минимизация запросов к базе. При работе с WP_Query старайтесь оптимизировать параметры и использовать кэширование, чтобы не нагружать сервер.
Чистый код. Следите за читаемостью и структурой функций, чтобы облегчить поддержку и расширение.

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

Для проверки работы шорткода можно:

Вставить его в тестовую страницу или запись и посмотреть результат.
Использовать функцию var_dump() или error_log() внутри обработчика для отладки.
Временно выводить диагностическую информацию с помощью echo или print_r().
Проверять ошибки PHP в логах сервера.

Например, для отладки атрибутов можно временно добавить:

function wpkit_debug_shortcode( $atts ) {
    return '<pre>' . print_r( $atts, true ) . '</pre>';
}
add_shortcode( 'wpkit_debug', 'wpkit_debug_shortcode' );

Вставьте [wpkit_debug name="Тест"] и увидите, как передаются параметры.

Как создать свой шорткод для WordPress