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

Главная > Как создать свой шорткод в WordPress

Автор: Анна Тарасова | Опубликовано: 04.11.2025

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

Что такое шорткод в WordPress

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

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

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

Для начала создадим самый простой шорткод, который будет выводить приветствие. Добавьте следующий код в файл functions.php вашей темы или в свой плагин:

function wpblog_hello_shortcode() {
    return 'Привет, это мой первый шорткод!';
}
add_shortcode('wpblog_hello', 'wpblog_hello_shortcode');

Теперь в любом месте сайта вы можете вставить [wpblog_hello], и WordPress подставит туда текст из функции.

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

Передача параметров в шорткод

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

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

Теперь вы можете использовать шорткод так: [wpblog_greet name="Алексей"] — и получите персональное приветствие.

Использование функции shortcode_atts позволяет задать значения по умолчанию для параметров, а esc_html обеспечивает безопасность вывода.

Шорткод с вложенным HTML и CSS

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

function wpblog_info_box_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array('color' => '#d9edf7'),
        $atts,
        'wpblog_info_box'
    );
    $color = esc_attr($atts['color']);
    $content = wp_kses_post($content);
    return '<div style="background-color:' . $color . '; padding:15px; border-radius:5px;">' . $content . '</div>';
}
add_shortcode('wpblog_info_box', 'wpblog_info_box_shortcode');

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

[wpblog_info_box color="#ffdddd"]Важное уведомление![/wpblog_info_box]

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

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

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

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

Примеры полезных шорткодов для WordPress

Вывод последних записей

Создадим шорткод, который покажет 3 последних поста с ссылками:

function wpblog_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array('count' => 3), $atts, 'wpblog_recent_posts');
    $query = new WP_Query(array(
        'posts_per_page' => intval($atts['count']),
        'post_status' => 'publish'
    ));
    if (!$query->have_posts()) return 'Нет записей.';
    $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('wpblog_recent_posts', 'wpblog_recent_posts_shortcode');

Использование: [wpblog_recent_posts count="5"] выведет 5 последних записей.

Вставка Google карты

Простой шорткод для вставки iframe с картой:

function wpblog_google_map_shortcode($atts) {
    $atts = shortcode_atts(array(
        'src' => '',
        'width' => '600',
        'height' => '450'
    ), $atts, 'wpblog_google_map');
    if (empty($atts['src'])) return 'URL карты не указан.';
    $src = esc_url($atts['src']);
    $width = intval($atts['width']);
    $height = intval($atts['height']);
    return '<iframe src="' . $src . '" width="' . $width . '" height="' . $height . '" style="border:0;" allowfullscreen="" loading="lazy"></iframe>';
}
add_shortcode('wpblog_google_map', 'wpblog_google_map_shortcode');

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

[wpblog_google_map src="https://www.google.com/maps/embed?..." width="800" height="600"]

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

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

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

Однако знание ручного создания шорткодов даёт гибкость и контроль над сайтом.

Вывод

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