Как добавить свой shortcode в WordPress

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

Что такое shortcode в WordPress и зачем он нужен

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

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

Например, если вы хотите часто вставлять кнопку с определённым стилем и поведением, вместо того чтобы каждый раз писать HTML и CSS, можно создать shortcode, который будет автоматически генерировать эту кнопку.

Как создать простой shortcode: базовый пример

Для регистрации собственного shortcode в WordPress используется функция add_shortcode(). Она принимает два параметра: имя shortcode и функцию-обработчик. Рассмотрим пример создания shortcode [wpdir_button], который выводит кнопку с текстом и ссылкой.

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

    return '<a href="' . esc_url( $atts['url'] ) . '" class="wpdir-btn">' . esc_html( $atts['text'] ) . '</a>';
}
add_shortcode( 'wpdir_button', 'wpdir_button_shortcode' );

В этом коде мы определили функцию wpdir_button_shortcode, которая принимает атрибуты, задаёт значения по умолчанию и возвращает HTML-код кнопки. Добавлена базовая безопасность через экранирование.

Чтобы использовать этот shortcode, вставьте в редактор WordPress:

[wpdir_button text="Перейти на WPDir" url="https://wpdir.ru"]

Добавляем стили и скрипты для shortcode

Чтобы кнопка выглядела красиво, нужно добавить CSS. Лучший способ — подключить стили через функцию wp_enqueue_style, чтобы избежать конфликтов и проблем с кэшированием.

function wpdir_enqueue_shortcode_styles() {
    wp_enqueue_style( 'wpdir-shortcode-style', get_stylesheet_directory_uri() . '/css/wpdir-shortcode.css' );
}
add_action( 'wp_enqueue_scripts', 'wpdir_enqueue_shortcode_styles' );

Создайте файл wpdir-shortcode.css в папке css вашей темы и добавьте туда стиль для кнопки:

.wpdir-btn {
    display: inline-block;
    background-color: #0073aa;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.wpdir-btn:hover {
    background-color: #005177;
}

Теперь все кнопки, созданные через shortcode, будут иметь стилизованный вид, который легко изменить в одном месте.

Использование атрибутов и параметров в shortcode

Shortcodes могут принимать атрибуты для настройки вывода. В примере выше мы использовали text и url. Можно передавать любые параметры, например, цвет кнопки, размер шрифта или атрибут target для ссылки.

Расширим наш пример, добавив атрибут color:

function wpdir_button_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'text' => 'Нажми меня',
        'url' => '#',
        'color' => '#0073aa'
    ), $atts, 'wpdir_button' );

    $style = 'background-color:' . esc_attr( $atts['color'] ) . ';';

    return '<a href="' . esc_url( $atts['url'] ) . '" class="wpdir-btn" style="' . $style . '">' . esc_html( $atts['text'] ) . '</a>';
}

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

[wpdir_button text="Купить" url="https://wpdir.ru/produkty" color="#e74c3c"]

Это сделает кнопку красного цвета.

Создание шорткода с вложенным контентом

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

[wpdir_box]Текст внутри блока[/wpdir_box]

Для этого функция обработчика получает второй параметр $content. Пример:

function wpdir_box_shortcode( $atts, $content = null ) {
    return '<div class="wpdir-box">' . do_shortcode( $content ) . '</div>';
}
add_shortcode( 'wpdir_box', 'wpdir_box_shortcode' );

Добавьте стили для класса wpdir-box в ваш CSS, например:

.wpdir-box {
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 5px;
}

Теперь можно удобно оборачивать любой текст или другой контент в стилизованный блок.

Советы по безопасности и производительности

При создании shortcode важно помнить о безопасности:

• Всегда экранируйте входящие данные с помощью esc_html(), esc_attr() и esc_url().
• Избегайте выполнения тяжелых операций внутри функции shortcode, чтобы не замедлять загрузку страниц.
• Используйте do_shortcode(), если нужно вложить один shortcode в другой.

Правильное использование атрибутов и обработка контента поможет избежать XSS-уязвимостей и обеспечит корректное отображение.

Полезные плагины для работы с shortcode

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

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

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