Настройка плагина для WordPress Fruitful (Shortcodes)

Плагин Fruitful для Вордпресс расширяет возможности визуального редактора. Чтобы использовать полные возможности рассмотрим атрибуты шорткодов плагина для всех девяти вставок.

Для вставки программного кода без изменений в текст использовался плагин Crayon Syntax Highlighter.

Содержание

Horizontal tabs Горизонтальная таблица с вкладками

Vertical tabs Вертикальная таблица с вкладками

Accordion Выпадающий список

Promo text Текст на баннере

Infobox Добавление столбцов справки

Separator Разделительная линия

Alert Предупреждения

Progress bar Полоска прогресса

Button — Кнопки

 

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

  1. Откройте визуальный редактор
  2. Нажмите на изображение нужной вставки
  3. Вставте , при необходимости, между тегами нужную информацию
  4. Добавте или удалите атрибуты вставки

Horizontal tabs Горизонтальная таблица с вкладками

 

 

 

 Атрибуты

  • id = “”
  • type = “default, vertical, accordion”  — указываем тип (по умолчанию (горизонтальная таблица), вертикальная или аккордион)
  • width = “100%”  — изменяем длину
  • fit = “true, false”
  • tabcolor=”#ff0000″  — изменяем цвет переключаемых вкладок

Type Тип

[fruitful_tabs type=»default» width=»100%» fit=»false»]
[fruitful_tab title=»Title 1″] Tab 1 content place [/fruitful_tab]
[fruitful_tab title=»Title 2″] Tab 2 content place [/fruitful_tab]
[fruitful_tab title=»Title 3″] Tab 3 content place [/fruitful_tab]
[/fruitful_tabs]

[fruitful_tabs type="default" width="100%" fit="false"]
[fruitful_tab title="Title 1"] Tab 1 [/fruitful_tab]
[fruitful_tab title="Title 2"] Tab 2 [/fruitful_tab]
[fruitful_tab title="Title 3"] Tab 3 [/fruitful_tab]
[/fruitful_tabs]

 

Width пример с указанием фиксированной длины таблицы

[fruitful_tabs type=»default» width=»300px» fit=»false»]
[fruitful_tab title=»Title 1″] Tab 1 content place [/fruitful_tab]
[fruitful_tab title=»Title 2″] Tab 2 content place [/fruitful_tab]
[fruitful_tab title=»Title 3″] Tab 3 content place [/fruitful_tab]
[/fruitful_tabs]

[fruitful_tabs type="default" width="300px" fit="false"]
[fruitful_tab title="Title 1"] Tab 1 content place [/fruitful_tab]
[fruitful_tab title="Title 2"] Tab 2 content place [/fruitful_tab]
[fruitful_tab title="Title 3"] Tab 3 content place [/fruitful_tab]
[/fruitful_tabs]

Fit

[fruitful_tabs fit=»true»]
[fruitful_tab title=»Title 1″] Tab 1 content[/fruitful_tab]
[fruitful_tab title=»Title 2″] Tab 2 content[/fruitful_tab]
[fruitful_tab title=»Title 3″] Tab 3 content[/fruitful_tab]
[/fruitful_tabs]

[fruitful_tabs fit="true"]
[fruitful_tab title="Title 1"] Tab 1 content place [/fruitful_tab]
[fruitful_tab title="Title 2"] Tab 2 content place [/fruitful_tab]
[fruitful_tab title="Title 3"] Tab 3 content place [/fruitful_tab]
[/fruitful_tabs]

Tabcolor пример с измененным цветом переключаемых вкладок

[fruitful_tabs fit=»true» tabcolor=»#ff0000″]
[fruitful_tab title=»Title 1″] Tab 1 content place [/fruitful_tab]
[fruitful_tab title=»Title 2″] Tab 2 content place [/fruitful_tab]
[fruitful_tab title=»Title 3″] Tab 3 content place [/fruitful_tab]
[/fruitful_tabs]

[fruitful_tabs fit="true" tabcolor="#ff0000"]
[fruitful_tab title="Title 1"] Tab 1 content place [/fruitful_tab]
[fruitful_tab title="Title 2"] Tab 2 content place [/fruitful_tab]
[fruitful_tab title="Title 3"] Tab 3 content place [/fruitful_tab]
[/fruitful_tabs]

Vertical tabs Вертикальная таблица с вкладками

 

 

 

 Атрибуты

  • id = “”
  • type = “default, vertical, accordion”
  • width = “100%”
  • fit = “true, false”
  • widthtab = “”
  • tabcolor=”#ff0000″

Type Тип

[fruitful_tabs type=»vertical» width=»100%» fit=»false»]
[fruitful_tab title=»Title 1″] Tab 1 content place [/fruitful_tab]
[fruitful_tab title=»Title 2″] Tab 2 content place [/fruitful_tab]
[fruitful_tab title=»Title 3″] Tab 3 content place [/fruitful_tab]
[/fruitful_tabs]

[fruitful_tabs type="vertical" width="100%" fit="false"]
[fruitful_tab title="Title 1"] Tab 1 content place [/fruitful_tab]
[fruitful_tab title="Title 2"] Tab 2 content place [/fruitful_tab]
[fruitful_tab title="Title 3"] Tab 3 content place [/fruitful_tab]
[/fruitful_tabs]

 Width пример с указанием фиксированной длины

[fruitful_tabs type=»vertical» width=»55%»]
[fruitful_tab title=»Title 1″] Tab 1 content place [/fruitful_tab]
[fruitful_tab title=»Title 2″] Tab 2 content place [/fruitful_tab]
[fruitful_tab title=»Title 3″] Tab 3 content place [/fruitful_tab]
[/fruitful_tabs]

[fruitful_tabs type="vertical" width="55%"]
[fruitful_tab title="Title 1"] Tab 1 content place [/fruitful_tab]
[fruitful_tab title="Title 2"] Tab 2 content place [/fruitful_tab]
[fruitful_tab title="Title 3"] Tab 3 content place [/fruitful_tab]
[/fruitful_tabs]

Width for tab пример с указанием фиксированной длины переключаемых вкладок

[fruitful_tabs type=»vertical» width=»100%» fit=»false» widthtab=»100px»]
[fruitful_tab title=»Title 1″] Tab 1 content place [/fruitful_tab]
[fruitful_tab title=»Title 2″] Tab 2 content place [/fruitful_tab]
[fruitful_tab title=»Title 3″] Tab 3 content place [/fruitful_tab]
[/fruitful_tabs]

[fruitful_tabs type="vertical" width="100%" fit="false" widthtab="100px"]
[fruitful_tab title="Title 1"] Tab 1 content place [/fruitful_tab]
[fruitful_tab title="Title 2"] Tab 2 content place [/fruitful_tab]
[fruitful_tab title="Title 3"] Tab 3 content place [/fruitful_tab]
[/fruitful_tabs]

Tabcolor пример с измененным цветом переключаемых вкладок

[fruitful_tabs type=»vertical» width=»100%» tabcolor=»#ff0000″]
[fruitful_tab title=»Title 1″] Tab 1 content place [/fruitful_tab]
[fruitful_tab title=»Title 2″] Tab 2 content place [/fruitful_tab]
[fruitful_tab title=»Title 3″] Tab 3 content place [/fruitful_tab]
[/fruitful_tabs]

[fruitful_tabs type="vertical" width="100%" tabcolor="#ff0000"]
[fruitful_tab title="Title 1"] Tab 1 content place [/fruitful_tab]
[fruitful_tab title="Title 2"] Tab 2 content place [/fruitful_tab]
[fruitful_tab title="Title 3"] Tab 3 content place [/fruitful_tab]
[/fruitful_tabs]

Accordion Выпадающий список


 

 

Атрибуты

  • id = “”
  • type = “default, vertical, accordion”
  • width = “100%”
  • fit = “true, false”

Type Тип

[fruitful_tabs type=»accordion» width=»100%»]
[fruitful_tab title=»Title 1″] Tab 1 content place [/fruitful_tab]
[fruitful_tab title=»Title 2″] Tab 2 content place [/fruitful_tab]
[fruitful_tab title=»Title 3″] Tab 3 content place [/fruitful_tab]
[/fruitful_tabs]

[fruitful_tabs type="accordion" width="100%"]
[fruitful_tab title="Title 1"] Tab 1 content place [/fruitful_tab]
[fruitful_tab title="Title 2"] Tab 2 content place [/fruitful_tab]
[fruitful_tab title="Title 3"] Tab 3 content place [/fruitful_tab]
[/fruitful_tabs]

Opened accordion tab Выпадающий список с открытой ячейкой

[fruitful_tabs type=»accordion» width=»100%» closed=»false»]
[fruitful_tab title=»Title 1″] Tab 1 content place [/fruitful_tab]
[fruitful_tab title=»Title 2″] Tab 2 content place [/fruitful_tab]
[fruitful_tab title=»Title 3″] Tab 3 content place [/fruitful_tab]
[/fruitful_tabs]

[fruitful_tabs type="accordion" width="100%" closed="false"]
[fruitful_tab title="Title 1"] Tab 1 content place [/fruitful_tab]
[fruitful_tab title="Title 2"] Tab 2 content place [/fruitful_tab]
[fruitful_tab title="Title 3"] Tab 3 content place [/fruitful_tab]
[/fruitful_tabs]

Promo text Текст на баннере

 

 

 

 Атрибуты

  • id = “”
  • style = “”
  • shadowtype =”type-1″

Пример

[fruitful_dbox] Привет!  [/fruitful_dbox]

[fruitful_dbox] Привет![/fruitful_dbox]

Пример с типом тени 2

[fruitful_dbox shadowtype=»type-2″] Привет! [/fruitful_dbox]

[fruitful_dbox shadowtype="type-2"] Привет![/fruitful_dbox]

Пример с типом тени 3

[fruitful_dbox shadowtype=»type-3″] Привет! [/fruitful_dbox]

[fruitful_dbox shadowtype="type-3"] Привет![/fruitful_dbox]

Пример с типом тени 4

[fruitful_dbox shadowtype=»type-4″] Привет! [/fruitful_dbox]

[fruitful_dbox shadowtype="type-4"] Привет![/fruitful_dbox]

Пример с типом тени 5

[fruitful_dbox shadowtype=»type-5″] Привет! [/fruitful_dbox]

[fruitful_dbox shadowtype="type-5"] Привет![/fruitful_dbox]

Добавление столбцов

 

 

Атрибуты

  • column = “ffs-two-one, ffs-three-one, ffs-four-one, ffs-five-one, ffs-three-two, ffs-four-three”
  • title = “your title”
  • link = “#”
  • image = “http://website.com/wp-content/uploads/2014/04/image.png”
  • icon = “fa-check-square-o” full list of Font Awesome icons”
  • icon_position = “left, right, center”
  • styletext = “font-size:13px”
  • styletitle = “font-size:20px; text-transform: uppercase;”
  • styleicon = “background-color:#000; color:#fff; border-radius:50%;”
  • last =”true”

Columns Столбцы

[fruitful_ibox_row]
[fruitful_ibox column=»ffs-two-one» title=»Title 1″]Lorem ipsum dolor sit amet.[/fruitful_ibox]
[fruitful_ibox column=»ffs-two-one» title=»Title 2″ last=»true»]Lorem ipsum dolor sit amet.[/fruitful_ibox]
[/fruitful_ibox_row]

[fruitful_ibox_row]
[fruitful_ibox column="ffs-two-one" title="Title 1"]Lorem ipsum dolor sit amet.[/fruitful_ibox]
[fruitful_ibox column="ffs-two-one" title="Title 2" last="true"]Lorem ipsum dolor sit amet.[/fruitful_ibox]
[/fruitful_ibox_row]

Image Изображения

 

[fruitful_ibox_row]
[fruitful_ibox image="http://plugins.fruitfulcode.com/shortcodes/wp-content/uploads/2014/05/image-alignment-150x150.jpg" column="ffs-two-one" title="Title 1"]Lorem ipsum dolor sit amet.[/fruitful_ibox]
[fruitful_ibox image="http://plugins.fruitfulcode.com/shortcodes/wp-content/uploads/2014/05/image-alignment-150x150.jpg" column="ffs-two-one" title="Title 2" last="true"]Lorem ipsum dolor sit amet.[/fruitful_ibox]
[/fruitful_ibox_row]

Link Ссылки

[fruitful_ibox_row]
[fruitful_ibox link=»http://plugins.fruitfulcode.com/shortcodes/» column=»ffs-two-one» title=»Title 1″]Lorem ipsum dolor sit amet.[/fruitful_ibox]
[fruitful_ibox link=»http://plugins.fruitfulcode.com/shortcodes/» column=»ffs-two-one» title=»Title 2″ last=»true»]Lorem ipsum dolor sit amet.[/fruitful_ibox]
[/fruitful_ibox_row]

[fruitful_ibox_row]
[fruitful_ibox link="http://plugins.fruitfulcode.com/shortcodes/" column="ffs-two-one" title="Title 1"]Lorem ipsum dolor sit amet.[/fruitful_ibox]
[fruitful_ibox link="http://plugins.fruitfulcode.com/shortcodes/" column="ffs-two-one" title="Title 2" last="true"]Lorem ipsum dolor sit amet.[/fruitful_ibox]
[/fruitful_ibox_row]

Icon Иконки

[fruitful_ibox_row]
[fruitful_ibox icon=»fa-camera» icon_position=»center» column=»ffs-two-one» title=»Title 1″]Lorem ipsum dolor sit amet.[/fruitful_ibox]
[fruitful_ibox icon=»fa-cloud» icon_position=»center» column=»ffs-two-one» title=»Title 2″ last=»true»]Lorem ipsum dolor sit amet.[/fruitful_ibox]
[/fruitful_ibox_row]

[fruitful_ibox_row]
[fruitful_ibox icon="fa-camera" icon_position="center" column="ffs-two-one" title="Title 1"]Lorem ipsum dolor sit amet.[/fruitful_ibox]
[fruitful_ibox icon="fa-cloud" icon_position="center" column="ffs-two-one" title="Title 2" last="true"]Lorem ipsum dolor sit amet.[/fruitful_ibox]
[/fruitful_ibox_row]

Separator Разделительная линия

 

 

 

Атрибуты

  • height = “”
  • id = “”
  • style = “”
    Пример
    [fruitful_sep]
[fruitful_sep]

Alert Предупреждения

 

 

 

 Атрибуты

  • type = “alert-block, alert-success, alert-info, alert-danger “
  • id = “”

Type Тип

[fruitful_alert type=»alert-block»]Измените информацию и попробуйте еще[/fruitful_alert]

[fruitful_alert type="alert-block"]Измените информацию и попробуйте еще[/fruitful_alert]

[fruitful_alert type=»alert-success»]Измените информацию и попробуйте еще[/fruitful_alert]

[fruitful_alert type="alert-success"]Измените информацию и попробуйте еще[/fruitful_alert]

[fruitful_alert type=»alert-info»]Измените информацию и попробуйте еще[/fruitful_alert]

[fruitful_alert type="alert-info"]Измените информацию и попробуйте еще[/fruitful_alert]

[fruitful_alert type=»alert-danger»]Измените информацию и попробуйте еще[/fruitful_alert]

[fruitful_alert type="alert-danger"]Измените информацию и попробуйте еще[/fruitful_alert]

Progress bar Полоска прогресса

 

 

 

Атрибуты

  • type = “bar-success, bar-info, bar-warning, bar-danger”
  • id = “”
  • active = “”
  • striped = “”
  • width = “”

Type Тип

[fruitful_pbar][fruitful_bar type=»bar-success» width=»60%»][/fruitful_bar][/fruitful_pbar]

[fruitful_pbar][fruitful_bar type="bar-success" width="60%"][/fruitful_bar][/fruitful_pbar]

[fruitful_pbar][fruitful_bar type=»bar-info» width=»70%»][/fruitful_bar][/fruitful_pbar]

[fruitful_pbar][fruitful_bar type="bar-info" width="70%"][/fruitful_bar][/fruitful_pbar]

[fruitful_pbar][fruitful_bar type=»bar-warning» width=»80%»][/fruitful_bar][/fruitful_pbar]

[fruitful_pbar][fruitful_bar type="bar-warning" width="80%"][/fruitful_bar][/fruitful_pbar]

[fruitful_pbar][fruitful_bar type=»bar-danger» width=»90%»][/fruitful_bar][/fruitful_pbar]

[fruitful_pbar][fruitful_bar type="bar-danger" width="90%"][/fruitful_bar][/fruitful_pbar]

Stripped В виде спиралей

[fruitful_pbar stripped=»true»][fruitful_bar type=»bar-danger» width=»90%» ][/fruitful_bar][/fruitful_pbar]

[fruitful_pbar stripped="true"][fruitful_bar type="bar-danger" width="90%" ][/fruitful_bar][/fruitful_pbar]

Active Анимированный

[fruitful_pbar active=»true» stripped=»true»][fruitful_bar type=»bar-danger» width=»60%» ][/fruitful_bar][/fruitful_pbar]

[fruitful_pbar active="true" stripped="true"][fruitful_bar type="bar-danger" width="60%" ][/fruitful_bar][/fruitful_pbar]

Button — Кнопки

 

 

 

Атрибуты

  • size = “default, mini, small, large”
  • color = “default, primary, info, success, warning, danger, inverse”
  • type = “link, button, input, submit”
  • state = “active, disabled”
  • text_color = “#fff”
  • icon = “fa-check-square-o” full list of Font Awesome icons”
  • icon_position = “left, right”
  • link = “#”

Size -Размер

[fruitful_btn]ЖМИ![/fruitful_btn]

[fruitful_btn]ЖМИ![/fruitful_btn]

[fruitful_btn size=»mini»]ЖМИ![/fruitful_btn]

[fruitful_btn size="mini"]ЖМИ![/fruitful_btn]

[fruitful_btn size=»small»]ЖМИ![/fruitful_btn]

[fruitful_btn size="small"]ЖМИ![/fruitful_btn]

[fruitful_btn size=»large»]ЖМИ![/fruitful_btn]

[fruitful_btn size="large"]ЖМИ![/fruitful_btn]

Color Цвет кнопки

[fruitful_btn color=»default»]ЖМИ![/fruitful_btn]

[fruitful_btn color="default"]ЖМИ![/fruitful_btn]

[fruitful_btn color=»primary»]ЖМИ![/fruitful_btn]

[fruitful_btn color="primary"]ЖМИ![/fruitful_btn]

[fruitful_btn color=»info»]ЖМИ![/fruitful_btn]

[fruitful_btn color="info"]ЖМИ![/fruitful_btn]

[fruitful_btn color=»success»]ЖМИ![/fruitful_btn]

[fruitful_btn color="success"]ЖМИ![/fruitful_btn]

[fruitful_btn color=»warning»]ЖМИ![/fruitful_btn]

[fruitful_btn color="warning"]ЖМИ![/fruitful_btn]

[fruitful_btn color=»danger»]ЖМИ![/fruitful_btn]

[fruitful_btn color="danger"]ЖМИ![/fruitful_btn]

[fruitful_btn color=»inverse»]ЖМИ![/fruitful_btn]

[fruitful_btn color="inverse"]ЖМИ![/fruitful_btn]

Type Тип кнопки

[fruitful_btn type=»link»]ЖМИ![/fruitful_btn]

[fruitful_btn type="link"]ЖМИ![/fruitful_btn]

[fruitful_btn type=»button»]ЖМИ![/fruitful_btn]

[fruitful_btn type="button"]ЖМИ![/fruitful_btn]

[fruitful_btn type=»input»]ЖМИ![/fruitful_btn]

[fruitful_btn type="input"]ЖМИ![/fruitful_btn]

[fruitful_btn type=»submit»]ЖМИ![/fruitful_btn]

[fruitful_btn type="submit"]ЖМИ![/fruitful_btn]

Icon Вид кнопки

[fruitful_btn icon=»fa-check-square-o» size=»large»]ЖМИ![/fruitful_btn]

[fruitful_btn icon="fa-check-square-o" size="large"]ЖМИ![/fruitful_btn]

Link Прописываем ссылку

[fruitful_btn link=»http://color4you.ru»]ЖМИ![/fruitful_btn]

[fruitful_btn link="http://color4you.ru"]ЖМИ![/fruitful_btn]

по материалам http://plugins.fruitfulcode.com/shortcodes

Добавить комментарий