WordPress: как создать шорткод с атрибутами и выводом данных

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

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

Шорткод — это сокращённый код в квадратных скобках, который WordPress преобразует в какой-то функционал или вывод. Например, [gallery] — стандартный шорткод для вывода галереи. Если же нам нужен свой функционал с параметрами, например, [wpcodex_info type="contact"], то шорткод должен уметь принимать и обрабатывать эти параметры — это и есть атрибуты.

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

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

Для начала создадим базовый шорткод в functions.php темы или в отдельном плагине. Используем функцию add_shortcode и описываем функцию обратного вызова, которая принимает атрибуты.

function wpcodex_shortcode_info($atts) {
    // Задаём значения по умолчанию
    $atts = shortcode_atts(
        array(
            'type' => 'default',
        ), $atts, 'wpcodex_info'
    );

    // Обработка атрибута type
    if ($atts['type'] === 'contact') {
        return '<div>Контактная информация: Телефон +7 999 123-45-67</div>';
    } elseif ($atts['type'] === 'address') {
        return '<div>Адрес: Москва, ул. Примерная, д. 1</div>';
    } else {
        return '<div>Информация отсутствует</div>';
    }
}
add_shortcode('wpcodex_info', 'wpcodex_shortcode_info');

В итоге, вставляя в содержимое [wpcodex_info type="contact"], вы получите вывод с контактной информацией. Если параметр не указан или другой — выводится сообщение об отсутствии информации.

Расширяем функциональность: вывод данных из пользовательского типа записи

Практически полезно, когда нужно динамически выводить данные из базы — например, информацию из кастомного типа записи «Отзывы» или «Товары». Создадим шорткод, который выведет последние 3 записи с определённым таксономическим фильтром.

Пример: вывод последних отзывов с атрибутом категории

Предположим, у вас есть CPT review с таксономией review_category. Напишем шорткод с атрибутом category, который вытаскивает последние 3 отзыва из этой категории.

function wpcodex_shortcode_latest_reviews($atts) {
    $atts = shortcode_atts(
        array('category' => ''), $atts, 'wpcodex_latest_reviews'
    );

    $args = array(
        'post_type' => 'review',
        'posts_per_page' => 3,
    );

    if (!empty($atts['category'])) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'review_category',
                'field' => 'slug',
                'terms' => sanitize_title($atts['category']),
            ),
        );
    }

    $query = new WP_Query($args);

    if (!$query->have_posts()) {
        return '<p>Отзывы не найдены</p>';
    }

    $output = '<ul class="wpcodex-reviews-list">';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<li><strong>' . get_the_title() . '</strong>: ' . get_the_excerpt() . '</li>';
    }
    wp_reset_postdata();

    $output .= '</ul>';
    return $output;
}
add_shortcode('wpcodex_latest_reviews', 'wpcodex_shortcode_latest_reviews');

Используйте шорткод [wpcodex_latest_reviews category="positive"], чтобы вывести последние 3 отзыва из категории «positive».

Как добавить вложенный контент в шорткод (контент внутри шорткода)

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

[wpcodex_box]Текст внутри шорткода[/wpcodex_box]

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

function wpcodex_shortcode_box($atts, $content = null) {
    // Очищаем контент от лишних пробелов и тегов
    $content = trim(do_shortcode($content));

    return '<div style="border:1px solid #ccc; padding:10px; background:#f9f9f9;">' . $content . '</div>';
}
add_shortcode('wpcodex_box', 'wpcodex_shortcode_box');

Теперь, вставив в редактор [wpcodex_box]Важно: используйте безопасный контент![/wpcodex_box], вы получите обёрнутый в рамку текст.

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

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

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

Пример безопасного вывода с экранированием

return '<div>' . esc_html($user_input) . '</div>';

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

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

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

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

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

Итог

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