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

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

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

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

• Упростить добавление повторяющихся элементов на сайт.
• Сделать контент гибким и легко редактируемым.
• Избежать дублирования кода.

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

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

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

Создаем простейший шорткод

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

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

В этом коде мы создали функцию wpcom_hello_shortcode, которая принимает атрибуты шорткода и возвращает строку приветствия. Если атрибут name не задан, используется значение по умолчанию — «Гость».

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

[wpcom_hello name="Иван"]

На странице выведется: Привет, Иван! Добро пожаловать на wpcom.ru!

Работа с атрибутами шорткода

Атрибуты позволяют сделать шорткод динамическим и настраиваемым. В функции создается массив с параметрами по умолчанию, который затем объединяется с реальными атрибутами, переданными в шорткод.

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

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

function wpcom_button_shortcode($atts) {
  $atts = shortcode_atts(array(
    'text' => 'Нажми меня',
    'url' => '#',
    'color' => 'blue'
  ), $atts);
  $text = esc_html($atts['text']);
  $url = esc_url($atts['url']);
  $color = esc_attr($atts['color']);
  return '<a href="' . $url . '" class="wpcom-btn wpcom-btn-' . $color . '">' . $text . '</a>';
}
add_shortcode('wpcom_button', 'wpcom_button_shortcode');

Используйте в записи так:

[wpcom_button text="Перейти" url="https://wpcom.ru" color="red"]

Не забудьте добавить стили для классов wpcom-btn и wpcom-btn-red в файл стилей темы.

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

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

• Входные данные всегда экранируйте — для текста используйте esc_html, для URL — esc_url, для атрибутов HTML — esc_attr.
• Не выводите пользовательский ввод без проверки.
• Избегайте выполнения тяжелых операций внутри шорткода — это может замедлить загрузку страниц.

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

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

Допустим, нужно вывести последние 3 записи из определенной категории. Вот пример шорткода с WP_Query:

function wpcom_recent_posts_shortcode($atts) {
  $atts = shortcode_atts(array(
    'category' => '',
    'posts' => 3
  ), $atts);

  $args = array(
    'posts_per_page' => intval($atts['posts']),
    'category_name' => sanitize_text_field($atts['category'])
  );

  $query = new WP_Query($args);
  if (!$query->have_posts()) {
    return '<p>Записей не найдено.</p>';
  }

  $output = '<ul class="wpcom-recent-posts">';
  while ($query->have_posts()) {
    $query->the_post();
    $title = get_the_title();
    $permalink = get_permalink();
    $output .= '<li><a href="' . esc_url($permalink) . '">' . esc_html($title) . '</a></li>';
  }
  $output .= '</ul>';
  wp_reset_postdata();
  return $output;
}
add_shortcode('wpcom_recent_posts', 'wpcom_recent_posts_shortcode');

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

[wpcom_recent_posts category="novosti" posts="5"]

Так вы выведете список из 5 последних записей категории «новости».

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

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

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

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

Заключение

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