Главная » Общая информация

Шорткоды в WordPress: что это такое, как создать, добавить в шаблон и удалить

Общая информация
Автор На чтение 18 мин Опубликовано Обновлено

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

Что из себя представляют шорткоды на сайтах WordPress

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

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

А если не разбираетесь в кодинге, то можете воспользоваться встроенными в WordPress короткими кодами, которые предоставляют всевозможные плагины.

Использование shortcode в WordPress дает следующие преимущества:
Простота и удобство пользования. Короткие коды существуют давно и многие владельцы сайтов WordPress к ним привыкли. Даже переход на редактор Gutenberg не заставил юзеров отказаться от них. Все это благодаря тому, что короткие коды просты в освоении, и ими удобно пользоваться.
Гибкие настройки с помощью атрибутов. Как правило, функционал, за который отвечает тот или иной shortcode, можно настраивать под конкретную задачу. Для этого служат атрибуты, через которые передаются различные параметры.
Снижение затрат на разработку. Вы можете сэкономить время и бюджет на сложный кодинг благодаря удобным shortcodes. Вам не потребуется каждый раз, когда нужно вставить, например, слайдер или галерею, вручную добавлять сложный код или платить программисту.
У коротких кодов также есть несколько недостатков:
Если плагин WordPress, который предоставляет shortcode, давно не поддерживается, после очередного обновления ядра WP или серверного софта часть функционала может перестать работать.
Шорткоды могут не работать с некоторыми модулями или шаблонами WordPress.

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

Какие встроенные шорткоды содержит движок WordPress

В ВордПрессе есть несколько коротких кодов, с помощью которых вы можете в любом посте блога вывести картинку, звуковой файл или ролик с какого-нибудь видеохостинга, например, YouTube.

Приведу популярные варианты:

  • Для отображения галереи или отдельной картинки служит код galery. Атрибут ids позволяет указать через запятую id конкретных фото, которые должны быть включены в галерею. Пример: .
  • Звуковые файлы выводят с помощью кода audio. Шорткод показывает плеер с аудиофайлом, ссылка на который передается в атрибуте src. Пример: .
  • Видео можно вывести одним из двух способов. Если файл лежит на хостинге в одной папке с вашим сайтом, используйте код video. К нему нужно добавить атрибут src со ссылкой на видеофайл. Пример:
    . Если требуется вставить ролик с видеохостинга, используйте код embed. В качестве атрибутов укажите ширину и высоту плеера. Пример: URL. При этом URL — адрес, где находится ролик.

Рекомендую: Лучшие плагины для работы с видео на WordPress

  • Стандартный короткий код caption позволяет показать подпись рядом с изображением. Пример: <img src="https://site.ru/image.jpg" alt="Моя картинка" />Текст подписи

Как правильно оформлять шорткоды WordPress

По синтаксическим правилам эти коды напоминают язык HTML. Только вместо треугольных скобок нужно использовать квадратные. Примеры синтаксиса:

[example]
[example /]
[example]Контент[/example]

Приведу небольшую инструкцию для оформления шорткодов и их отдельных частей:

Имя не должно включать такие элементы, как пробел, tab, переход на новую строку, квадратные и треугольные скобки ([,],<,>), амперсант (&), слеш (/), двойные и одинарные кавычки и непечатные символы.

Атрибуты не являются обязательными для указания. Каждый атрибут должен быть отделен от имени shortcode и других параметров пробелами. Бывают атрибуты со значениями и без них. Имя параметра может включать цифры, латинские буквы в верхнем и нижнем регистре, знак подчеркивания или дефис. Значение атрибута должно быть заключено в одинарные или двойные кавычки.

Если хотите просто упомянуть в тексте какой-либо из зарегистрированных коротких кодов, используйте экранирование. Для этого поместите shortcode в двойные квадратные скобки. Пример: [[example]]. В этом случае WordPress воспримет и отобразит shortcode как простой текст и не станет выводить функционал, который ему соответствует.

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

Как программно создать шорткод в ВордПресс

Движок WP включает API, позволяющий всем желающим создавать custom shortcodes. Чтобы сделать простой шорткод без плагина, добавьте в файл functions.php небольшой код:

add_shortcode( 'mytest', 'mytest_shortcode' );
function mytest_shortcode( $atts ) {
return 'Пример шорткода';
}

Теперь если вы добавите шорткод [mytest] в новый пост, после публикации вместо него появится текст «Пример шорткода».

Чтобы добавить атрибуты, используйте функцию shortcode_atts():

add_shortcode( 'mytest', 'mytest_shortcode' );
function mytest_shortcode( $atts ) {
$atts = shortcode_atts( [
'num' => '1',
], $atts);
return "Пример шорткода {$atts['num']}";
}

После этого шорткод [mytest] будет выводить строку «Пример шорткода 1».

Приведу несколько примеров, чтобы проиллюстрировать возможность создания своих shortcode в WordPress.

Отображение текущего года

Если по всему сайту замените даты выхода статей шорткодом [current-year], все ваши материалы всегда будут сохранять актуальность. Вставьте в functions.php следующие строки:

add_shortcode( 'current-year', 'my_current_year' );
function my_current_year( $atts ) {
$atts = shortcode_atts( array(
'year'=> date('Y'),
), $atts );
$html = '' . $atts['year'] . '';
return $html;
}

Вывод кастомной кнопки

В конец файла functions.php вставьте следующий php-код:

function button_shortcode($atts) {
$atts = shortcode_atts(
array(
'url' => '#',
'text' => 'Нажми меня',
), $atts, 'button'
);
return '<a href="' . esc_url($atts['url']) . '">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('button', 'button_shortcode');

После этого в CSS-файл шаблона добавьте такие строки:

.my-button {
display: inline-block;
padding: 10px 20px;
background-color: #0073aa;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
}
.my-button:hover {
background-color: #005177;
}

Теперь можете использовать запись [button url="ваша_ссылка" text="Текст кнопки"] для показа вашей кнопки.

Ссылка для подписки на RSS

Следующий код создаст shortcode для вывода ссылки, перейдя по которой посетители сайта смогут подписаться на ваш RSS-канал:

function rss_subscription_shortcode($atts) {
// Установите атрибуты по умолчанию
$atts = shortcode_atts(
array(
'url' => '', // URL RSS ленты
'text' => 'Подписаться на RSS', // Текст ссылки
), $atts, 'rss_subscription'
);
// Проверка, задан ли URL
if (empty($atts['url'])) {
return 'Пожалуйста, укажите URL RSS ленты.';
}
// Возвращает HTML-код для ссылки на подписку
return '<a href="' . esc_url($atts['url']) . '">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('rss_subscription', 'rss_subscription_shortcode');

Нужно вставить этот php-код в файл functions.php вашего шаблона. После этого вы сможете использовать в своих постах shortcode вида: [rss_subscription url="ваша_ссылка" text="Подписаться на RSS"].

Вставьте в CSS-файл темы следующие строки, чтобы превратить ссылку на RSS в красивую кнопку:

.rss-subscription-button {
display: inline-block;
padding: 10px 20px;
background-color: #0073aa;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.rss-subscription-button:hover {
background-color: #005177;
}

Как добавить shortcode в запись или на страницу WordPress

Если вы пользуетесь классическим редактором, вставка шорткода не составит проблем. В Гутенберг и Elementor добавить shortcode немного сложнее.

Разберем все случаи.

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

Вставка шорткода в классическом редакторе

  • В редакторе Гутенберг. Вставка короткого code производится через специальный блок, который называется «Шорткод». Найдите этот блок в списке виджетов Гутенберга, откройте его и введите в диалоговом окне ваш shortcode.

Шорткоды в гутенберге

  • В Elementor. На панели элементов найдите «Шорткод», перетащите его в область контента. Затем в специальное поле в правом сайдбаре введите shortcode в квадратных скобках.

Шорткод в Elementor

Как сделать кастомную кнопку для шорткода в TinyMCE

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

Разберем, как это делается, на примере шорткода для вывода текущего года, который мы рассматривали ранее.

В файл function.php вашего шаблона добавьте php-код, который отвечает за срабатывание функции при нажатии на кнопку:

function my_custom_tinymce_button($buttons) {
array_push($buttons, 'current_year'); // Добавляем идентификатор кнопки
return $buttons;
}
function my_custom_tinymce_plugin($plugin_array) {
$plugin_array['current_year'] = get_template_directory_uri() . '/current-year-button.js'; // Путь к вашему JS файлу
return $plugin_array;
}
function my_custom_tinymce_setup() {
add_filter('mce_buttons', 'my_custom_tinymce_button');
add_filter('mce_external_plugins', 'my_custom_tinymce_plugin');
}
add_action('admin_init', 'my_custom_tinymce_setup');

Создайте файл current-year-button.js с содержимым:

(function() {
tinymce.PluginManager.add('current_year', function( editor, url ) {
editor.addButton('current_year', { // current_year - идентификатор кнопки
text: 'Вставить год', // текст кнопки
icon: false,
onclick: function() {
editor.insertContent('[current-year]');
}
});
});
})();

Поместите этот JS-файл в папку вашей темы.

Добавление шорткода в разные области темы

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

Расскажу, как это исправить для наиболее распространенных случаев:

  • Для виджетов. Добавляем в нужную область, например, в сайдбар, блок под названием «Текст». В него вставляем наш шорткод. WordPress не всегда корректно обрабатывает shortcode в виджетах. Поэтому, если не сработало, в файл темы functions.php нужно добавить php-код:

add_filter( 'widget_text', 'do_shortcode' );

  • Для хедера или футера. Отыщите в папке шаблона файл header.php или footer.php. В этих файлах там, где нужно вывести функционал, вставьте следующий php-код (замените [current-year] на ваш шорткод):

<?php echo do_shortcode('[current-year]'); ?>

  • Для описаний категорий. Вы сможете смело добавлять shortcode в описания рубрик, если включите в файл functions.php следующий код:

add_filter( 'term_description', 'shortcode_unautop');
add_filter( 'term_description', 'do_shortcode' );

  • С помощью плагина Shortcode Widget или другого подходящего из репозитория WordPress. Этот бесплатный плагин добавляет специальный виджет, в который можно вставлять shortcod-ы.

Шаблон Reboot от WPShop с удобными шорткодами


Тема Reboot с шорткодами

Премиальная тема Reboot от команды российских разработчиков WPShop содержит ряд встроенных коротких кодов:

Содержание шорткодом

Карта сайта шорткодом

  • Встроенная форма контактов. Для ее вывода предназначен короткий код
    .

форма обратной связи

  • Ссылки на соцсети. Вывести блок ссылок на аккаунты в социальных сетях поможет шорткод .

Ссылки на соцсети

  • Подписка на рассылку. Запись выводит форму подписки.

Форма подписки

  • Текущий или предыдущий год. Эти данные вы можете отобразить с помощью кодов 2024 и 2023.

Есть также шорткоды для вывода кнопок внутри записей, спойлеров и неактивных ссылок.

Скидка на Reboot

Как правильно удалить shortcode WordPress

Если по какой-то причине вам мешает один из шорткодов, вы можете отменить его регистрацию. Для этого служит функция remove_shortcode. Например, короткий код current-year вы можете удалить с помощью следующего php-кода:

add_action( 'init', 'unregister_shortcodes', 20 );
function unregister_shortcodes(){
remove_shortcode( 'current-year' );
}

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

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

Могу порекомендовать следующие модули:

  • Shortcodes Ultimate. Включает большой массив шорткодов на все случаи жизни. Позволяет выводить на WordPress эффектные кнопки, лайтбоксы, карусели картинок и постов, спойлеры, списки, таблицы, цитаты и многое другое. Распространяется бесплатно (есть и Pro-версия).
  • Shortcoder. Бесплатный Вордпресс-плагин для генерации кастомных шорткодов для различного кода HTML/JS/CSS с поддержкой блоков Gutenberg.
  • Arconix Shortcodes. Еще один бесплатный plugin для добавления разных динамических элементов с помощью shortcodes в контент на сайтах WordPress. В PRO-версии доступны также шорткоды для товаров WooCommerce.
  • WP Date and Time Shortcode. Маленький, но полезный бесплатный Вордпресс-модуль для отображения дат. Позволяет вывести текущий день, месяц, год, а также конкретные даты из прошлого или будущего.

По каким причинам шорткоды в WordPress могут не работать

Если shortcode не срабатывает, он, как правило, выводится в виде текста. Это происходит в следующих случаях:

Отсутствие регистрации. Если вы или автор плагина забыли зарегистрировать shortcode в программном коде, WordPress его не видит. Поэтому функционал не будет работать.

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

Короткий код вложен в HTML-тег. В этом случае WordPress также не сможет корректно обработать строку.

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

Александр

Занимаюсь запуском сайтов более 15 лет. Использовал разные платформы (1С-Битрикс, Joomla, OpenCart, Drupal и пр.), но сейчас в приоритете многофункциональный и простой WordPress при старте новых проектов. Имею богатый опыт работы с CMS, которым стараюсь делиться в статьях.

Оцените автора
Лучшие шаблоны и плагины для WordPress
Добавить комментарий

© 2024 Лучшие шаблоны и плагины для WordPress
Этот сайт использует cookie для хранения данных.