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

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

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

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

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

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

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

Рассмотрим простой пример создания шорткода [wp-host-hello], который выводит приветственное сообщение:

function wp_host_hello_shortcode($atts) {
    return '<p>Привет от WP-Host! Это кастомный шорткод.</p>';
}
add_shortcode('wp-host-hello', 'wp_host_hello_shortcode');

Данный код можно добавить в файл functions.php вашей темы или в плагин. После этого при вставке [wp-host-hello] в редакторе на сайте будет отображаться заданный текст.

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

Использование атрибутов в шорткодах: настройка вывода

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

Например, расширим предыдущий шорткод, чтобы он принимал параметр name и выводил персонализированное приветствие:

function wp_host_hello_shortcode($atts) {
    $atts = shortcode_atts(
        array('name' => 'Гость'),
        $atts,
        'wp-host-hello'
    );
    return '<p>Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на WP-Host.</p>';
}
add_shortcode('wp-host-hello', 'wp_host_hello_shortcode');

Теперь при использовании [wp-host-hello name="Иван"] на сайте появится: «Привет, Иван! Добро пожаловать на WP-Host.»

Если параметр не передан, будет использоваться значение по умолчанию «Гость».

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

1. Шорткод для вывода текущей даты

Иногда нужно динамически показывать дату в публикациях. Создадим шорткод [wp-host-date], который выведет дату в формате «дд.мм.гггг»:

function wp_host_date_shortcode() {
    return date_i18n('d.m.Y');
}
add_shortcode('wp-host-date', 'wp_host_date_shortcode');

date_i18n() — локализованная версия функции date(), учитывающая часовой пояс и язык сайта.

2. Шорткод для создания кнопки с кастомным текстом и ссылкой

Создадим шорткод [wp-host-button], который принимает параметры text и url и выводит стилизованную кнопку:

function wp_host_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#'
        ),
        $atts,
        'wp-host-button'
    );

    $text = esc_html($atts['text']);
    $url = esc_url($atts['url']);

    return '<a href="' . $url . '" class="wp-host-button">' . $text . '</a>';
}
add_shortcode('wp-host-button', 'wp_host_button_shortcode');

Для корректного отображения кнопки нужно добавить CSS в стилевой файл темы:

.wp-host-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
}
.wp-host-button:hover {
    background-color: #005177;
}

Используем так: [wp-host-button text="Подробнее" url="https://wp-host.ru"]

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

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

• Всегда экранируйте вывод с помощью функций esc_html(), esc_url() и им подобных, чтобы предотвратить XSS-атаки.
• Не выполняйте тяжелые операции внутри шорткода, чтобы не замедлять загрузку страниц.
• Используйте префиксы в названиях функций и шорткодов, чтобы избежать конфликтов с другими плагинами и темами.
• Если шорткод выводит HTML, старайтесь возвращать его через return, а не напрямую выводить, чтобы избежать проблем с буферизацией.

Расширение функционала: вложенные и самозакрывающиеся шорткоды

Шорткоды бывают двух типов: парные и одиночные. Парные шорткоды имеют открывающий и закрывающий теги, например [wp-host-box]Содержимое[/wp-host-box]. Они позволяют оборачивать контент и работать с вложенным текстом.

Пример парного шорткода, который выводит контент в рамке с заголовком:

function wp_host_box_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array('title' => 'Заголовок'), $atts, 'wp-host-box');
    $title = esc_html($atts['title']);
    $content = wp_kses_post($content);

    return '<div class="wp-host-box"><h3>' . $title . '</h3><div>' . $content . '</div></div>';
}
add_shortcode('wp-host-box', 'wp_host_box_shortcode');

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

[wp-host-box title="Важная информация"]Здесь можно разместить любой текст или HTML. [/wp-host-box]

Для стилей добавьте CSS:

.wp-host-box {
    border: 2px solid #0073aa;
    padding: 15px;
    margin: 10px 0;
    background-color: #f0f8ff;
}
.wp-host-box h3 {
    margin-top: 0;
}

Интеграция кастомных шорткодов с популярными плагинами

Многие плагины поддерживают или используют шорткоды. Например, плагин Contact Form 7 создаёт шорткод для формы контакта, а WooCommerce — для вывода товаров и категорий.

Вы можете создавать свои шорткоды, которые взаимодействуют с API этих плагинов. Например, шорткод для вывода последних товаров WooCommerce с кастомной обёрткой.

Вот пример шорткода, который выводит заголовок и ссылку на последние 3 товара WooCommerce:

function wp_host_latest_products_shortcode($atts) {
    if (!class_exists('WooCommerce')) return 'WooCommerce не установлен';

    $atts = shortcode_atts(array('count' => 3), $atts, 'wp-host-latest-products');

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

    $query = new WP_Query($args);
    if (!$query->have_posts()) return 'Товары не найдены';

    $output = '<ul class="wp-host-latest-products">';
    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-host-latest-products', 'wp_host_latest_products_shortcode');

Использование: [wp-host-latest-products count="5"]

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