[contact-form-7 id="24085" title="Feedback RU"]

Новые шаблоны

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

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

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

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

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

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

drupal_shortcodes1

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

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

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

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

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

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

  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]
    

    drupal_shortcodes2

  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». Смотрите скриншот ниже:

    drupal_shortcodes3

  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]
    

    drupal_shortcodes4

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

  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]
    

    drupal_shortcodes5

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

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

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

    К примеру:

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

    drupal_shortcodes6

  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]
    

    drupal_shortcodes7

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

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

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

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

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