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

Автор: Нина Боброва | Опубликовано: 09.11.2025

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

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

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

В этой статье мы подробно разберем, как создавать и настраивать собственные шорткоды, чтобы эффективно использовать их в своих проектах на WordPress.

Основы создания шорткода в WordPress

Чтобы создать шорткод, нужно зарегистрировать функцию с помощью хука add_shortcode. Эта функция принимает два аргумента: имя шорткода и callback-функцию, которая формирует вывод.

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

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

Чтобы использовать этот шорткод, нужно добавить в редактор записи или страницы [wpcontrol_hello]. При выводе на сайте посетители увидят текст из функции.

Важно возвращать результат, а не выводить его напрямую — так обеспечивается корректная работа с контентом.

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

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

Рассмотрим пример шорткода, который выводит текст с указанным цветом:

function wpcontrol_color_text_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'color' => 'black'
    ), $atts, 'wpcontrol_color_text');
    return '<span style="color:' . esc_attr($atts['color']) . '">' . esc_html($content) . '</span>';
}
add_shortcode('wpcontrol_color_text', 'wpcontrol_color_text_shortcode');

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

[wpcontrol_color_text color="red"]Этот текст будет красным[/wpcontrol_color_text]

Такой подход позволяет легко менять поведение шорткода без правки кода.

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

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

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

function wpcontrol_recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
        'post_type' => 'post'
    ), $atts, 'wpcontrol_recent_posts');

    $query = new WP_Query(array(
        'posts_per_page' => intval($atts['count']),
        'post_type' => sanitize_text_field($atts['post_type'])
    ));

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

    $output = '<ul class="wpcontrol-recent-posts">';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a> <small>' . get_the_date() . '</small></li>';
    }
    $output .= '</ul>';

    wp_reset_postdata();
    return $output;
}
add_shortcode('wpcontrol_recent_posts', 'wpcontrol_recent_posts_shortcode');

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

[wpcontrol_recent_posts count="3" post_type="post"]

Этот шорткод выведет три последние записи блога.

Шорткод для вставки Google Maps с настраиваемыми координатами

Иногда нужно быстро вставить карту с определённым местоположением. Создадим шорткод с параметрами широты и долготы.

function wpcontrol_google_map_shortcode($atts) {
    $atts = shortcode_atts(array(
        'lat' => '55.751244',
        'lng' => '37.618423',
        'zoom' => 14,
        'width' => '100%',
        'height' => '400px'
    ), $atts, 'wpcontrol_google_map');

    $map_id = 'wpcontrol-map-' . uniqid();

    $output = '<div id="' . esc_attr($map_id) . '" style="width:' . esc_attr($atts['width']) . '; height:' . esc_attr($atts['height']) . ';"></div>';
    $output .= '<script>
    function initMap' . $map_id . '() {
        var location = {lat: ' . floatval($atts['lat']) . ', lng: ' . floatval($atts['lng']) . '};
        var map = new google.maps.Map(document.getElementById("' . $map_id . '"), {
            zoom: ' . intval($atts['zoom']) . ',
            center: location
        });
        var marker = new google.maps.Marker({position: location, map: map});
    }
    </script>';
    $output .= '<script async defer src="https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ&callback=initMap' . $map_id . '"></script>';

    return $output;
}
add_shortcode('wpcontrol_google_map', 'wpcontrol_google_map_shortcode');

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

[wpcontrol_google_map lat="59.9386" lng="30.3141" zoom="12" width="600px" height="400px"]

Не забудьте заменить ВАШ_API_КЛЮЧ на ваш ключ Google Maps API.

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

При создании шорткодов важно учитывать безопасность и оптимизацию:

Всегда фильтруйте и экранируйте входящие данные — используйте функции esc_attr(), esc_html(), sanitize_text_field().
Возвращайте данные, а не выводите их напрямую — это улучшает совместимость с редакторами и кешированием.
Избегайте тяжелых запросов и операций внутри шорткода, чтобы не замедлять загрузку страниц.
Кешируйте результат, если шорткод генерирует сложный или динамический контент.

Следуя этим простым правилам, вы защитите сайт от уязвимостей и обеспечите комфорт для пользователей.