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

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

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

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

Шорткоды особенно полезны при повторяющемся использовании одних и тех же элементов, таких как кнопки, формы, блоки с информацией, специальные стили и так далее.

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

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

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

function wptricks_hello_shortcode() {
    return '<p>Привет, это шорткод от WPTricks!</p>';
}
add_shortcode('wptricks_hello', 'wptricks_hello_shortcode');

Чтобы использовать шорткод, добавьте в редактор запись [wptricks_hello]. При выводе на сайте появится текст из функции.

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

Шорткоды могут принимать параметры для более гибкой настройки. Атрибуты передаются в функцию в виде массива. Рассмотрим пример, где можно изменить текст приветствия и имя пользователя.

function wptricks_greet_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'name' => 'Гость',
            'text' => 'Добро пожаловать на WPTricks!'
        ),
        $atts,
        'wptricks_greet'
    );

    return '<p>' . esc_html($atts['text']) . ', ' . esc_html($atts['name']) . '</p>';
}
add_shortcode('wptricks_greet', 'wptricks_greet_shortcode');

Использование в записи будет выглядеть так:

[wptricks_greet name="Иван" text="Приветствую"]

Результат: Приветствую, Иван

Встраивание HTML и скриптов в шорткодах: практические советы

Часто необходимо, чтобы шорткод выводил сложную верстку или даже JavaScript. Важно при этом соблюдать правильное экранирование, чтобы не сломать страницу и не создать уязвимости.

Пример шорткода с кнопкой и простым JS-событием:

function wptricks_button_shortcode($atts) {
    $atts = shortcode_atts(array('label' => 'Нажми меня'), $atts, 'wptricks_button');
    
    $button_id = 'wptricks-btn-' . uniqid();
    
    $html = '<button id="' . esc_attr($button_id) . '">' . esc_html($atts['label']) . '</button>';
    $html .= '<script>
        document.getElementById("' . $button_id . '").addEventListener("click", function() {
            alert("Кнопка нажата!");
        });
    </script>';
    
    return $html;
}
add_shortcode('wptricks_button', 'wptricks_button_shortcode');

Этот шорткод выводит кнопку с уникальным ID, чтобы обработчик JS не конфликтовал с другими элементами на странице.

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

При создании шорткодов всегда очищайте и экранируйте входящие данные с помощью функций esc_html(), esc_attr() или wp_kses_post(), если выводите HTML. Это предотвращает инъекции и XSS-атаки.

Не рекомендуется использовать echo внутри функции шорткода. Вместо этого возвращайте результат. Так WordPress корректно вставит контент.

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

Вывод текущей даты

Иногда нужно показать дату публикации или текущую дату внутри записи. Для этого создадим шорткод:

function wptricks_current_date_shortcode() {
    return date_i18n(get_option('date_format'));
}
add_shortcode('wptricks_date', 'wptricks_current_date_shortcode');

В редакторе напишите [wptricks_date], и вы увидите сегодняшнюю дату в формате вашего сайта.

Вставка пользовательских уведомлений

Например, шорткод для вывода цветного блока с сообщением:

function wptricks_alert_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array('type' => 'info'), $atts, 'wptricks_alert');
    $type_class = 'wptricks-alert-' . sanitize_html_class($atts['type']);

    return '<div class="wptricks-alert ' . esc_attr($type_class) . '">' . do_shortcode($content) . '</div>';
}
add_shortcode('wptricks_alert', 'wptricks_alert_shortcode');

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

[wptricks_alert type="warning"]Внимание! Проверьте настройки.[/wptricks_alert]

Для стилизации добавьте в CSS темы:

.wptricks-alert {padding: 10px; border-radius: 3px; margin: 10px 0;}
.wptricks-alert-info {background-color: #d9edf7; color: #31708f;}
.wptricks-alert-warning {background-color: #fcf8e3; color: #8a6d3b;}
.wptricks-alert-error {background-color: #f2dede; color: #a94442;}

Подключение шорткодов из плагинов и функций темы

Рекомендуется регистрировать свои шорткоды в отдельном плагине или в файле functions.php дочерней темы. Это обеспечивает независимость от обновлений и удобство сопровождения.

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

add_filter('widget_text', 'do_shortcode');

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

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

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

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