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

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

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

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

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

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

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

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

Пример простой регистрации шорткода с префиксом wptips_ для уникальности:

function wptips_show_current_date() {
    return date('d.m.Y');
}
add_shortcode('wptips_date', 'wptips_show_current_date');

Теперь, вставив в редактор [wptips_date], вы увидите текущую дату в формате день.месяц.год.

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

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

Шорткоды поддерживают атрибуты, которые позволяют настраивать поведение. В функции-обработчике их можно получить через параметр $atts, который обычно обрабатывается с помощью shortcode_atts().

function wptips_button_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            'url' => '#',
            'color' => 'blue',
        ), $atts, 'wptips_button'
    );
    return '<a href="'.esc_url($atts['url']).'" style="background-color: '.esc_attr($atts['color']).'; padding: 10px 15px; color: #fff; text-decoration: none;">' . do_shortcode($content) . '</a>';
}
add_shortcode('wptips_button', 'wptips_button_shortcode');

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

[wptips_button url="https://wptips.ru" color="red"]Посетить WP Tips[/wptips_button]

В результате вы получите красную кнопку с ссылкой на сайт.

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

1. Шорткод вывода последних записей

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

function wptips_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(array('count' => 5), $atts, 'wptips_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('wptips_latest_posts', 'wptips_latest_posts_shortcode');

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

2. Шорткод для вставки Google карты с настройками

Можно сделать шорткод, который вставляет карту с заданными координатами и масштабом.

function wptips_google_map_shortcode($atts) {
    $atts = shortcode_atts(array(
        'lat' => '55.7558',
        'lng' => '37.6173',
        'zoom' => 10,
        'width' => '100%',
        'height' => '400px'
    ), $atts, 'wptips_map');

    $iframe = '<iframe src="https://www.google.com/maps?q='.esc_attr($atts['lat']).','.esc_attr($atts['lng']).'&z='.intval($atts['zoom']).'&output=embed" width="'.esc_attr($atts['width']).'" height="'.esc_attr($atts['height']).'" style="border:0;" allowfullscreen="" loading="lazy"></iframe>';

    return $iframe;
}
add_shortcode('wptips_map', 'wptips_google_map_shortcode');

Пример вызова: [wptips_map lat="59.9391" lng="30.3158" zoom="12" width="600px" height="450px"]

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

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

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

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

Как добавить шорткод в шаблон темы

Иногда нужно вывести шорткод прямо в PHP-файле темы, например, в single.php. Для этого используйте функцию do_shortcode():

echo do_shortcode('[wptips_latest_posts count="4"]');

Так вы сможете гибко управлять выводом контента и интегрировать шорткоды в любые части сайта.