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

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

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

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

Например, стандартный шорткод [gallery] отображает галерею изображений, а вы можете создать свой, например, [wplessons_button], который будет отображать стилизованную кнопку.

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

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

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

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

    return '<a href="' . esc_url($atts['url']) . '" class="wplessons-button">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wplessons_button', 'wplessons_button_shortcode');

Теперь на странице, если написать [wplessons_button text="Перейти" url="https://wplessons.ru"], выведется ссылка-кнопка с нужным текстом и адресом.

Добавление стилей для шорткода

Чтобы кнопка выглядела красиво, добавим CSS. Это можно сделать через подключение стилей в functions.php:

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

В файле css/wplessons-shortcode.css можно прописать:

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

Расширенные возможности шорткодов: атрибуты и вложенный контент

Шорткоды могут принимать атрибуты — параметры, которые задаются в теге и влияют на вывод. В примере выше мы использовали shortcode_atts() для удобной обработки атрибутов с значениями по умолчанию.

Кроме того, шорткод может иметь вложенный контент, например:

[wplessons_box color="red"]Текст внутри блока[/wplessons_box]

Для обработки вложенного контента в callback-функцию нужно добавить второй параметр $content. Рассмотрим пример создания цветного блока:

function wplessons_box_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => 'blue',
    ), $atts, 'wplessons_box');

    return '<div style="border: 2px solid ' . esc_attr($atts['color']) . '; padding: 10px;">' . do_shortcode($content) . '</div>';
}
add_shortcode('wplessons_box', 'wplessons_box_shortcode');

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

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

В редакторе WordPress:

[wplessons_box color="green"]
Это важное сообщение с кнопкой:
[wplessons_button text="Подробнее" url="https://wplessons.ru"]
[/wplessons_box]

Это выведет зеленую рамку с текстом и встроенной кнопкой внутри.

Практические советы по безопасности и производительности шорткодов

При создании шорткодов важно учитывать безопасность. Всегда экранируйте пользовательские данные с помощью функций esc_html(), esc_attr() или esc_url(), чтобы предотвратить XSS-атаки.

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

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

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

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

• Shortcodes Ultimate — набор из более чем 50 готовых шорткодов с удобным интерфейсом.
• WP Shortcode — простой плагин с базовыми шорткодами и возможностью создания собственных.
• Custom Content Shortcode — позволяет создавать шорткоды для вывода произвольного контента и PHP-кода.

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