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

Автор: Николай Ершов | Опубликовано: 02.11.2025

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

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

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

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

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

Удобство повторного использования кода;
Упрощение редактирования контента;
Гибкость и расширяемость функционала;
Минимизация дублирования кода в шаблонах.

Создание простого шорткода: пример на wpinfo

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

function wpinfo_hello_shortcode() {
    return '<p>Привет, это пример собственного шорткода в WordPress!</p>';
}
add_shortcode('wpinfo_hello', 'wpinfo_hello_shortcode');

Добавьте этот код в файл functions.php вашей темы или в отдельный плагин. Теперь в любом посте или странице вы можете использовать шорткод [wpinfo_hello], и он выведет заданное сообщение.

Пояснение к коду

Функция wpinfo_hello_shortcode возвращает строку с HTML. Хук add_shortcode регистрирует шорткод с именем wpinfo_hello, связывая его с функцией обработки.

Шорткод с параметрами: динамический вывод данных

Обычно шорткоды необходимы для вывода контента, который зависит от параметров. Рассмотрим пример шорткода, который выводит кнопку с настраиваемым текстом и URL.

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

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

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

[wpinfo_button text="Перейти на WPinfo" url="https://wpinfo.ru"]

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

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

Чтобы кнопка выглядела красиво, добавим CSS. Вставьте в файл стилей вашей темы или подключите отдельный CSS-файл с таким кодом:

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

Шорткод с логикой: вывод последних записей с настройками

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

function wpinfo_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'count' => 5,
            'category' => ''
        ), $atts, 'wpinfo_recent_posts'
    );

    $args = array(
        'posts_per_page' => intval($atts['count']),
        'post_status' => 'publish'
    );

    if (!empty($atts['category'])) {
        $args['category_name'] = sanitize_text_field($atts['category']);
    }

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

    $output = '<ul class="wpinfo-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('wpinfo_recent_posts', 'wpinfo_recent_posts_shortcode');

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

[wpinfo_recent_posts count="3" category="novosti"]

Этот шорткод выведет 3 последних записи из категории "novosti". Если параметр категории опущен, будут выведены записи из всех категорий.

Оптимизация и безопасность

Обратите внимание, что мы используем функции intval, sanitize_text_field для обработки параметров, а также esc_url и esc_html для вывода, чтобы избежать XSS-уязвимостей.

Расширенные возможности: шорткод с вложенным HTML и скриптами

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

function wpinfo_contact_form_shortcode() {
    ob_start();
    ?>
    <form id="wpinfo-contact-form" method="post" action="">
        <label for="wpinfo-name">Имя:</label>
        <input type="text" id="wpinfo-name" name="wpinfo_name" required>

        <label for="wpinfo-email">Email:</label>
        <input type="email" id="wpinfo-email" name="wpinfo_email" required>

        <label for="wpinfo-message">Сообщение:</label>
        <textarea id="wpinfo-message" name="wpinfo_message" required></textarea>

        <button type="submit" name="wpinfo_submit">Отправить</button>
    </form>
    <script>
        document.getElementById('wpinfo-contact-form').addEventListener('submit', function(e) {
            alert('Форма отправлена!');
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wpinfo_contact_form', 'wpinfo_contact_form_shortcode');

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

Обработка данных формы

Для полноценной работы нужно добавить обработчик данных на стороне PHP, используя хук init или admin_post. Это выходит за рамки базового примера, но такой подход позволяет создавать мощные интерактивные элементы.

Тестирование и отладка шорткодов

После создания шорткода всегда проверяйте, как он работает на сайте. Рекомендуется:

Проверять вывод в различных браузерах;
Использовать инструменты разработчика для проверки ошибок JavaScript;
Тестировать на предмет безопасности и производительности;
Оборачивать чувствительные данные в функции экранирования.

Для отладки можно временно выводить переменные через var_dump или использовать плагины для дебага.

Заключение

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

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