Центр обучения Joomla
    Шорткоды в Joomla

    RokCandy: собственные шорткоды в Joomla

    Если вы когда-нибудь задавались вопросом, как создавать собственные шорткоды для упрощения вставки сложных HTML-конструкций в контент сайта на Joomla, то эта статья для вас!

    Содержание

    1. Немного о шорткодах
    2. Шорткоды в Joomla
    3. Компонент RokCandy
    4. Создание шорткодов
    5. Настройки RokCandy
    6. Вставка шорткодов

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

    Шорткод — сокращенный код, который при генерации веб-страниц преобразуются в 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
    Расширение: RokCandy
    Категория: Администрирование
    Включает: компонент, плагин
    Совместимость: Joomla 3.x
    Версии: бесплатная
    Разработчик: RocketTheme

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

    {text}

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

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

    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. преходим в КомпонентыRokCandyMacros
    3. жмём Создать
    4. в текстовой области Macro вводим синтаксис шорткода с нужными переменными:

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

      <span data-toggle="tooltip" data-placement="top" title="{title}">{text}</span>
    6. жмём Сохранить или Сохранить и закрыть.

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

    пп. 1, 2
    п. 3
    п. 4-6

    Настройки RokCandy

    Настройки RokCandy

    Настройки компонента включают 5 опций:

    1. Force Cache

    2. Enable Admin

      Активирует шорткоды в списке панели управления для наглядности.

    3. Enable Edit

    4. Enable Content

      При активации шорткоды, вложенные в другие шорткоды, будут работать. Подробнее ниже.

    5. Disabled

      Здесь можно внести список URL-адресов, на которых не должны обрабатываться шорткоды RokCandy.

    Опция Enable Content

    Рассмотрим на примере.

    Есть шорткод для списка с синтаксисом:

    [ul]{text}[ul]

    Элементы списка имеют синтаксис:

    [li]{text}[li]

    В результате код списка может иметь вид:

    [ul]
     [li]Элемент 1[li]
     [li]Элемент 2[li]
    [ul]

    Т. е. одни шорткоды вложены в другой. Если опция Enable Content отключена, то вложенные шорткоды не будут преобразованы в HTML.

    Вставка шорткодов в контент

    В расширении предусмотрен плагин Button - RokCandy, добавляющий в редактор Joomla кнопку для вставки шорткодов:

    Кнопка RokCandy в редакторе
    Кнопка RokCandy в редакторе
    Список шорткодов в лайтбоксе
    Список шорткодов в лайтбоксе

    Как быстро разобраться в Joomla?

      © Александр Куртеев. Центр Обучения Joomla. ОГРНИП 307434525600161. Все права защищены. © 2008 - 2019

      Основы Joomla 3

      Видео-уроки по Joomla 3.9

      Обзоры лучших расширений

      Пошаговый процесс создания сайта
      Введите e-mail для доступа к курсу: