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

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

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

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

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

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

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

Для создания шорткода в WordPress используется функция add_shortcode(). В качестве примера создадим простой шорткод, который выводит кнопку с настраиваемым текстом.

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

    return '<a href="' . esc_url($atts['url']) . '" style="display:inline-block;padding:10px 20px;background-color:' . esc_attr($atts['color']) . ';color:#fff;text-decoration:none;border-radius:4px;">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('wpskill_button', 'wpskill_button_shortcode');

Объяснение кода:

• Функция wpskill_button_shortcode принимает атрибуты шорткода и задает значения по умолчанию.
• Далее возвращается HTML-код кнопки с применением атрибутов.
• Функция add_shortcode регистрирует шорткод [wpskill_button] и связывает его с нашей функцией.

Теперь в любом посте сайта можно написать [wpskill_button text="Перейти" url="https://wpskill.ru" color="green"] — и появится зеленая кнопка с текстом «Перейти».

Передача параметров и их обработка

Шорткоды становятся особенно полезными, когда они умеют принимать параметры. В примере выше мы уже использовали атрибуты, но можно сделать и более сложную логику.

Например, шорткод для вывода контактной информации с параметрами:

function wpskill_contact_info_shortcode($atts) {
    $atts = shortcode_atts(array(
        'phone' => '+7 999 999 99 99',
        'email' => 'info@wpskill.ru',
    ), $atts, 'wpskill_contact');

    $output = '<div class="wpskill-contact">';
    $output .= '<p><strong>Телефон:</strong> ' . esc_html($atts['phone']) . '</p>';
    $output .= '<p><strong>Email:</strong> <a href="mailto:' . esc_attr($atts['email']) . '">' . esc_html($atts['email']) . '</a></p>';
    $output .= '</div>';

    return $output;
}
add_shortcode('wpskill_contact', 'wpskill_contact_info_shortcode');

Такой шорткод можно вставить так: [wpskill_contact phone="+7 123 456 78 90" email="contact@example.com"], и он выведет заданные данные.

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

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

function wpskill_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'category' => '',
        'posts' => 5
    ), $atts, 'wpskill_recent_posts');

    $args = array(
        'posts_per_page' => intval($atts['posts']),
        'category_name' => sanitize_text_field($atts['category'])
    );

    $query = new WP_Query($args);
    if (!$query->have_posts()) {
        return '<p>Нет записей для отображения.</p>';
    }

    $output = '<ul class="wpskill-recent-posts">';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<li><a href="' . esc_url(get_permalink()) . '">' . esc_html(get_the_title()) . '</a></li>';
    }
    $output .= '</ul>';

    wp_reset_postdata();
    return $output;
}
add_shortcode('wpskill_recent_posts', 'wpskill_recent_posts_shortcode');

Использование: [wpskill_recent_posts category="novosti" posts="3"] — выводит 3 последние записи из категории «новости».

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

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

• Shortcodes Ultimate — универсальный набор шорткодов для создания кнопок, вкладок, галерей и прочего.
• WP Shortcode by MyThemeShop — простой и легкий плагин с базовыми шорткодами.
• Shortcoder — позволяет создавать собственные шорткоды с любым HTML, JavaScript и PHP.

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

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

При создании шорткодов важно помнить:

• Используйте функции безопасного вывода esc_html(), esc_attr(), esc_url() — чтобы избежать XSS-уязвимостей.
• Старайтесь не выполнять тяжелые запросы в шорткодах без необходимости, чтобы не замедлять загрузку страниц.
• Используйте wp_cache или transient API для кеширования результатов, если данные сложные и редко меняются.
• Делайте шорткоды совместимыми с редактором Gutenberg, чтобы их удобно было вставлять и редактировать.

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