Shortcode — это мощный инструмент WordPress, который позволяет вставлять динамический контент в записи, страницы или виджеты с помощью простых коротких кодов. В этой статье мы подробно разберём, как создать собственный shortcode, как его использовать и оптимизировать под разные задачи. На примерах кода вы увидите, как быстро внедрить функциональность и сделать её удобной для пользователей.
Что такое shortcode в WordPress и зачем он нужен
Shortcode — это своего рода ярлык, который позволяет добавить сложный функционал в текстовую область сайта без необходимости писать длинный код каждый раз. Например, можно вывести галерею, форму обратной связи, таблицу или любую динамическую информацию, используя простой код вроде [my_shortcode].
Преимущества использования shortcode:
- Удобство для контент-менеджеров — не нужно разбираться в программировании;
- Повторное использование кода на разных страницах;
- Лёгкое обновление и кастомизация функционала без изменения контента;
- Возможность передачи параметров для гибкой настройки вывода.
Создание собственных shortcode особенно полезно, если стандартных возможностей WordPress или плагинов недостаточно, или вы хотите сделать уникальный функционал именно для вашего сайта.
Как создать свой shortcode в WordPress: базовый пример
Для создания собственного shortcode необходимо добавить функцию в файл functions.php вашей темы или в отдельный плагин. Разберём самый простой пример — вывод текста с параметром.
function wpsolution_simple_shortcode( $atts ) {
$atts = shortcode_atts( array(
'text' => 'Привет, мир!',
), $atts, 'wpsolution_simple' );
return '<div>' . esc_html( $atts['text'] ) . '</div>';
}
add_shortcode( 'wpsolution_simple', 'wpsolution_simple_shortcode' );В этом примере создаётся shortcode с именем wpsolution_simple. Его можно вставить в пост так:
[wpsolution_simple text="Добро пожаловать на wpsolution.ru!"]
В результате на сайте отобразится блок с текстом Добро пожаловать на wpsolution.ru!. Если параметр text не передан, выведется значение по умолчанию — «Привет, мир!».
Обратите внимание, что для безопасности мы используем функцию esc_html(), чтобы избежать уязвимостей XSS при выводе пользовательских данных.
Разбор кода
Функция shortcode_atts() объединяет значения по умолчанию с теми параметрами, которые передали в shortcode. Это позволяет делать параметры необязательными и задавать стандартные значения.
Функция add_shortcode() регистрирует наш код в системе WordPress, связывая тег wpsolution_simple с пользовательской функцией.
Создание shortcode с выводом динамического контента — пример списка последних записей
Частая задача — вывести список последних публикаций в любом месте сайта с помощью shortcode. Сделаем такой пример с параметрами для настройки количества и категории.
function wpsolution_recent_posts_shortcode( $atts ) {
$atts = shortcode_atts( array(
'count' => 5,
'category' => '',
), $atts, 'wpsolution_recent_posts' );
$args = array(
'posts_per_page' => intval($atts['count']),
'post_status' => 'publish',
);
if ( !empty($atts['category']) ) {
$args['category_name'] = sanitize_text_field($atts['category']);
}
$query = new WP_Query( $args );
if ( !$query->have_posts() ) {
return '<p>Записей не найдено.</p>';
}
$output = '<ul>';
while ( $query->have_posts() ) {
$query->the_post();
$output .= '<li><a href="' . esc_url(get_permalink()) . '">' . esc_html(get_the_title()) . '</a></li>';
}
$output .= '</ul>';
wp_reset_postdata();
return $output;
}
add_shortcode( 'wpsolution_recent_posts', 'wpsolution_recent_posts_shortcode' );Использование в тексте:
[wpsolution_recent_posts count="3" category="novosti"]
Этот код выведет список из 3 последних записей из категории с ярлыком novosti. Если параметр category не указан, выведутся посты из всех категорий.
Пояснения
Мы используем класс WP_Query для выборки постов. В параметрах передаём число записей и категорию. В цикле формируем список ссылок. Не забываем сбрасывать данные запроса функцией wp_reset_postdata(), чтобы не сломать основной цикл WordPress.
Расширение функционала: добавление стилей и скриптов для shortcode
Иногда shortcode требует подключения собственных CSS или JS файлов. Это легко сделать с помощью действий WordPress.
Создадим пример, где shortcode выводит кнопку с анимацией, и подключим для неё стили.
function wpsolution_button_shortcode( $atts ) {
wp_enqueue_style( 'wpsolution-button-style', get_template_directory_uri() . '/css/wpsolution-button.css', array(), '1.0' );
$atts = shortcode_atts( array(
'text' => 'Нажми меня',
'url' => '#',
), $atts, 'wpsolution_button' );
return '<a href="' . esc_url($atts['url']) . '" class="wpsolution-button">' . esc_html($atts['text']) . '</a>';
}
add_shortcode( 'wpsolution_button', 'wpsolution_button_shortcode' );В файле wpsolution-button.css можно определить стили, например:
.wpsolution-button {
display: inline-block;
padding: 10px 20px;
background-color: #0073aa;
color: #fff;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.wpsolution-button:hover {
background-color: #005177;
}Таким образом, при вставке shortcode [wpsolution_button text="Перейти" url="https://wpsolution.ru"] на странице появится красивая кнопка с вашими стилями.
Плагины для работы с shortcode и полезные инструменты
Если вы не хотите писать shortcode вручную, можно использовать плагины, упрощающие процесс:
- Shortcodes Ultimate — набор готовых shortcode с удобным интерфейсом;
- WP Shortcode by MyThemeShop — набор популярных элементов для страниц;
- Custom Content Shortcode — позволяет создавать собственные шорткоды без программирования;
- Shortcoder — плагин для создания и управления пользовательскими шорткодами через админку.
Однако для уникальных задач лучше писать собственные решения, чтобы избежать лишнего кода и нагрузок.
Рекомендации по безопасности и оптимизации shortcode
При создании shortcode важно соблюдать несколько правил:
- Всегда экранируйте вывод с помощью
esc_html(),esc_url()и других функций безопасности; - Не выполняйте опасные операции напрямую, используйте подготовленные запросы и API WordPress;
- Старайтесь минимизировать нагрузку — кешируйте результаты, если запросы к базе тяжелые;
- Регулярно проверяйте совместимость с обновлениями WordPress и используемых плагинов;
- Используйте префиксы (например,
wpsolution_) в названиях функций, чтобы избежать конфликтов.
Выводы и советы для разработчиков
Shortcode — это простой и эффективный способ расширить функциональность сайта на WordPress без вмешательства в шаблоны и темы. Создавая собственные шорткоды, вы получаете гибкие инструменты для вывода информации и повышения удобства администрирования.
Практикуйтесь создавать разные варианты, комбинируйте параметры и подключайте стили и скрипты по необходимости. Это значительно повысит качество и уникальность вашего сайта.