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

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

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

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

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

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

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

function wporder_hello_shortcode($atts) {
    // Обработка атрибутов шорткода с параметрами по умолчанию
    $atts = shortcode_atts(
        array('name' => 'Гость'),
        $atts,
        'hello'
    );
    return 'Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на wporder.ru.';
}
add_shortcode('hello', 'wporder_hello_shortcode');

Этот код создаёт шорткод [hello], который выводит приветствие. Можно указать имя в атрибуте: [hello name="Иван"].

Вывод будет таким: "Привет, Иван! Добро пожаловать на wporder.ru."

Передача атрибутов в шорткод: более сложные примеры

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

function wporder_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#',
            'color' => 'blue'
        ),
        $atts,
        'button'
    );
    $color = in_array($atts['color'], array('blue', 'red', 'green')) ? $atts['color'] : 'blue';
    return '<a href="' . esc_url($atts['url']) . '" class="wporder-btn wporder-btn-' . esc_attr($color) . '">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('button', 'wporder_button_shortcode');

Для правильного отображения кнопок добавим CSS в файл темы или через плагин:

.wporder-btn {
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}
.wporder-btn-blue { background-color: #0073aa; }
.wporder-btn-red { background-color: #d54e21; }
.wporder-btn-green { background-color: #46b450; }

Теперь шорткод [button text="Купить" url="https://wporder.ru/shop" color="red"] выведет красную кнопку с ссылкой на магазин.

Шорткоды с вложенным контентом: использование второго параметра функции

Иногда нужно, чтобы в шорткоде был вложенный контент, который можно обернуть в тег или обработать. Для этого функция шорткода принимает второй параметр — $content.

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

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

[box]Это содержимое в рамке с классом wporder-box[/box]

В данном случае можно дописать CSS для оформления блока:

.wporder-box {
    border: 2px solid #0073aa;
    padding: 15px;
    background-color: #f0f8ff;
    margin: 10px 0;
}

Сложные шорткоды: пример вывода данных из базы

Допустим, нам нужно вывести последние 3 записи определённого типа с кастомным шорткодом. Это часто требуется при разработке сайта на WordPress для динамического контента.

function wporder_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array('count' => 3), $atts, 'recent_posts');
    $query = new WP_Query(array(
        'posts_per_page' => intval($atts['count']),
        'post_status' => 'publish'
    ));
    if (!$query->have_posts()) {
        return '<p>Записей не найдено.</p>';
    }
    $output = '<ul class="wporder-recent-posts">';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    wp_reset_postdata();
    $output .= '</ul>';
    return $output;
}
add_shortcode('recent_posts', 'wporder_recent_posts_shortcode');

Использование: [recent_posts count="5"] выведет список из 5 последних записей с ссылками.

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

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

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

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

Заключение: лучшие практики создания шорткодов для WordPress

Создание собственных шорткодов — мощный инструмент для расширения функционала сайта. Вот основные рекомендации:

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

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