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

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

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

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

Пользовательские шорткоды позволяют создавать уникальные решения: вставлять динамические данные, интегрировать с API, формировать сложные блоки контента. Это значительно упрощает работу контент-менеджеров и ускоряет разработку.

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

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

function wpmeta_custom_shortcode($atts, $content = null) {
    // обработка атрибутов и контента
    return $output;
}
add_shortcode('wpmeta_shortcode', 'wpmeta_custom_shortcode');

Здесь 'wpmeta_shortcode' — это имя шорткода, которое вы будете использовать в редакторе, а wpmeta_custom_shortcode — функция, которая возвращает HTML для вывода.

Разбор параметров функции

Функция принимает параметры:

• $atts — массив атрибутов, переданных в шорткод;
• $content — контент между открывающим и закрывающим шорткодом (если используется парный шорткод).

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

Пример простого шорткода с параметрами

Рассмотрим пример шорткода, который выводит кнопку с настраиваемым текстом и ссылкой:

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

    $style = '';
    if ($atts['color'] === 'red') {
        $style = 'style="background-color: red; color: white;"';
    } elseif ($atts['color'] === 'green') {
        $style = 'style="background-color: green; color: white;"';
    } else {
        $style = 'style="background-color: blue; color: white;"';
    }

    return '<a href="' . esc_url($atts['url']) . '" class="wpmeta-button" ' . $style . '>' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wpmeta_button', 'wpmeta_button_shortcode');

Теперь в редакторе можно вставить шорткод [wpmeta_button text="Купить" url="https://example.com" color="red"], и он выведет красную кнопку с текстом и ссылкой.

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

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

function wpmeta_highlight_shortcode($atts, $content = null) {
    return '<div class="wpmeta-highlight" style="padding:10px; border: 2px solid #f39c12; background: #fcf8e3;">' . do_shortcode($content) . '</div>';
}
add_shortcode('wpmeta_highlight', 'wpmeta_highlight_shortcode');

Использовать можно так:

[wpmeta_highlight]Важное сообщение для пользователя[/wpmeta_highlight]

Вывод будет обернут в стилизованный блок.

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

Очень важно не выводить пользовательские данные без обработки. Для текста используйте esc_html(), для URL — esc_url(), для атрибутов HTML — esc_attr(). Это защитит сайт от XSS-уязвимостей.

Если шорткод выводит сложный HTML или подключает JavaScript, обязательно используйте соответствующие методы WordPress для подключения скриптов и стилей через wp_enqueue_script() и wp_enqueue_style().

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

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

• Shortcoder — позволяет создавать шорткоды с HTML, JS, CSS через интерфейс;
• Custom Content Shortcode — удобный для простых вставок и управления;
• WP Shortcode by MyThemeShop — набор готовых шорткодов с возможностью кастомизации.

Однако собственные шорткоды дают гибкость и контроль, особенно если вы разработчик.

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

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

function wpmeta_currency_shortcode($atts) {
    $atts = shortcode_atts(array('code' => 'USD'), $atts, 'wpmeta_currency');

    $response = wp_remote_get('https://api.exchangerate-api.com/v4/latest/USD');
    if (is_wp_error($response)) {
        return 'Ошибка получения курса валют';
    }

    $data = json_decode(wp_remote_retrieve_body($response), true);
    if (!isset($data['rates'][$atts['code']])) {
        return 'Неверный код валюты';
    }

    $rate = $data['rates'][$atts['code']];
    return 'Курс USD к ' . esc_html($atts['code']) . ': ' . esc_html(number_format($rate, 4));
}
add_shortcode('wpmeta_currency', 'wpmeta_currency_shortcode');

Вставив [wpmeta_currency code="EUR"], вы получите актуальный курс доллара к евро.

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

Если шорткод выполняет тяжёлые операции (запросы к БД или внешним сервисам), рекомендуется кешировать результат с помощью Transients API:

function wpmeta_cached_currency_shortcode($atts) {
    $atts = shortcode_atts(array('code' => 'USD'), $atts, 'wpmeta_currency');
    $cache_key = 'wpmeta_currency_' . $atts['code'];
    $cached = get_transient($cache_key);
    if ($cached !== false) {
        return $cached;
    }

    // Получение данных с API
    $response = wp_remote_get('https://api.exchangerate-api.com/v4/latest/USD');
    if (is_wp_error($response)) {
        return 'Ошибка получения курса валют';
    }
    $data = json_decode(wp_remote_retrieve_body($response), true);
    if (!isset($data['rates'][$atts['code']])) {
        return 'Неверный код валюты';
    }
    $rate = $data['rates'][$atts['code']];
    $result = 'Курс USD к ' . esc_html($atts['code']) . ': ' . esc_html(number_format($rate, 4));

    // Кешируем на 1 час
    set_transient($cache_key, $result, HOUR_IN_SECONDS);

    return $result;
}
add_shortcode('wpmeta_currency', 'wpmeta_cached_currency_shortcode');

Это снизит нагрузку на сервер и ускорит загрузку страниц.

Итоги по созданию собственных шорткодов

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