Drupal 7.x. Как использовать шорткоды

Из этого туториала вы узнаете, как использовать шорткоды в шаблонах Drupal 7.x.

Drupal 7.x. Как использовать шорткоды

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

Для использования шорткодов, убедитесь, что включены модули Shortcode и TM Shortcodes.

Полный перечень доступных шорткодов можно увидеть в разделе Text format (Full HTML) во время создания ноды:

Давайте рассмотрим шорткоды подробнее:

1. [clear][/clear] вставляет HTML элемент (div или span), который очищает значение float для заданной части текста и так регулирует позиции блоков. Шорткод содержит следующие атрибуты:

   • class — дополнительный класс;

   • id — идентификатор элемента (id);

   • type — тип элемента: блоковый (div, d) или строчный (span, s).

   Вы можете использовать просто [clear /] для того, чтобы вставить пробел в текст. Он работает по аналогии с HTML-тегом
   , который вставляет разрыв строки.

2. С помощью [col][/col] содержимое можно отобразить в несколько столбцов. Шорткод содержит следующие атрибуты:

   • align — выравнивание столбцов: right — столбец появится на правой стороне наружного блока, center — столбец появится в центре внешнего блока;

   • class — дополнительный класс элемента;

   • clear — очищает плавающие блоки: clear-both — с обеих сторон, clear-left — только слева, clear-right — только справа;

   • last — для последнего столбца значение должно быть «1»;

   • width — ширина столбца: 1-2 — половина, 1-3 — третья часть, 2-3 — две третих, 1-4 — одна четвертая, 3-4 — три четвертых, 1-5 — одна пятая, 2-5 — две пятых, 3-5 — три пятых, 4-5 — четыре пятых, 1-6 — одна шестая или 5-6 — пять шестых внешнего блока.

   Этот шорткод рекомендуется применять внутри шорткода [clear][/clear].

   К примеру:

   [clear type="div"]
   	[col width="1-2"]содержимое столбца[/col]
   	[col width="1-2"]содержимое столбца[/col]
   	[col width="1-3"]содержимое столбца[/col]
   	[col width="2-3"]содержимое столбца[/col]
   	[col width="1-4"]содержимое столбца[/col]
   	[col width="3-4"]содержимое столбца[/col]
   	[col width="1-5"]содержимое столбца[/col]
   	[col width="4-5"]содержимое столбца[/col]
   	[col width="2-5"]содержимое столбца[/col]
   	[col width="3-5"]содержимое столбца[/col]
   	[col width="1-6"]содержимое столбца[/col]
   	[col width="5-6" last="1"]содержимое столбца[/col]
   [/clear]
   

   

3. [counter][/counter] отображает анимированные счетчики. Шорткод содержит следующие атрибуты:

   • class — дополнительный класс;

   • number — любое целое число больше ноля;

   • timer — рассчитывает скорость от 0 до указанной даты в миллисекундах.

   Содержимое шорткода служит названием.

   К примеру:

   [counter number="300" timer="30" class="custom-class1"]Счетчик1[/counter]
   [counter number="600" timer="30" class="custom-class2"]Счетчик2[/counter]
   [counter number="900" timer="30" class="custom-class3"]Счетчик3[/counter]
   

   В этом шорткоде мы изменили цвета чисел счетчиков добавлением правила CSS с атрибутом «цвет» дополнительного класса «custom-class». Смотрите скриншот ниже:

   

4. [icon][/icon] отображает иконку FontAwesome. Фреймворк использует версию FontAwesome 4.1.0. Шорткод содержит следующие атрибуты:

   • class — класс иконки FontAwesome;

   • number — ссылка (URL), если вы хотите добавить ссылку на иконку.

   К примеру:

   [icon class="fa-smile-o"]Улыбайтесь каждый день[/icon]
   [icon class="fa-star"]Дотянитесь до звезды[/icon]
   [icon class="fa-coffee"]Сделайте перерыв на кофе[/icon]
   

   

   Полный список доступных иконок вы можете найти на этой странице.

5. [piegraph][/piegraph] отображает секторную диаграмму — индикатор выполнения. Шорткод содержит следующие атрибуты:

   • barcolor — цвет основной области;

   • class — дополнительный класс элемента;

   • linewidth — ширина области, любое целое число;

   • percent — прогресс выполнения в процентах (0-100);

   • trackcolor — цвет верхней области (индикатор выполнения);

   • width — диаметр индикатора выполнения, любое целое число.

   Содержимое шорткода служит названием.

   К примеру:

   [piegraph percent="30" width="200" barcolor="#D864D8" trackcolor="#cccccc" linewidth="3"]Секторная диаграмма 1[/piegraph]
   [piegraph percent="60" width="200" barcolor="#95E495" trackcolor="#cccccc" linewidth="3"]Секторная диаграмма 2[/piegraph]
   [piegraph percent="90" width="200" barcolor="#33CCCC" trackcolor="#cccccc" linewidth="3"]Секторная диаграмма 3[/piegraph]
   

   

6. [progressbar][/progressbar] отображает индикатор выполнения. Шорткод содержит следующие атрибуты:

   • class — дополнительный класс элемента;

   • percent — прогресс выполнения в процентах (0-100).

   К примеру:

   [progressbar percent="30"]Прогресс1[/progressbar]
   [progressbar percent="60"]Прогресс2[/progressbar]
   [progressbar percent="90"]Прогресс3[/progressbar]
   

   

7. [gmap][/gmap] вставляет карту Google. Шорткод содержит следующие атрибуты:

   • class — дополнительный класс;

   • lat_coord — широта;

   • lng_coord — долгота;

   • zoom_value — начальный уровень масштабирования карты. Используйте значения от 1 до 20;

   • zoom_wheel — включает колесо прокрутки на карте. Используйте значения «yes» или «no».

   К примеру:

   [gmap lat_coord="55.861263" lng_coord="-4.251604" zoom_value="15" zoom_wheel="no"][/gmap]
   

   

   Вы можете воспользоваться этим туториалом, чтобы определить правильные координаты для вашего шорткода карты Google: Drupal 7.x. Google Map configuration.

Большинство шорткодов (кроме [gmap] и [icon]) содержат атрибут «class», с помощью которого к шорткоду можно добавлять пользовательские стили кодом CSS. Вы также можете комбинировать эти шорткоды для создания необходимого макета страницы.

На этом туториал заканчивается. Теперь вы знаете, как использовать шорткоды в шаблонах Drupal 7.x.

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

Drupal 7.x. Как использовать шорткоды