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

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

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

Почему стоит создавать собственные шорткоды в WordPress

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

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

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

Регистрация собственного шорткода с параметрами: пошаговое руководство

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

Рассмотрим пример создания шорткода [wp_gpt_employee], который выводит информацию о сотруднике, принимая параметры name, position и photo.

1. Добавляем код в файл functions.php вашей темы или в отдельный плагин

function wp_gpt_employee_shortcode($atts) {
    // Задаем значения параметров по умолчанию
    $atts = shortcode_atts(
        array(
            'name' => 'Имя Фамилия',
            'position' => 'Должность',
            'photo' => '',
        ),
        $atts,
        'wp_gpt_employee'
    );

    $photo_html = '';
    if (!empty($atts['photo'])) {
        $photo_url = esc_url($atts['photo']);
        $photo_html = "<img src=\"{$photo_url}\" alt=\"{$atts['name']}\" style=\"max-width:150px;border-radius:50%;\"/>";
    }

    $output = "<div class=\"wp-gpt-employee\" style=\"border:1px solid #ddd;padding:10px;max-width:300px;text-align:center;\">";
    $output .= $photo_html;
    $output .= "<h3 style=\"margin:10px 0 5px 0;\">" . esc_html($atts['name']) . "</h3>";
    $output .= "<p style=\"color:#777;margin:0;\">" . esc_html($atts['position']) . "</p>";
    $output .= "</div>";

    return $output;
}
add_shortcode('wp_gpt_employee', 'wp_gpt_employee_shortcode');

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

Теперь вы можете вставлять в записи или страницы следующий шорткод:

[wp_gpt_employee name="Иван Иванов" position="Разработчик" photo="https://example.com/photo.jpg"]

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

Расширение функционала шорткода: обработка вложенного контента и дополнительных параметров

Иногда нужно, чтобы шорткод не только принимал параметры, но и обрабатывал вложенный контент. Для этого callback-функция должна принимать второй параметр $content, а в вызове add_shortcode это автоматически поддерживается.

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

function wp_gpt_employee_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            'name' => 'Имя Фамилия',
            'position' => 'Должность',
            'photo' => '',
        ),
        $atts,
        'wp_gpt_employee'
    );

    $photo_html = '';
    if (!empty($atts['photo'])) {
        $photo_url = esc_url($atts['photo']);
        $photo_html = "<img src=\"{$photo_url}\" alt=\"{$atts['name']}\" style=\"max-width:150px;border-radius:50%;\"/>";
    }

    $content_html = '';
    if (!is_null($content)) {
        $content_html = "<p style=\"margin-top:10px;color:#555;\">" . wp_kses_post($content) . "</p>";
    }

    $output = "<div class=\"wp-gpt-employee\" style=\"border:1px solid #ddd;padding:10px;max-width:300px;text-align:center;\">";
    $output .= $photo_html;
    $output .= "<h3 style=\"margin:10px 0 5px 0;\">" . esc_html($atts['name']) . "</h3>";
    $output .= "<p style=\"color:#777;margin:0;\">" . esc_html($atts['position']) . "</p>";
    $output .= $content_html;
    $output .= "</div>";

    return $output;
}
add_shortcode('wp_gpt_employee', 'wp_gpt_employee_shortcode');

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

[wp_gpt_employee name="Анна Петрова" position="Менеджер" photo="https://example.com/anna.jpg"]
Отвечает за коммуникацию с клиентами и управление проектами.
[/wp_gpt_employee]

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

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

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

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

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

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

Экранирование данных: обязательно используйте функции esc_html(), esc_url(), wp_kses_post() для очистки пользовательских данных и предотвращения XSS-атак.
Минимизация нагрузки: избегайте тяжелых запросов к базе данных внутри шорткодов, кешируйте результаты при необходимости.
Подключение скриптов и стилей: подключайте CSS и JS только на страницах, где используется шорткод, через хуки wp_enqueue_scripts с проверкой наличия шорткода.

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

function wp_gpt_enqueue_shortcode_scripts() {
    global $post;
    if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'wp_gpt_employee')) {
        wp_enqueue_style('wp-gpt-employee-style', plugin_dir_url(__FILE__) . 'css/employee.css');
    }
}
add_action('wp_enqueue_scripts', 'wp_gpt_enqueue_shortcode_scripts');

Итог

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