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

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

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

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

• Вставлять сложные элементы без HTML и PHP в редакторе.
• Повторно использовать блоки кода или функционала.
• Упрощать жизнь контент-менеджеру и разработчику.

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

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

Для создания своего шорткода нужно зарегистрировать его в WordPress с помощью функции add_shortcode(). Вот простой пример:

function wptests_custom_shortcode() {
    return '<strong>Привет! Это мой шорткод!</strong>';
}
add_shortcode('wptests_hello', 'wptests_custom_shortcode');

Здесь мы создали шорткод [wptests_hello], который выведет жирный текст. Этот код можно добавить в файл functions.php вашей темы или в собственный плагин.

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

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

Шорткоды могут принимать параметры, чтобы сделать их универсальными. Рассмотрим пример с параметром color, который задаёт цвет текста:

function wptests_colored_text_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array('color' => 'red'), // Значение по умолчанию
        $atts,
        'wptests_colored_text'
    );
    return '<span style="color: ' . esc_attr($atts['color']) . ';">' . do_shortcode($content) . '</span>';
}
add_shortcode('wptests_colored_text', 'wptests_colored_text_shortcode');

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

[wptests_colored_text color="blue"]Этот текст будет синим[/wptests_colored_text]

Этот шорткод оборачивает содержимое в <span> с указанным цветом. Если параметр не передан, цвет будет красным.

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

Очень популярный вариант — вывод списка последних постов. Сделаем шорткод, который принимает параметр count — количество выводимых записей:

function wptests_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5
    ), $atts, 'wptests_latest_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('wptests_latest_posts', 'wptests_latest_posts_shortcode');

Используйте так:
[wptests_latest_posts count="3"]

Выводится список из трёх последних записей с ссылками.

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

Если ваш шорткод выводит контент, который может содержать другие шорткоды, используйте do_shortcode() внутри функции, как в примере с цветным текстом.

Также важно экранировать входящие данные и вывод с помощью функций esc_html(), esc_attr() и подобных, чтобы предотвратить XSS-атаки.

Расширение: создание шорткода с формой обратной связи

Давайте создадим простой шорткод, который выводит форму обратной связи с полями «Имя» и «Сообщение» и обрабатывает отправку через AJAX.

Шаг 1: регистрация шорткода и вывод формы

function wptests_contact_form_shortcode() {
    ob_start();
    ?>
    <form id="wptests-contact-form" method="post">
        <p>
            <label for="wptests-name">Имя:</label><br>
            <input type="text" id="wptests-name" name="wptests_name" required>
        </p>
        <p>
            <label for="wptests-message">Сообщение:</label><br>
            <textarea id="wptests-message" name="wptests_message" required></textarea>
        </p>
        <p><button type="submit">Отправить</button></p>
        <p id="wptests-response"></p>
    </form>
    <script>
    jQuery(document).ready(function($) {
        $('#wptests-contact-form').on('submit', function(e) {
            e.preventDefault();
            var data = {
                action: 'wptests_send_contact_form',
                name: $('#wptests-name').val(),
                message: $('#wptests-message').val(),
                security: wptests_vars.nonce
            };
            $.post(wptests_vars.ajax_url, data, function(response) {
                $('#wptests-response').text(response.data);
            });
        });
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wptests_contact_form', 'wptests_contact_form_shortcode');

Шаг 2: подключение AJAX в functions.php

function wptests_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_localize_script('jquery', 'wptests_vars', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wptests_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wptests_enqueue_scripts');

Шаг 3: обработчик AJAX

function wptests_handle_contact_form() {
    check_ajax_referer('wptests_nonce', 'security');

    $name = sanitize_text_field($_POST['name']);
    $message = sanitize_textarea_field($_POST['message']);

    if (empty($name) || empty($message)) {
        wp_send_json_error('Пожалуйста, заполните все поля.');
    }

    // Здесь можно отправить письмо или сохранить в базу

    wp_send_json_success('Спасибо, ваше сообщение отправлено!');
}
add_action('wp_ajax_wptests_send_contact_form', 'wptests_handle_contact_form');
add_action('wp_ajax_nopriv_wptests_send_contact_form', 'wptests_handle_contact_form');

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

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

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

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

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

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

• Используйте префиксы в названиях функций и шорткодов, например, wptests_, чтобы избежать конфликтов.
• Всегда экранируйте данные для безопасности.
• Обрабатывайте параметры через shortcode_atts() для удобства и гибкости.
• Используйте do_shortcode() для вложенных шорткодов.
• По возможности, выносите код в отдельный плагин, чтобы не потерять при смене темы.

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