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

Автор: Марина Новикова | Опубликовано: 04.11.2025

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

Что такое шорткод в WordPress и зачем создавать собственные

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

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

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

Это особенно полезно для разработчиков и владельцев сайтов с нестандартными задачами.

Основы создания собственного шорткода в WordPress

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

Простейший пример шорткода, который выводит текст «Привет, WPTasks.ru!» выглядит так:

function wptasks_hello_shortcode() {
    return 'Привет, WPTasks.ru!';
}
add_shortcode('wptasks_hello', 'wptasks_hello_shortcode');

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

Где размещать код шорткодов

Лучше всего создавать собственный плагин для шорткодов, чтобы не потерять код при смене темы. Для этого создайте папку wptasks-shortcodes в директории wp-content/plugins и в ней файл wptasks-shortcodes.php с шапкой плагина:

<?php
/**
 * Plugin Name: WPTasks Shortcodes
 * Description: Набор пользовательских шорткодов для сайта WPTasks.ru
 * Version: 1.0
 * Author: Ваше имя
 */

// Здесь будут шорткоды

Активируйте плагин через админку WordPress, и ваши шорткоды станут доступны.

Передача атрибутов в шорткод: динамические данные и настройки

Очень часто шорткод должен принимать параметры — например, количество выводимых элементов, цвет текста или ID записи. В функции обратного вызова параметры доступны в первом аргументе — массиве атрибутов.

Используем функцию shortcode_atts() для задания значений по умолчанию:

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

    return '<a href="'.esc_url($atts['url']).'" style="color:'.esc_attr($atts['color']).';" class="wptasks-button">'.esc_html($atts['text']).'</a>';
}
add_shortcode('wptasks_button', 'wptasks_button_shortcode');

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

[wptasks_button text="Заказать" url="https://wptasks.ru/order" color="red"]

Он выведет красную ссылку с текстом «Заказать» и указанным URL.

Советы по безопасности при работе с атрибутами

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

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

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

Иногда нужно быстро вывести блок из последних публикаций. Вот пример шорткода с параметром количества:

function wptasks_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(array('count' => 5), $atts, 'wptasks_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 class="wptasks-latest-posts">';
    while ($query->have_posts()) {
        $query->the_post();
        $thumbnail = get_the_post_thumbnail(get_the_ID(), 'thumbnail');
        $output .= '<li>' . $thumbnail . '<a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    wp_reset_postdata();
    $output .= '</ul>';

    return $output;
}
add_shortcode('wptasks_latest_posts', 'wptasks_latest_posts_shortcode');

Использование: [wptasks_latest_posts count="3"] выведет 3 последние записи с миниатюрами и ссылками.

2. Шорткод для вывода контактной информации

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

function wptasks_contact_shortcode($atts) {
    $atts = shortcode_atts(array(
        'phone' => '+7 (999) 123-45-67',
        'email' => 'info@wptasks.ru'
    ), $atts, 'wptasks_contact');

    return '<div class="wptasks-contact"><p>Телефон: <a href="tel:'.esc_attr($atts['phone']).'">'.esc_html($atts['phone']).'</a></p><p>Email: <a href="mailto:'.esc_attr($atts['email']).'">'.esc_html($atts['email']).'</a></p></div>';
}
add_shortcode('wptasks_contact', 'wptasks_contact_shortcode');

Пример использования: [wptasks_contact phone="+7 (912) 345-67-89" email="support@wptasks.ru"]

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

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

function wptasks_highlight_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array('color' => 'yellow'), $atts, 'wptasks_highlight');
    return '<span style="background-color:'.esc_attr($atts['color']).';">' . do_shortcode($content) . '</span>';
}
add_shortcode('wptasks_highlight', 'wptasks_highlight_shortcode');

Использование: [wptasks_highlight color="lightgreen"]Важный текст[/wptasks_highlight] — выделит текст цветом фона.

Обратите внимание, что мы вызываем do_shortcode внутри функции, чтобы обработать вложенные шорткоды, если они есть.

Оптимизация и кеширование результата шорткодов

Если ваш шорткод выполняет сложные запросы или внешние API-вызовы, стоит задуматься об оптимизации. Один из способов — кэшировать результат с помощью транзиентов WordPress.

function wptasks_expensive_shortcode() {
    $cache_key = 'wptasks_expensive_data';
    $data = get_transient($cache_key);

    if (false === $data) {
        // Имитация сложной операции или API-запроса
        $data = 'Данные получены: ' . date('H:i:s');
        set_transient($cache_key, $data, 3600); // кэш на 1 час
    }

    return '<div class="wptasks-expensive">' . esc_html($data) . '</div>';
}
add_shortcode('wptasks_expensive', 'wptasks_expensive_shortcode');

Так вы снизите нагрузку на сервер и ускорите отображение страниц.

Заключение: лучшие практики для работы с шорткодами

Используйте уникальные префиксы для функций и шорткодов (например, wptasks_), чтобы избежать конфликтов с другими плагинами.
Всегда фильтруйте и экранируйте вывод, особенно если используете атрибуты.
Создавайте собственные плагины для шорткодов, а не вставляйте код в functions.php темы.
Документируйте ваши шорткоды, чтобы другие пользователи сайта понимали, как их использовать.
Оптимизируйте шорткоды, особенно если они делают запросы к базе или внешним сервисам — используйте кеширование.

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