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

Немного о шорткодах

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

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

Например, HTML-код, окрашивающий текст в красный цвет:

<span style="color: #ff0000;">Красный текст</span>

В формате BBCode он может выглядеть так:

[red]Красный текст[/red]

Такой код короче и в разы понятнее неискушенному в кодировании интернет-обывателю.

Шорткоды в Joomla

Лучшим наглядным примером применения шорткодов в Joomla является Shortcode Ultimate, в арсенале которого огромное количество заготовок для самых разных элементов типографии: начиная от заголовков с различными вариантами стилевого оформления и заканчивая таймерами обратного отсчета, галереями изображений и контактными формами.

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

Например, для вставки таймера обратного отсчета в Shortcode Ultimate применяется шорткод:

[countdown count_date="2020/01/01"]Время акции закончилось![/countdown]

Этот код на выходе преобразуется в:

<div id="countdown_5c1bee9a27275" class="su-countdown-wrapper clearfix su-countdown-left su-cd-divider-none su-countdown-text-default">
<div class="su-countdown-content">
<div class="su-cd-timer">
<span class="su-cd-day">
<span class="su-cd-day-data"></span>
<span class="su-cd-day-text">Дни</span>
</span>
<span class="su-cd-hour">
<span class="su-cd-hour-data"></span>
<span class="su-cd-hour-text">Часы</span>
</span>
<span class="su-cd-minute">
<span class="su-cd-minute-data"></span>
<span class="su-cd-minute-text">Минуты</span>
</span>
<span class="su-cd-second">
<span class="su-cd-second-data"></span>
<span class="su-cd-second-text">Секунды</span>
</span>
</div>
<div class="su-cdem">Время акции закончилось!</div>
</div>
</div>

Кроме того, шорткоды плагина Shortcode Ultimate, в том числе и указанный выше, добавляют на страницу дополнительные скрипты и стили. Это значит, что чем больше элементов данного плагина применяется на странице, тем больше она в размере, а это может значительно увеличить время её загрузки.

Это не значит, что следут отказаться от применения плагина Shortcode Ultimate. Просто есть еще одно расширение, позволяющее нам самостоятельно конструировать собственные шорткоды.

Компонент RokCandy

RokCandy — бесплатный компонент для создания шорткодов в формате BBCodes.

С помощью RokCandy можно создать макросы для всех необходимых элементов типографии сайта. Например, шорткод для заголовка 2 уровня (тег h2) можно сделать в виде:

{text} или [h="2"]{text}[/h]

Создание и применение таких шорткодов, отличающихся от HTML только типом скобок, не имеет смысла. Но вспомним, насколько короткими являются шорткоды в Shortcodes Ultimate, и каким объёмным HTML-код на выходе. Именно для создания таких макросов и целесообразно применять компонент RokCandy.

Предположим, что шаблон вашего сайта на Joomla использует CSS-фреймворк Bootstrap, с помощью которого можно реализовать очень много сложных функциональных элементов (всплывающие подсказки, аккордеоны, лайтбоксы и т. д.). В таком случае более рациональным будет применение возможностей фреймворка, файлы которого всё равно загружаются на каждой странице сайта, чем использование элементов Shortcode Ultimate с его стилями и скриптами.

Например, всплывающая подсказка, возникающая при наведении в фреймворке Bootstrap 3 (применяется в большинстве профессиональных шаблонов Joomla), в HTML-коде реализуется следующим образом:

<span data-toggle="tooltip" data-placement="top" title="Это подсказка">Наведи на меня</span>

На практике этот элемент выглядит так (при наведении курсора на фразу отобразится всплывающая подсказка):

Наведи на меня

А с помощью RokCandy то же самое можно реализовать через такой шорткод:

Наведи на меня

Код получается короче и выглядит проще, но это очень простой пример, и HTML-код на выходе может быть намного объемнее.

Создание шорткодов в RokCandy

RokCandy включает компонент для создания макросов, а также плагины для их вставки (кнопка редактора) и обработки в контенте.

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

Создадим шорткод для вставки всплывающих подсказок:

1. скачиваем и устанавливаем компонент через менеджер расширений
2. преходим в Компоненты → RokCandy → Macros
3. жмём Создать

4. в текстовой области Macro вводим синтаксис шорткода с нужными переменными:

   {text}

5. в текстовой области Html вводим HTML-код, который должен быть на выходе:

   <span data-toggle="tooltip" data-placement="top" title="{title}">{text}</span>

6. жмём Сохранить или Сохранить и закрыть.

Шорткод готов и его можно применять. Для внесения ясности: шорткод и HTML на выходе объединяют лишь переменные, заключенные в фигурные скобки. Переменных может быть сколько угодно.