Создать свой шорткод в WordPress: практическое руководство с примерами кода

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

Что такое шорткоды в WordPress и зачем создавать свои

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

Преимущества создания своих шорткодов:

Легко добавлять сложный функционал без повторения кода;
Упрощение редактирования контента для редакторов без технических знаний;
Возможность интеграции с API, внешними сервисами и пользовательскими функциями;
Контроль над тем, как отображается информация на сайте.

В этом руководстве мы рассмотрим, как создать шорткод с параметрами, как обрабатывать атрибуты и возвращать HTML с примерами.

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

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

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

function wp1_hello_shortcode() {
    return '<p>Привет, это мой шорткод!</p>';
}
add_shortcode('wp1_hello', 'wp1_hello_shortcode');

Теперь в редакторе WordPress можно вставить [wp1_hello], и на сайте отобразится абзац с приветствием.

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

Добавление шорткода в файл functions.php или плагин

Рекомендуется добавлять код шорткода либо в файл functions.php активной темы, либо создавать небольшой пользовательский плагин. Это упростит поддержку и переносимость кода.

Работа с атрибутами шорткода: как передавать параметры

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

Пример шорткода с параметром name:

function wp1_greet_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'name' => 'Гость',
        ), $atts, 'wp1_greet'
    );
    return '<p>Привет, ' . esc_html($atts['name']) . '!</p>';
}
add_shortcode('wp1_greet', 'wp1_greet_shortcode');

Теперь в редакторе можно написать [wp1_greet name="Анна"], и выведется «Привет, Анна!».

Функция shortcode_atts() задаёт значения по умолчанию для параметров и объединяет их с переданными пользователем.

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

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

function wp1_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Нажми меня',
            'url' => '#',
            'color' => '#0073aa'
        ), $atts, 'wp1_button'
    );
    $text = esc_html($atts['text']);
    $url = esc_url($atts['url']);
    $color = esc_attr($atts['color']);
    return '<a href="' . $url . '" style="display:inline-block;padding:10px 20px;background-color:' . $color . ';color:#fff;text-decoration:none;border-radius:3px;">' . $text . '</a>';
}
add_shortcode('wp1_button', 'wp1_button_shortcode');

Пример использования: [wp1_button text="Скачать" url="https://wp-1.ru/download" color="#e74c3c"]

Как использовать шорткоды в шаблонах PHP

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

echo do_shortcode('[wp1_greet name="Мария"]');

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

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

1. Шорткод для вывода текущей даты и времени

function wp1_current_datetime_shortcode() {
    return '<time>' . date_i18n('d.m.Y H:i') . '</time>';
}
add_shortcode('wp1_datetime', 'wp1_current_datetime_shortcode');

Использование: [wp1_datetime] — покажет дату и время по настройкам сайта.

2. Шорткод для вывода последних 5 записей определённой категории

function wp1_latest_posts_shortcode($atts) {
    $atts = shortcode_atts(array('cat' => '', 'count' => 5), $atts, 'wp1_latest_posts');
    $args = array(
        'posts_per_page' => intval($atts['count']),
        'category_name' => sanitize_text_field($atts['cat'])
    );
    $posts = get_posts($args);
    if (empty($posts)) return '<p>Нет записей.</p>';
    $output = '<ul>';
    foreach ($posts as $post) {
        $output .= '<li><a href="' . get_permalink($post) . '">' . esc_html(get_the_title($post)) . '</a></li>';
    }
    $output .= '</ul>';
    return $output;
}
add_shortcode('wp1_latest_posts', 'wp1_latest_posts_shortcode');

Использование: [wp1_latest_posts cat="novosti" count="3"].

3. Шорткод для вставки YouTube видео по ID

function wp1_youtube_shortcode($atts) {
    $atts = shortcode_atts(array('id' => ''), $atts, 'wp1_youtube');
    if (empty($atts['id'])) return '<p>ID видео не указан.</p>';
    $id = esc_attr($atts['id']);
    return '<iframe width="560" height="315" src="https://www.youtube.com/embed/' . $id . '" frameborder="0" allowfullscreen></iframe>';
}
add_shortcode('wp1_youtube', 'wp1_youtube_shortcode');

Использование: [wp1_youtube id="dQw4w9WgXcQ"].

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

При работе с пользовательскими параметрами всегда используйте функции экранирования и фильтрации, такие как esc_html(), esc_attr(), esc_url(), чтобы исключить XSS-уязвимости.

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

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

Если создавать шорткоды вручную не хочется, есть плагины, которые помогут:

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

Но ручное создание шорткодов даёт максимальную гибкость и понимание того, что именно происходит на сайте.