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

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

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

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

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

Как зарегистрировать простой шорткод в functions.php

Для начала давайте создадим самый простой шорткод, который выводит текст «Привет, мир!». Для этого добавим следующий код в файл functions.php вашей темы или в файл вашего собственного плагина:

function wpstudy_hello_shortcode() {
    return '<p>Привет, мир!</p>';
}
add_shortcode('wpstudy_hello', 'wpstudy_hello_shortcode');

После этого в любом месте контента можно использовать [wpstudy_hello], и WordPress заменит его на <p>Привет, мир!</p>.

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

Шорткод с параметрами: как передавать атрибуты

Одна из ключевых возможностей шорткодов — передача параметров. Например, сделаем шорткод, который выводит произвольный текст и позволяет выбрать цвет:

function wpstudy_colored_text_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            'color' => 'black',
        ), $atts, 'wpstudy_colored_text'
    );
    return '<span style="color:' . esc_attr($atts['color']) . ';">' . esc_html($content) . '</span>';
}
add_shortcode('wpstudy_colored_text', 'wpstudy_colored_text_shortcode');

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

[wpstudy_colored_text color="red"]Текст красного цвета[/wpstudy_colored_text]

В результате вы получите красный текст. Если параметр color не указан, по умолчанию будет чёрный цвет.

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

Вставка кнопки с кастомным текстом и ссылкой

Часто нужно разместить кнопку с произвольным текстом и ссылкой. Вот простой шорткод для этого:

function wpstudy_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'url' => '#',
            'text' => 'Нажми меня',
            'color' => '#008CBA',
        ), $atts, 'wpstudy_button'
    );
    return '<a href="' . esc_url($atts['url']) . '" style="'
        . 'background-color:' . esc_attr($atts['color']) . ';'
        . 'color:#fff;'
        . 'padding:10px 20px;'
        . 'text-decoration:none;'
        . 'border-radius:5px;">'
        . esc_html($atts['text']) . '</a>';
}
add_shortcode('wpstudy_button', 'wpstudy_button_shortcode');

Пример использования:

[wpstudy_button url="https://wpstudy.ru" text="Перейти на WPStudy" color="#e74c3c"]

Этот шорткод создаст стильную кнопку с нужным текстом и ссылкой.

Вывод списка последних записей с помощью шорткода

Для сайта, который часто обновляется, полезно выводить последние публикации. Создадим шорткод, который выводит список из N последних постов с ссылками:

function wpstudy_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'count' => 5,
        ), $atts, 'wpstudy_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="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    wp_reset_postdata();
    $output .= '</ul>';
    return $output;
}
add_shortcode('wpstudy_latest_posts', 'wpstudy_latest_posts_shortcode');

Используйте [wpstudy_latest_posts count=3] для вывода 3 последних записей.

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

Хотя создание собственных шорткодов — полезный навык, для расширения возможностей можно использовать готовые плагины:

• Shortcodes Ultimate — один из самых популярных плагинов с набором из более 50 шорткодов для кнопок, табов, галерей и многого другого.
• WP Shortcode by MyThemeShop — удобный плагин с базовыми элементами для форматирования контента и вставки медиа.
• Custom Content Shortcode — позволяет создавать условные шорткоды и управлять отображением контента.

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

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

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

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

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