Из этого туториала вы узнаете, как использовать шорткоды в шаблонах Drupal 7.x.
Drupal 7.x. Как использовать шорткоды
На самом деле шорткоды — это макросы, используемые в тексте содержимого сайта. С помощью этих макросов можно изменять текст и форматировать избранную часть посредством функционала темы. Шорткоды используются для того, чтобы не писать десятки строк кода для выполнения необходимых функций.
Для использования шорткодов, убедитесь, что включены модули Shortcode и TM Shortcodes.
Полный перечень доступных шорткодов можно увидеть в разделе Text format (Full HTML) во время создания ноды:
Давайте рассмотрим шорткоды подробнее:
[clear][/clear] вставляет HTML элемент (div или span), который очищает значение float для заданной части текста и так регулирует позиции блоков. Шорткод содержит следующие атрибуты:
class — дополнительный класс;
id — идентификатор элемента (id);
type — тип элемента: блоковый (div, d) или строчный (span, s).
Вы можете использовать просто [clear /] для того, чтобы вставить пробел в текст. Он работает по аналогии с HTML-тегом <br />, который вставляет разрыв строки.
С помощью [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]
[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». Смотрите скриншот ниже:
[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]
Полный список доступных иконок вы можете найти на этой странице.
[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]
[progressbar][/progressbar] отображает индикатор выполнения. Шорткод содержит следующие атрибуты:
class — дополнительный класс элемента;
percent — прогресс выполнения в процентах (0-100).
К примеру:
[progressbar percent="30"]Прогресс1[/progressbar] [progressbar percent="60"]Прогресс2[/progressbar] [progressbar percent="90"]Прогресс3[/progressbar]
[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.
Вы также можете воспользоваться детальным видео-туториалом:
