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

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

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

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

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

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

function wptavern_simple_shortcode() {
    return '<div style="padding:10px; background:#f0f0f0; border:1px solid #ccc;">Это мой первый шорткод!</div>';
}
add_shortcode('wptavern_hello', 'wptavern_simple_shortcode');

Теперь в любом месте контента можно вставить [wptavern_hello], и WordPress выведет HTML-код из функции. Такой подход подходит для простого вывода статичного или динамического контента.

Шорткод с параметрами: как сделать код гибким

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

function wptavern_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#',
            'color' => 'blue'
        ),
        $atts,
        'wptavern_button'
    );

    return '<a href="' . esc_url($atts['url']) . '" style="display:inline-block;padding:10px 20px;background:' . esc_attr($atts['color']) . ';color:#fff;text-decoration:none;border-radius:4px;">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wptavern_button', 'wptavern_button_shortcode');

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

[wptavern_button text="Перейти" url="https://wptavern.ru" color="#e74c3c"]

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

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

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

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

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

    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="wptavern-latest-posts">';
    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('wptavern_latest_posts', 'wptavern_latest_posts_shortcode');

Использование:

[wptavern_latest_posts count="3" category="novosti"]

Шорткод выведет 3 последних записи из категории «новости» с ссылками на них.

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

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

function wptavern_highlight_shortcode($atts, $content = null) {
    return '<span style="background:yellow; font-weight:bold;">' . do_shortcode($content) . '</span>';
}
add_shortcode('wptavern_highlight', 'wptavern_highlight_shortcode');

Использование:

[wptavern_highlight]Этот текст будет выделен жёлтым цветом[/wptavern_highlight]

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

Безопасность и производительность шорткодов

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

• Используйте esc_html, esc_url и другие функции экранирования для вывода данных, чтобы избежать XSS-уязвимостей.
• Не выполняйте тяжелых запросов или операций в шорткодах без необходимости, чтобы не замедлять загрузку страниц.
• Кэшируйте результаты, если шорткод выводит сложный динамический контент. Для этого можно использовать Transients API.

Пример кэширования:

function wptavern_cached_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(array('count' => 5), $atts, 'wptavern_cached_latest_posts');
    $cache_key = 'wptavern_latest_posts_' . intval($atts['count']);
    $output = get_transient($cache_key);

    if (false === $output) {
        // Генерируем вывод
        $query = new WP_Query(array('posts_per_page' => intval($atts['count'])));
        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>';
        }
        $output .= '</ul>';
        wp_reset_postdata();

        set_transient($cache_key, $output, HOUR_IN_SECONDS);
    }
    return $output;
}
add_shortcode('wptavern_cached_latest_posts', 'wptavern_cached_latest_posts_shortcode');

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

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

• Shortcodes Ultimate — большой набор готовых шорткодов с визуальным редактором.
• WP Shortcode by MyThemeShop — простой набор полезных шорткодов для дизайна контента.
• Shortcoder — позволяет создавать собственные шорткоды через админку без кода.

Тем не менее, для уникальных задач лучше писать свои шорткоды напрямую, как показано выше.

Итоги: создаём уникальные шорткоды на wptavern.ru

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