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

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

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

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

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

Преимущества использования шорткодов:

• Удобство для контент-менеджеров — не нужно знать код.
• Повторное использование кода без дублирования.
• Лёгкое обновление функционала в одном месте.

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

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

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

function wphelper_shortcode_greeting($atts) {
    $atts = shortcode_atts(array(
        'name' => 'Гость'
    ), $atts, 'wphelper_greeting');
    return 'Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на wphelper.ru.';
}
add_shortcode('wphelper_greeting', 'wphelper_shortcode_greeting');

Теперь, если в записи вставить [wphelper_greeting name="Вася"], отобразится: «Привет, Вася! Добро пожаловать на wphelper.ru.»

Пояснение к коду

Функция wphelper_shortcode_greeting принимает массив атрибутов, задаёт значение по умолчанию через shortcode_atts, и возвращает строку с приветствием. Важно использовать функцию esc_html для безопасности — это предотвращает XSS-атаки.

Передача атрибутов в шорткод и их обработка

Атрибуты позволяют настраивать поведение шорткода при каждом использовании. Их можно задать через массив, как в предыдущем примере. Рассмотрим более продвинутый пример — шорткод для вывода кнопки с настраиваемым текстом, ссылкой и классом CSS.

function wphelper_shortcode_button($atts) {
    $atts = shortcode_atts(array(
        'text' => 'Нажми меня',
        'url' => '#',
        'class' => 'wphelper-btn'
    ), $atts, 'wphelper_button');

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

    return "<a href=\"{$url}\" class=\"{$class}\">{$text}</a>";
}
add_shortcode('wphelper_button', 'wphelper_shortcode_button');

Использование: [wphelper_button text="Перейти на wphelper" url="https://wphelper.ru" class="custom-btn"]. Результат — стилизованная кнопка-ссылка.

Вложенные и динамические шорткоды — расширяем функционал

WordPress поддерживает вложенные шорткоды. Это позволяет создавать более сложные конструкции. В функции-обработчике можно использовать функцию do_shortcode(), чтобы обработать вложенный шорткод.

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

function wphelper_shortcode_box($atts, $content = null) {
    $atts = shortcode_atts(array(
        'title' => 'Заголовок'
    ), $atts, 'wphelper_box');

    $title = esc_html($atts['title']);
    $content = do_shortcode($content); // Обрабатываем вложенные шорткоды

    return "<div class=\"wphelper-box\"><h3>{$title}</h3><div class=\"wphelper-box-content\">{$content}</div></div>";
}
add_shortcode('wphelper_box', 'wphelper_shortcode_box');

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

[wphelper_box title="Полезная информация"]
Текст с вложенным шорткодом: [wphelper_greeting name="Анна"]
[/wphelper_box]

Результат — блок с заголовком и приветствием внутри.

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

При создании шорткодов важно помнить о безопасности. Никогда не выводите пользовательские данные без очистки. Используйте функции esc_html, esc_attr, esc_url для фильтрации вывода.

Кроме того, шорткоды должны возвращать содержимое, а не выводить его напрямую через echo. Это важно для корректной работы парсера WordPress и предотвращения ошибок в разметке.

Если шорткод выполняет ресурсоёмкие операции (например, запросы к базе), подумайте о кешировании результата, чтобы не снижать производительность сайта.

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

Для упрощения работы с шорткодами и расширения их функционала существуют плагины:

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

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

Итог: создаём мощные шорткоды для WordPress на wphelper.ru

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

Реальные примеры кода можно легко адаптировать под свои задачи, комбинировать и развивать. Используйте шорткоды, чтобы сделать управление контентом удобным и гибким!