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

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

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

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

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

Создание простого шорткода: пошаговая инструкция

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

function wpbox_hello_shortcode() {
    return '<p>Привет, это мой первый шорткод!</p>';
}
add_shortcode('wpbox_hello', 'wpbox_hello_shortcode');

Код нужно добавить в файл functions.php вашей темы или, что лучше, в собственный плагин для сохранения изменений при обновлении темы.

Теперь в любом месте записи можно вставить [wpbox_hello] — и вы увидите приветственное сообщение.

Разбор кода

Функция wpbox_hello_shortcode возвращает строку HTML. Важно именно возвращать результат, а не выводить его напрямую через echo, иначе шорткод работать не будет.

Шорткод с параметрами: создание динамического контента

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

function wpbox_colored_text_shortcode($atts, $content = null) {
    $atts = shortcode_atts( array(
        'color' => 'black',
    ), $atts, 'wpbox_colored_text' );

    return '<span style="color:' . esc_attr($atts['color']) . '">' . esc_html($content) . '</span>';
}
add_shortcode('wpbox_colored_text', 'wpbox_colored_text_shortcode');

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

[wpbox_colored_text color="red"]Красный текст[/wpbox_colored_text]

В результате текст «Красный текст» будет отображён красным цветом.

Подробности реализации

Функция получает массив атрибутов $atts и содержимое между тегами $content. Мы задаём значение по умолчанию для цвета через shortcode_atts. Обратите внимание на функции esc_attr и esc_html для безопасности вывода.

Обработка вложенных и самозакрывающихся шорткодов

WordPress поддерживает два типа шорткодов: с закрывающим тегом и самозакрывающиеся. Мы уже видели пример с закрывающим. Для самозакрывающихся достаточно функции, которая просто возвращает строку.

Если нужно поддерживать вложенность шорткодов — например, шорткод внутри другого — WordPress справляется с этим автоматически, если использовать функцию do_shortcode.

Пример:

function wpbox_wrapper_shortcode($atts, $content = null) {
    return '<div class="wrapper">' . do_shortcode($content) . '</div>';
}
add_shortcode('wpbox_wrapper', 'wpbox_wrapper_shortcode');

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

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

1. Вставка контактной формы

Хотя есть популярные плагины вроде Contact Form 7, иногда нужна простая форма без плагинов. Вот пример шорткода с формой обратной связи:

function wpbox_contact_form_shortcode() {
    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['wpbox_contact_nonce']) && wp_verify_nonce($_POST['wpbox_contact_nonce'], 'wpbox_contact_form')) {
        $name = sanitize_text_field($_POST['name']);
        $email = sanitize_email($_POST['email']);
        $message = sanitize_textarea_field($_POST['message']);

        // Тут можно добавить отправку письма или запись в базу
        $response = '<p>Спасибо, ' . esc_html($name) . ', ваше сообщение отправлено.</p>';
    } else {
        $response = '';
    }

    ob_start();
    echo $response;
    ?>
    <form method="post">
        <p><label>Имя:<input type="text" name="name" required></label></p>
        <p><label>Email:<input type="email" name="email" required></label></p>
        <p><label>Сообщение:<textarea name="message" required></textarea></label></p>
        <input type="hidden" name="wpbox_contact_nonce" value="<?php echo wp_create_nonce('wpbox_contact_form'); ?>">
        <p><input type="submit" value="Отправить"></p>
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('wpbox_contact_form', 'wpbox_contact_form_shortcode');

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

2. Вывод последних записей в шорткоде

Часто нужно показать список последних записей блога. Вот пример шорткода с параметром количества:

function wpbox_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
    ), $atts, 'wpbox_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>';
    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('wpbox_recent_posts', 'wpbox_recent_posts_shortcode');

Пример использования: [wpbox_recent_posts count="3"] — покажет три последние записи.

Заключение

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

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