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

Автор: Георгий Карпов | Опубликовано: 02.11.2025

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

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

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

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

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

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

Для создания собственного шорткода используется функция add_shortcode(). Она принимает два аргумента: имя шорткода и функцию-обработчик, которая возвращает выводимый контент.

Рассмотрим пример создания шорткода [wpwp_hello], который выводит приветствие:

function wpwp_hello_shortcode() {
    return 'Привет от wpwp.ru!';
}
add_shortcode('wpwp_hello', 'wpwp_hello_shortcode');

Этот код можно добавить в файл functions.php вашей темы или в отдельный плагин. После этого при вставке [wpwp_hello] в запись вы увидите текст «Привет от wpwp.ru!».

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

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

Например, создадим шорткод [wpwp_greeting name="Иван"], который выводит приветствие с именем:

function wpwp_greeting_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'name' => 'Гость',
        ), $atts, 'wpwp_greeting'
    );
    return 'Привет, ' . esc_html($atts['name']) . '! Добро пожаловать на wpwp.ru.';
}
add_shortcode('wpwp_greeting', 'wpwp_greeting_shortcode');

Если параметр name не передан, будет использовано значение по умолчанию «Гость».

Использование шорткодов для вывода сложного HTML и JavaScript

Шорткоды отлично подходят для вставки не только простого текста, но и сложных блоков с HTML, CSS и даже JavaScript. Главное — правильно экранировать вывод и использовать буферизацию вывода, чтобы вернуть весь код как строку.

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

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

    ob_start();
    ?>
    <button style="background-color: <?php echo esc_attr($atts['color']); ?>; color: white; padding: 10px 20px; border: none; cursor: pointer;">
        <?php echo esc_html($atts['text']); ?>
    </button>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var btns = document.querySelectorAll('button');
            btns.forEach(function(btn) {
                btn.addEventListener('click', function() {
                    alert('Кнопка была нажата!');
                });
            });
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wpwp_button', 'wpwp_button_shortcode');

Этот шорткод создаст цветную кнопку с текстом из параметра и выведет alert при клике.

Вложенные шорткоды и их обработка

Иногда нужно использовать один шорткод внутри другого. WordPress поддерживает такую возможность, но для этого внутри обработчика нужно вызвать do_shortcode() для обработки вложенного кода.

Пример шорткода, который оборачивает другой шорткод в дополнительный HTML:

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

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

[wpwp_wrapper][wpwp_hello][/wpwp_wrapper]

Такой код выведет результат шорткода wpwp_hello внутри блока с классом wpwp-wrapper.

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

Чтобы не потерять код при смене темы, лучше создавать шорткоды в виде плагина. Вот минимальный пример плагина wpwp-shortcodes.php:

<?php
/**
 * Plugin Name: WPWP Shortcodes
 * Description: Плагин с несколькими шорткодами для wpwp.ru
 * Version: 1.0
 * Author: wpwp.ru
 */

function wpwp_hello_shortcode() {
    return 'Привет от плагина WPWP!';
}
add_shortcode('wpwp_hello', 'wpwp_hello_shortcode');

// Дополнительные шорткоды здесь

Загрузите этот файл в папку wp-content/plugins/wpwp-shortcodes, активируйте плагин в админке — шорткоды станут доступны.

Выводы и советы по использованию шорткодов на wpwp.ru

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

Используйте имена функций с префиксом wpwp_ чтобы избежать конфликтов с другими плагинами и темами.

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

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