При взаимодействии с сайтом вебмастеру регулярно приходится сталкиваться с повторяющимися задачами. Чтобы облегчить работу и в несколько кликов добавлять сложные элементы или функции, были придуманы шорткоды WordPress. Это мощный инструмент, который следует изучить, и тогда он позволит вывести удобство взаимодействия с CMS на новый уровень.
Что такое шорткоды в ВордПресс
«Shortcode WordPress» переводится «короткий код WordPress». Если объяснять простым языком, то это конструкция (PHP, HTML), записанная в память сайта, вызов которой происходит при вводе термина (с атрибутами или без), заключенного в квадратные скобки.
Например:
1 2 3 4 5 |
[gallery ids="121361,121368"] |
В данном примере gallery является самим шорткодом, который вызывает обработку галереи из нескольких изображения. А с помощью атрибута ids передаются идентификаторы конкретных картинок из библиотеки, которые необходимо использовать в рамках данного блока.
Шорткод может содержать несколько атрибутов или не содержать ни одного.
Плюсы и минусы шорткодов
Чем больше шорткодов, тем сложнее с ними работать. Согласно практике, удобно запоминать 7-10 таких компонентов в рамках одного проекта. С большим количеством зачастую возникает путаница.
Синтаксис шорткодов
Чтобы представленная далее информация была понятнее, необходимо сперва разобраться с тем, как формируется синтаксис шорткода:
- Квадратные скобки. Все подобные элементы делятся на самозакрывающиеся и парные. Если предусмотрена передача динамического содержимого (текстом или HTML-кодом) внутри шорткода, то используется парный (с закрывающим тегом) вариант. В иных случаях тег можно не закрывать.
- Имя. Основной компонент синтаксиса, с которого начинается любой шорткод. Сразу после открытия квадратных скобок нужно передать название, которое описывает уникальную функцию.
В имени шорткода нельзя использовать пробелы, цифры в начале, различные специальные символы (все виды скобок, кавычки, равно, слэш и т.д.) и зарезервированные в языках программирования символы (@, #, %, &, * и пр.).
- Атрибуты. В большинство шорткодов посредством атрибутов передается информация. Они бывают обязательными и необязательными. В исполняемый код «вшиты» места, куда поступают значения из атрибутов. Атрибуты указываются в формате имя="значение".
Если вы работаете с шорткодами на ВП, то можете встретить еще несколько терминов, которые к ним относятся:
- Экранирование. Когда шорткод нужно указать в тексте, чтобы он не обрабатывался в соответствии с присвоенной ему функцией, используется экранирование. Для этого обычные квадратные скобки заменяются двойными.
- Вложенность. Некоторые из коротких кодов могут быть вложены один в другой для последовательного выполнения действий. Тогда они исполняются по очереди: от внутренних к внешним.
- Повторяемость. Под этим термином понимается возможность использования одного шорткода несколько раз в рамках одной страницы. Например, если с помощью рассматриваемого инструмента вызывается кнопка, то можно вставить несколько шорткодов в одном материале, задав для каждого свои атрибуты.
- Буферизация. Позволяет сохранить вывод шорткода в переменную для дальнейшего применения. Обычно используется для генерации HTML-кода с динамическим контентом.
Стандартные шорткоды WordPress в 2024 году
В движке есть несколько встроенных шорткодов, которые работают на любой теме:
- Audio и video. Для встраивания звуковых дорожек и видео, размещенных на сервере сайта. Ссылка передается через атрибут.
1 2 3 4 5 |
[audio src="url.mp3"] |
1 2 3 4 5 |
[video src="url.mp4"] |
- Caption. Для указания подписи к изображениям. Имеет атрибуты: id (задается номер изображения), align (выравнивание) и width (ширина).
1 2 3 |
[caption id="attachment_123" align="aligncenter" width="600"]Подпись[/caption] |
- Gallery. Создает из медиафайлов галерею. Предусматривает атрибуты: columns (число колонок), size (размер миниатюры), ids (идентификаторы изображений), orderby (порядок вывода).
1 2 3 4 5 |
[gallery columns="9" size="large" ids="121314,121302" orderby="rand"] |
- Playlist. Встраивает плейлист аудиодорожек по умолчанию. Может использоваться для создания плейлиста видеороликов. Атрибуты: type (по умолчанию аудио), style (стиль, встроен темный — dark), ids (для передачи идентификаторов контента).
1 2 3 4 5 |
[playlist type="video" ids="44,55,66" style="dark"] |
- Embed. Через данный шорткод передается URL с внешнего ресурса для автоматического встраивания (например, так можно добавить видео с YouTube). Необходимо, чтобы он поддерживал oEmbed.
1 2 3 4 5 |
[embed]ссылка[/embed] |
Как создать свой шорткод в WordPress
Добавить свою команду с помощью короткого кода в WordPress достаточно просто. Но нужно иметь базовые навыки работы с PHP и HTML.
Сам процесс состоит из 2 этапов:
Создание PHP-функции, которая выполняет требуемые задачи.
Регистрация шорткода при помощи предусмотренной функции add_shortcode ($имя_шорткода, $имя_вызываемой_функции).
В Вордпресс функции указываются в файле functions.php используемой темы.
Проще всего будет разобраться на реальных примерах.
Шорткод текущего года
Чтобы вывести в любом месте ВП текущий год при помощи шорткода [current_year], используйте следующий код:
1 2 3 4 5 6 7 |
function display_current_year() { return date('Y'); } add_shortcode('current_year', 'display_current_year'); |
Через date легко заполучить не только год, но и полную дату. Такой шорткод на некоторых проектах может пригодиться для информирования посетителей сайта о текущей дате.
Шорткод кнопки
Короткий код для вывода кнопки с тремя варьируемыми атрибутами: текст, ссылка и цвет:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function create_button_shortcode( $atts ) { $atts = shortcode_atts( array( 'text' => 'Текст на кнопке по умолчанию', 'link' => '#', 'color' => '#107c10', ), $atts, 'button' ); return '<a style="background-color: ' . esc_attr( $atts['color'] ) . '; padding: 10px 20px; color: white; text-decoration: none;" href="' . esc_url( $atts['link'] ) . '">' . esc_html( $atts['text'] ) . '</a>'; } add_shortcode('button', 'create_button_shortcode'); |
Чтобы оценить эффективность кнопки на сайте, в нее можно добавить цель метрики от Яндекс.
Шорткод подписки на RSS
Следующая функция задает кнопку подписки на RSS-ленту блога:
1 2 3 4 5 6 7 8 9 |
function rss_subscribe_button( $atts ) { $rss_url = get_bloginfo('rss2_url'); return '<a style="background-color: orange; padding: 10px 20px; color: white; text-decoration: none;" href="' . esc_url( $rss_url ) . '">Подписаться на RSS</a>'; } add_shortcode('rss_subscribe', 'rss_subscribe_button'); |
Зарегистрировав ее, остается использоваться короткий код [rss_subscribe] в нужном месте на сайте.
Способы вставить шорткод в контент
Зарегистрированные коды легко добавить в контент поста или страницы из классического редактора, Gutenberg или любого другого конструктора. Рассмотрю на примере шорткода [current_year], созданного выше.
Классический редактор
Вставить короткий код можно, как через вкладку «Визуально», так и через «Текст». Он в любом случае будет обработан корректным образом.
Gutenberg
В блочном конструкторе WordPress предусмотрен отдельный компонент «Шорткод».
Вводите прямо в него необходимый код, который будет обработан.
Также вставить шорткод можно и в другие блоки: «Абзац», «Классический», «Произвольный HTML» и прочие.
Elementor
Популярный конструктор Elementor имеет специальный блок «Шорткод». Перетащите его в нужную область редактируемого пространства и введите информацию.
Все популярные конструкторы страниц предусматривают блок для добавления шорткода.
Кнопка в редакторе TinyMCE
В классический редактор, построенный на базе TinyMCE, легко добавить кнопку для вставки шорткода. Это делается в 2 этапа:
Создайте новый JavaScript файл в структуре текущего шаблона. Он будет отвечать за функцию при нажатии на кнопку. Чаще всего JS хранятся в папке assets. Добавьте туда файл с любым названием, к которому после будет выполняться обращение. Например, year-button.js. В этот файл поместите следующий code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
(function() { tinymce.create('tinymce.plugins.current_year_button', { init: function(editor, url) { var currentYear = new Date().getFullYear(); editor.addButton('current_year_button', { text: currentYear.toString(), tooltip: 'Вставить текущий год', onclick: function() { editor.insertContent('[current_year]'); } }); }, createControl: function(n, cm) { return null; } }); tinymce.PluginManager.add('current_year_button', tinymce.plugins.current_year_button); })(); |
В functions.php потребуется внести 4 функции: добавление кастомной кнопки, регистрация ее в редакторе, использование JS и инициализация.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function add_current_year_tinymce_button() { if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) { return; } if ( get_user_option('rich_editing') === 'true' ) { add_filter( 'mce_external_plugins', 'add_current_year_button_script' ); add_filter( 'mce_buttons', 'register_current_year_button' ); } } function register_current_year_button( $buttons ) { array_push( $buttons, 'current_year_button' ); return $buttons; } function add_current_year_button_script( $plugin_array ) { $plugin_array['current_year_button'] = get_template_directory_uri() . '/js/year-button.js'; return $plugin_array; } add_action( 'admin_init', 'add_current_year_tinymce_button' ); |
Если все сделано правильно, в классическом редакторе WordPress будет добавлена кнопка «Вставить текущий год». При нажатии на нее шорткод [current_year] будет вставлен в контент.
Для использования другого кода, замените добавляемый контент для API-метода editor.insertContent в JS-файле.
Способы вставить шорткод в WordPress-шаблон напрямую
Шорткоды вызывают HTML-код, и это нужно учитывать, если требуется их добавить в различные области шаблона, а не в те компоненты, где подразумевается текстовый ответ. Например, может потребоваться вывести информацию в виджете, шапке сайта, футере или в меню.
В виджетах
В WordPress предусмотрен стандартный блок «Текст» среди виджетов. Прямо в него вставьте шорткод и проверьте работу.
Если обработка короткого кода не происходит, потребуется в functions.php указанным ниже кодом активировать поддержку шорткодов:
1 2 3 |
add_filter('widget_text', 'do_shortcode'); |
В шапке, футере или любом PHP-файле
Добавлять шорткод (в header.php, index.php, footer.php и другие файлы шаблона) необходимо через функцию echo do_shortcode. Пример для [current_year]:
1 2 3 |
<?php echo do_shortcode('[current-year]'); ?> |
В описании категорий или меток
По умолчанию в большинстве шаблонов шорткоды обрабатываются в описании категорий и меток. Но при использовании на сайте популярного SEO-плагина от Yoast с работой возникают проблемы. Решить их позволяют 3 строки кода, которые следует добавить в functions.php:
1 2 3 4 5 |
add_filter( 'term_description', 'do_shortcode' ); add_filter( 'category_description', 'do_shortcode' ); add_filter( 'post_tag_description', 'do_shortcode' ); |
Полезные шорткоды в шаблоне Reboot от WPShop
В премиальных темах часто встроены некоторые полезные шорткоды, данные о которых можно найти в документации. В России большим спросом у вебмастеров пользуется шаблон Reboot, где разработчики из WPShop предусмотрели порядка десятка полезных коротких кодов.
- [current_year] выводит в тексте текущий год.
- [previous_year] выводит в тексте прошлый год.
- [contactform] добавляет форму обратной связи.
- [subscribeform] предназначен для создания формы подписки.
- [social_profiles] в нужном месте добавляет кнопки соцсетей.
- [toc] для оглавления в публикациях.
- [htmlsitemap] используется для HTML-карты сайта. Поддерживает атрибуты для дополнительной настройки.
- [button] добавляет кнопку. С параметрами для стиля: background_color (цвет фона), size (размер), color (цвет текста). Также поддерживает маскировку ссылок (hide_link) и функциональность открытия заданного линка в новом окне (target).
- [spoiler] выводит заданный контент под спойлером, можно передать заголовок через атрибут title.
- [mask_link] оберните в него внешнюю ссылку, чтобы замаскировать ее и не «распылять» вес страницы.
На сайте есть детальный обзор возможностей Reboot, который показывает, насколько тема многофункциональна.
Как удалить зарегистрированные шорткоды
В WordPress предусмотрена возможность отключить ненужные шорткоды. Для этого используется отдельная функция remove_shortcode.
К примеру, чтобы отключить шорткод [current_year], используйте код:
1 2 3 4 5 6 |
function remove_example_shortcode() { remove_shortcode( 'current_year' ); } add_action( 'init', 'remove_example_shortcode' ); |
Добавлять этот код необходимо в functions.php.
Обратите внимание на хук init, который используется для вызова функции на этапе инициализации WordPress. В некоторых инструкциях в интернете при регистрации шорткода вебмастеры тоже добавляют этот хук. В таком случае важно, где находится функция remove_shortcode в файле functions.php. Она должна располагаться ниже чем функция, которая задает сам шорткод.
Плагины для работы с шорткодами
В WordPress есть большое количество плагинов, которые добавляют свои шорткоды или предлагают владельцам веб-сайтов их создать, используя простой и понятный интерфейс настроек. Рассмотрю несколько наиболее популярных решений.
Shortcodes Ultimate
Расширение Shortcodes Ultimate сразу после установки на сайт добавляет свыше 50 шорткодов, среди которых:
- Всевозможные галереи для отображения контента.
- Красивые элементы оформления текста: цитаты, список, примечания, вкладки, блоки внимания, кнопки и пр.
- Способы вывода информации адаптивными колонками.
- Лайтбоксы.
- Карты Google.
Shortcodes Ultimate бесплатный, но самые крутые шорткоды с поддержкой стильной анимации доступны в Pro-версии, которая обойдется в $40 за 1 домен в год. Там же предлагается множество полезных кодов WooCommerce для товаров.
WP Shortcode от MyThemeShop
WP Shortcode практически повторяет функционал Shortcodes Ultimate, но в нем немного меньше массив шорткодов — около 30. Главным преимуществом данного расширения является его полностью бесплатная модель распространения.
В настоящее время я бы не рекомендовал использовать WP Shortcode. Он работает с современными версиями WordPress и иногда получает обновления для устранения проблем совместимости с новыми версиями CMS. Но дизайн представленных в нем блоков сильно устарел.
Shortcoder
Еще один полезный плагин для работы с шорткодами — это Shortcoder. Он дает вебмастеру максимально простой способ создавать свои Custom Shortcodes.
После установки Shortcoder в специальном разделе предлагается вставить содержимое для шорткода при помощи HTML, CSS и JS. Для этого нажмите Add Shortcode, укажите необходимые параметры и сохраните результат. Далее можно использовать готовый короткий код в своем контенте.
Расширение хорошо подойдет для вебмастеров, которые не хотят редактировать functions.php и разбираться в работе с PHP-кодом.
В Pro-версии имеется возможность помещать прямо в шорткоды блоки Elementor или WPBakery.
Column Shortcodes
Выше я рассказывал, что Shortcodes Ultimate позволяет выводить нужные данные адаптивные колонками. Эта функциональность отдельно представлена в плагине Column Shortcodes.
Когда контент на странице необходимо разделить на столбцы, расширение помогает справиться с задачей. После его установки в редакторе появляется кнопка для вставки шорткода с 10 вариантами столбцов (по ширине).
Column Shortcodes распространяется бесплатно.
Easy Pricing Tables
Плагин Easy Pricing Tables не позиционируется в качестве решения для работы с шорткодами. Это специальная разработка, которая позволяет выводить на сайте красивый блок с ценами. Однако для публикации созданных блоков можно использовать короткие коды, поэтому я добавил его в эту подборку.
Easy Pricing Tables отлично подходит для коммерческих проектов, особенно когда нужно вывести градацию цен (например, несколько тарифов сервиса). Создав необходимый блок в редакторе плагина, остается использовать имеющийся шорткод, чтобы вывести его во всех необходимых местах.
При необходимости изменить цены или внести другие правки, достаточно будет отредактировать исходный блок, а не открывать каждую запись заново и вносить изменения. В этом существенное преимущество использования шорткодов.
Базовая версия Easy Pricing Tables бесплатная, а в Pro за $50 есть дополнительные функции и больше опций для настройки дизайнов.
Шорткод ВордПресс: почему не работает
Итоги
Шорткод — мощный инструмент WordPress, способный существенно упростить работу с сайтом. Я в статье показал, что зарегистрировать свой собственный короткий код без плагина достаточно просто. Также для многих может стать открытием, что в используемой ими теме на сайте уже зарегистрированы полезные шорткоды, например, как это реализовано в Reboot.