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

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

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

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

Шорткоды позволяют:

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

Создать собственный шорткод можно с помощью функции add_shortcode(). Рассмотрим, как это сделать на практике.

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

Начнём с самого простого примера — шорткод, который выводит приветственное сообщение.

function wp_themes_rus_hello_shortcode() {
    return '<p>Привет! Это мой первый шорткод в WordPress.</p>';
}
add_shortcode('wp_hello', 'wp_themes_rus_hello_shortcode');

Добавьте этот код в файл functions.php вашей темы или в плагин для пользовательских функций. Теперь, вставляя в редактор [wp_hello], вы увидите сообщение.

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

Шорткод с параметрами: как передать данные

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

function wp_themes_rus_greet_shortcode($atts) {
    $args = shortcode_atts(array(
        'name' => 'Гость',
    ), $atts);
    return '<p>Здравствуйте, ' . esc_html($args['name']) . '! Добро пожаловать на сайт.</p>';
}
add_shortcode('wp_greet', 'wp_themes_rus_greet_shortcode');

Теперь, вызов [wp_greet name="Иван"] выведет: Здравствуйте, Иван! Добро пожаловать на сайт.

Функция shortcode_atts() помогает задать значения параметров по умолчанию и объединить их с переданными атрибутами.

Шорткод с вложенным HTML и динамическими данными

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

function wp_themes_rus_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'posts' => 5,
    ), $atts);

    $query = new WP_Query(array(
        'posts_per_page' => intval($atts['posts']),
        '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('wp_recent_posts', 'wp_themes_rus_recent_posts_shortcode');

Вызов шорткода [wp_recent_posts posts="3"] отобразит 3 последних поста в виде списка с ссылками.

Здесь мы используем класс WP_Query для получения записей, а также функции get_permalink() и get_the_title() для формирования вывода.

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

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

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

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

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

При создании шорткодов важно учитывать несколько моментов:

• Используйте функции esc_html(), esc_attr() и другие для экранирования вывода, чтобы избежать XSS-уязвимостей.
• Не выводите данные напрямую — всегда возвращайте строку из функции шорткода.
• Для сложных запросов используйте WP_Query и обязательно сбрасывайте постдату с помощью wp_reset_postdata().
• Минимизируйте нагрузку на сайт — избегайте тяжелых операций в шорткодах, особенно если они используются много раз на странице.

Расширение функционала: вложенные шорткоды и фильтры

WordPress поддерживает вложенные шорткоды. Для корректной обработки внутри функции используйте do_shortcode(). Например:

function wp_themes_rus_box_shortcode($atts, $content = null) {
    return '<div class="wp-box">' . do_shortcode($content) . '</div>';
}
add_shortcode('wp_box', 'wp_themes_rus_box_shortcode');

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

[wp_box]Текст с вложенным шорткодом [wp_hello][/wp_box]

Это выведет блок с текстом, включая обработку вложенного шорткода [wp_hello].

Также для изменения поведения шорткодов можно использовать фильтры WordPress, например do_shortcode_tag.