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

Автор: Игорь Петров | Опубликовано: 06.11.2025

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

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

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

Плюсы использования шорткодов:

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

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

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

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

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

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

В этом коде:

Функция wponline_hello_shortcode принимает атрибуты шорткода и задаёт значение по умолчанию для name;
Используется функция esc_html для безопасного вывода;
Возвращается HTML-строка с приветствием;
Через add_shortcode регистрируется тег [wponline_hello] с этой функцией.

После добавления этого кода в файл functions.php вашей темы или в кастомный плагин, вы сможете использовать в контенте страницы:

[wponline_hello name="Иван"]

И увидите: "Привет, Иван! Добро пожаловать на WPOnline.ru."

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

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

Выше мы уже использовали функцию shortcode_atts, которая помогает задать значения по умолчанию для атрибутов шорткода. Это позволяет сделать шорткод гибким. Например, можно добавить параметр color, чтобы менять цвет текста:

function wponline_hello_shortcode($atts) {
    $atts = shortcode_atts(array(
        'name' => 'Гость',
        'color' => 'black',
    ), $atts, 'wponline_hello');

    $color = sanitize_hex_color($atts['color']) ?: 'black';

    return '<p style="color:' . esc_attr($color) . ';">Привет, ' . esc_html($atts['name']) . '!</p>';
}

Теперь вы можете вставлять:

[wponline_hello name="Мария" color="#ff6600"]

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

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

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

[wponline_box]Текст внутри блока[/wponline_box]

Реализуем такой шорткод:

function wponline_box_shortcode($atts, $content = null) {
    return '<div class="wponline-box" style="border:1px solid #ccc; padding:10px; background:#f9f9f9;">' . do_shortcode($content) . '</div>';
}
add_shortcode('wponline_box', 'wponline_box_shortcode');

Этот код оборачивает вложенный контент в стилизованный блок. Функция do_shortcode позволяет обработать вложенные шорткоды, если они есть.

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

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

Шорткод для вывода списка последних записей с ссылками и датой:

function wponline_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
    ), $atts, 'wponline_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>';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<li><a href="' . esc_url(get_permalink()) . '">' . esc_html(get_the_title()) . '</a> (' . get_the_date() . ')</li>';
    }
    wp_reset_postdata();
    $output .= '</ul>';

    return $output;
}
add_shortcode('wponline_latest_posts', 'wponline_latest_posts_shortcode');

Использование: [wponline_latest_posts count=3] выведет 3 последние записи.

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

function wponline_button_shortcode($atts) {
    $atts = shortcode_atts(array(
        'text' => 'Кнопка',
        'url' => '#',
        'color' => '#0073aa',
    ), $atts, 'wponline_button');

    $url = esc_url($atts['url']);
    $text = esc_html($atts['text']);
    $color = sanitize_hex_color($atts['color']) ?: '#0073aa';

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

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

Заключение

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

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