Плагины, темы и скрипты
собственной разработки

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

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

Шорткоды WordPress

Что такое шорткоды в ВордПресс

«Shortcode WordPress» переводится «короткий код WordPress». Если объяснять простым языком, то это конструкция (PHP, HTML), записанная в память сайта, вызов которой происходит при вводе термина (с атрибутами или без), заключенного в квадратные скобки.

Например:

В данном примере gallery является самим шорткодом, который вызывает обработку галереи из нескольких изображения. А с помощью атрибута ids передаются идентификаторы конкретных картинок из библиотеки, которые необходимо использовать в рамках данного блока.

Шорткод может содержать несколько атрибутов или не содержать ни одного.

Плюсы и минусы шорткодов

Удобство и простота использования. Вводом небольшой конструкции функциональные элементы на сайт могут добавлять даже пользователи, которые не умеют работать с кодом.
Экономия времени. Для повторяющихся элементов достаточно один раз прописать нужный код и далее использовать его.
Универсальность. Обрабатываются практически в любом месте движком WordPress: в постах, на страницах, в виджетах и даже в произвольных полях.
Гибкость. Создать свой собственный shortcode можно без привлечения программистов.
Зависимость от тем и плагинов. Многие встроены в шаблоны ВордПресс и перестают работать при их смене. Это касается и плагинов. Зачастую сложно вспомнить, где хранятся используемые короткие коды.
Конфликты. В стандартных элементах WordPress сбоев при их использовании практически не возникает. Но проблемы могут наблюдаться при взаимодействии с компонентами плагинов. Кроме того, некоторые шаблоны регистрируют одинаковые шорткоды, что тоже способно привести к конфликтам.
Ограниченность. Каждый шорткод выполняет строго поставленную перед ним задачу.

Чем больше шорткодов, тем сложнее с ними работать. Согласно практике, удобно запоминать 7-10 таких компонентов в рамках одного проекта. С большим количеством зачастую возникает путаница.

Синтаксис шорткодов

Чтобы представленная далее информация была понятнее, необходимо сперва разобраться с тем, как формируется синтаксис шорткода:

  • Квадратные скобки. Все подобные элементы делятся на самозакрывающиеся и парные. Если предусмотрена передача динамического содержимого (текстом или HTML-кодом) внутри шорткода, то используется парный (с закрывающим тегом) вариант. В иных случаях тег можно не закрывать.
  • Имя. Основной компонент синтаксиса, с которого начинается любой шорткод. Сразу после открытия квадратных скобок нужно передать название, которое описывает уникальную функцию.

В имени шорткода нельзя использовать пробелы, цифры в начале, различные специальные символы (все виды скобок, кавычки, равно, слэш и т.д.) и зарезервированные в языках программирования символы (@, #, %, &, * и пр.).

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

Если вы работаете с шорткодами на ВП, то можете встретить еще несколько терминов, которые к ним относятся:

  • Экранирование. Когда шорткод нужно указать в тексте, чтобы он не обрабатывался в соответствии с присвоенной ему функцией, используется экранирование. Для этого обычные квадратные скобки заменяются двойными.
  • Вложенность. Некоторые из коротких кодов могут быть вложены один в другой для последовательного выполнения действий. Тогда они исполняются по очереди: от внутренних к внешним.
  • Повторяемость. Под этим термином понимается возможность использования одного шорткода несколько раз в рамках одной страницы. Например, если с помощью рассматриваемого инструмента вызывается кнопка, то можно вставить несколько шорткодов в одном материале, задав для каждого свои атрибуты.
  • Буферизация. Позволяет сохранить вывод шорткода в переменную для дальнейшего применения. Обычно используется для генерации HTML-кода с динамическим контентом.

Стандартные шорткоды WordPress в 2024 году

В движке есть несколько встроенных шорткодов, которые работают на любой теме:

  • Audio и video. Для встраивания звуковых дорожек и видео, размещенных на сервере сайта. Ссылка передается через атрибут.

  • Caption. Для указания подписи к изображениям. Имеет атрибуты: id (задается номер изображения), align (выравнивание) и width (ширина).

  • Gallery. Создает из медиафайлов галерею. Предусматривает атрибуты: columns (число колонок), size (размер миниатюры), ids (идентификаторы изображений), orderby (порядок вывода).

  • Playlist. Встраивает плейлист аудиодорожек по умолчанию. Может использоваться для создания плейлиста видеороликов. Атрибуты: type (по умолчанию аудио), style (стиль, встроен темный — dark), ids (для передачи идентификаторов контента).

  • Embed. Через данный шорткод передается URL с внешнего ресурса для автоматического встраивания (например, так можно добавить видео с YouTube). Необходимо, чтобы он поддерживал oEmbed.

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

Добавить свою команду с помощью короткого кода в WordPress достаточно просто. Но нужно иметь базовые навыки работы с PHP и HTML.

Сам процесс состоит из 2 этапов:

Создание PHP-функции, которая выполняет требуемые задачи.

Регистрация шорткода при помощи предусмотренной функции add_shortcode ($имя_шорткода, $имя_вызываемой_функции).

В Вордпресс функции указываются в файле functions.php используемой темы.

Проще всего будет разобраться на реальных примерах.

Шорткод текущего года

Чтобы вывести в любом месте ВП текущий год при помощи шорткода [current_year], используйте следующий код:

Через date легко заполучить не только год, но и полную дату. Такой шорткод на некоторых проектах может пригодиться для информирования посетителей сайта о текущей дате.

Шорткод кнопки

Короткий код для вывода кнопки с тремя варьируемыми атрибутами: текст, ссылка и цвет:

Совет

Чтобы оценить эффективность кнопки на сайте, в нее можно добавить цель метрики от Яндекс.

Шорткод подписки на RSS

Следующая функция задает кнопку подписки на RSS-ленту блога:

Зарегистрировав ее, остается использоваться короткий код [rss_subscribe] в нужном месте на сайте.

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

Зарегистрированные коды легко добавить в контент поста или страницы из классического редактора, Gutenberg или любого другого конструктора. Рассмотрю на примере шорткода [current_year], созданного выше.

Классический редактор

Вставить короткий код можно, как через вкладку «Визуально», так и через «Текст». Он в любом случае будет обработан корректным образом.

Шорткод года в классическом редакторе

Gutenberg

В блочном конструкторе WordPress предусмотрен отдельный компонент «Шорткод».

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

Вводите прямо в него необходимый код, который будет обработан.

Добавление шорткода

Также вставить шорткод можно и в другие блоки: «Абзац», «Классический», «Произвольный HTML» и прочие.

Elementor

Популярный конструктор Elementor имеет специальный блок «Шорткод». Перетащите его в нужную область редактируемого пространства и введите информацию.

Шорткод в Elementor

Все популярные конструкторы страниц предусматривают блок для добавления шорткода.

Кнопка в редакторе TinyMCE

В классический редактор, построенный на базе TinyMCE, легко добавить кнопку для вставки шорткода. Это делается в 2 этапа:

Создайте новый JavaScript файл в структуре текущего шаблона. Он будет отвечать за функцию при нажатии на кнопку. Чаще всего JS хранятся в папке assets. Добавьте туда файл с любым названием, к которому после будет выполняться обращение. Например, year-button.js. В этот файл поместите следующий code:



В functions.php потребуется внести 4 функции: добавление кастомной кнопки, регистрация ее в редакторе, использование JS и инициализация.



Если все сделано правильно, в классическом редакторе WordPress будет добавлена кнопка «Вставить текущий год». При нажатии на нее шорткод [current_year] будет вставлен в контент.

Кнопка в редакторе

Для использования другого кода, замените добавляемый контент для API-метода editor.insertContent в JS-файле.

Способы вставить шорткод в WordPress-шаблон напрямую

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

В виджетах

В WordPress предусмотрен стандартный блок «Текст» среди виджетов. Прямо в него вставьте шорткод и проверьте работу.

Шорткод в виджете

Если обработка короткого кода не происходит, потребуется в functions.php указанным ниже кодом активировать поддержку шорткодов:

В шапке, футере или любом PHP-файле

Добавлять шорткод (в header.php, index.php, footer.php и другие файлы шаблона) необходимо через функцию echo do_shortcode. Пример для [current_year]:

В описании категорий или меток

По умолчанию в большинстве шаблонов шорткоды обрабатываются в описании категорий и меток. Но при использовании на сайте популярного SEO-плагина от Yoast с работой возникают проблемы. Решить их позволяют 3 строки кода, которые следует добавить в functions.php:

Полезные шорткоды в шаблоне Reboot от WPShop


Популярная тема Reboot

В премиальных темах часто встроены некоторые полезные шорткоды, данные о которых можно найти в документации. В России большим спросом у вебмастеров пользуется шаблон Reboot, где разработчики из WPShop предусмотрели порядка десятка полезных коротких кодов.

  • [current_year] выводит в тексте текущий год.
  • [previous_year] выводит в тексте прошлый год.
  • [contactform] добавляет форму обратной связи.

Контактная форма через шорткод

  • [subscribeform] предназначен для создания формы подписки.

Подписаться на сайт

  • [social_profiles] в нужном месте добавляет кнопки соцсетей.

Социальные кнопки в Reboot

  • [toc] для оглавления в публикациях.

Оглавление

  • [htmlsitemap] используется для HTML-карты сайта. Поддерживает атрибуты для дополнительной настройки.

Карта сайта

  • [button] добавляет кнопку. С параметрами для стиля: background_color (цвет фона), size (размер), color (цвет текста). Также поддерживает маскировку ссылок (hide_link) и функциональность открытия заданного линка в новом окне (target).

Кнопка на WP

  • [spoiler] выводит заданный контент под спойлером, можно передать заголовок через атрибут title.

Спойлер WP

  • [mask_link] оберните в него внешнюю ссылку, чтобы замаскировать ее и не «распылять» вес страницы.

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

Скидка на Reboot

Как удалить зарегистрированные шорткоды

В WordPress предусмотрена возможность отключить ненужные шорткоды. Для этого используется отдельная функция remove_shortcode.

К примеру, чтобы отключить шорткод [current_year], используйте код:

Добавлять этот код необходимо в functions.php.

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

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

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

Shortcodes Ultimate

Ультимативное расширение Shortcodes Ultimate

Расширение Shortcodes Ultimate сразу после установки на сайт добавляет свыше 50 шорткодов, среди которых:

  • Всевозможные галереи для отображения контента.
  • Красивые элементы оформления текста: цитаты, список, примечания, вкладки, блоки внимания, кнопки и пр.
  • Способы вывода информации адаптивными колонками.
  • Лайтбоксы.
  • Карты Google.

Shortcodes Ultimate бесплатный, но самые крутые шорткоды с поддержкой стильной анимации доступны в Pro-версии, которая обойдется в $40 за 1 домен в год. Там же предлагается множество полезных кодов WooCommerce для товаров.

WP Shortcode от MyThemeShop

Расширение WP Shortcode от MyThemeShop

WP Shortcode практически повторяет функционал Shortcodes Ultimate, но в нем немного меньше массив шорткодов — около 30. Главным преимуществом данного расширения является его полностью бесплатная модель распространения.

В настоящее время я бы не рекомендовал использовать WP Shortcode. Он работает с современными версиями WordPress и иногда получает обновления для устранения проблем совместимости с новыми версиями CMS. Но дизайн представленных в нем блоков сильно устарел.

Shortcoder

Shortcoder для создания шорткодов

Еще один полезный плагин для работы с шорткодами — это Shortcoder. Он дает вебмастеру максимально простой способ создавать свои Custom Shortcodes.

После установки Shortcoder в специальном разделе предлагается вставить содержимое для шорткода при помощи HTML, CSS и JS. Для этого нажмите Add Shortcode, укажите необходимые параметры и сохраните результат. Далее можно использовать готовый короткий код в своем контенте.

Расширение хорошо подойдет для вебмастеров, которые не хотят редактировать functions.php и разбираться в работе с PHP-кодом.

В Pro-версии имеется возможность помещать прямо в шорткоды блоки Elementor или WPBakery.

Column Shortcodes

Column Shortcodes для шорткодов колонки

Выше я рассказывал, что Shortcodes Ultimate позволяет выводить нужные данные адаптивные колонками. Эта функциональность отдельно представлена в плагине Column Shortcodes.

Когда контент на странице необходимо разделить на столбцы, расширение помогает справиться с задачей. После его установки в редакторе появляется кнопка для вставки шорткода с 10 вариантами столбцов (по ширине).

Column Shortcodes распространяется бесплатно.

Easy Pricing Tables

Таблицы цен Easy Pricing Tables

Плагин Easy Pricing Tables не позиционируется в качестве решения для работы с шорткодами. Это специальная разработка, которая позволяет выводить на сайте красивый блок с ценами. Однако для публикации созданных блоков можно использовать короткие коды, поэтому я добавил его в эту подборку.

Easy Pricing Tables отлично подходит для коммерческих проектов, особенно когда нужно вывести градацию цен (например, несколько тарифов сервиса). Создав необходимый блок в редакторе плагина, остается использовать имеющийся шорткод, чтобы вывести его во всех необходимых местах.

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

Базовая версия Easy Pricing Tables бесплатная, а в Pro за $50 есть дополнительные функции и больше опций для настройки дизайнов.

Шорткод ВордПресс: почему не работает

Основные причины, почему короткий код может не работать и выводиться текстом:
Ошибка в написании. Убедитесь, что синтаксис верен. Частой ошибкой является пробел после открывающей квадратной скобки — такой код CMS не видит.
Незарегистрирован. Если вы самостоятельно вносили его в functions.php, убедитесь, что использовали функцию add_shortcode() для регистрации.
Неправильное использование. К примеру, некоторые шорткоды обязательно нужно закрывать. Если не передать значение между открытием и закрытием (или передать ошибочное, которое не может быть обработано), возникнет проблема.
Конфликт с кодом. Некоторые шорткоды можно обернуть в HTML-код, но не все. Попробуйте проверить его работу без использования HTML-тегов.
Кэширование. После регистрации нового шорткода или установки модуля с ними, сбросьте кэш в админке WordPress, если он используется для оптимизации скорости работы сайта.

Итоги

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

Лицензия Reboot со скидкой

Добавить комментарий

наверх