Art Decoration Shortcode — плагин оформительских шорткодов, которым удобно пользоваться

Написал для себя плагин шорткодов. Я в курсе, что есть масса других плагинов с таким же функционалом, но на мой взгляд они не очень удобные или содержат слишком много лишних шоркодов. В плагине Art Decoration Shortcode собраны наиболее употребляемые шорткоды: цветные инфоблоки, кнопки с ховер-эффектами, колонки на флексе, прикольные разделители, буквица, плавающие цитаты и просто цветной текстовый блок. А еще есть удобное управление ими, да и само оформление совершенно другое. А теперь подробнее…

• ---

  Содержание
  • Инфоблоки
  • Произвольный блок
  • Шорткоды инфоблоков
  • Кнопки
  • Шорткоды кнопок
  • Колонки
  • Колонки. Внешний вид
  • Шорткоды колонок
  • Разделители
  • Простой
  • Градиент
  • Точки
  • Чёрточки
  • Зигзаг
  • Шорткоды разделителей
  • Цитаты
  • Левая цитата
  • Правая цитата
  • Цитата по центру
  • Шорткоды цитаты
  • Буквица
  • Шорткод буквицы
  • Цветной блок
  • Шорткод цветного блока
  • Размытый спойлер
  • Просто размытие
  • В комбинации с цветным блоком
  • Внутри абзаца
  • Шорткод размытого спойлера
  • Пробел
  • Без пробела
  • С пробелом в 100px
  • Шорткод пробела
  • Заключение
  • Видеообзор плагина
  • Изменения
  • Скачать плагин
  • Поддержать плагин

  ---

Инфоблоки

В разделе «Инфоблоки» находятся шорткоды для выделения текста. Каждая иконка и цвет в пункте соответствует именно тому, что будет в действительности. Например, если иконка «Лампочка» и цвет красный, то они такими будут и на реальном тексте (цвет, естественно, будет не такой радикально красный, тут скорее речь про оттенки).

Примеры блоков (текст для примера берется из бредогенератора)

Произвольный блок

Стандартный

С собственным цветом

Без заголовка

Шорткоды инфоблоков

[tds_warning]Здесь текст[/tds_warning]
[tds_council]Здесь текст[/tds_council]
[tds_note]Здесь текст[/tds_note]
[tds_info]Здесь текст[/tds_info]
[ads_custom_box title="Здесь заголовок" color_border="#05e818"]Здесь текст[/ads_custom_box]

Кнопки

Скорее одна кнопка, но к ней можно применить разные ховер-эффекты (анимашки при наведении курсора мыши). 12 (!) разных эффектов, их надо просто «пощупать», чтобы понять насколько они прикольные. А еще к кнопкам можно иконки прикрутить.

Есть небольшие моменты. Все ховер-эффекты используют «жесткие» размеры, а потому размер кнопки ограничен до 250рх, но все равно они классные.

Шорткоды кнопок

[ads_btn label_btn="Эффект Swipe" url="#" target="false" view_btn="adsbtn-swipe" icon="dashicons dashicons-admin-plugins"]
[ads_btn label_btn="Эффект Diagonal" url="#" target="false" view_btn="adsbtn-diagonal" icon="dashicons dashicons-admin-appearance"]
[ads_btn label_btn="Эффект Double" url="#" target="false" view_btn="adsbtn-double" icon="dashicons dashicons-admin-generic"]
[ads_btn label_btn="Эффект Close" url="#" target="false" view_btn="adsbtn-diagonal-close" icon="dashicons dashicons-admin-customizer"]
[ads_btn label_btn="Эффект Zoning In" url="#" target="false" view_btn="adsbtn-zoning" icon="dashicons dashicons-admin-comments"]
[ads_btn label_btn="Эффект 4 Corners" url="#" target="false" view_btn="adsbtn-4corners" icon="dashicons dashicons-welcome-learn-more"]
[ads_btn label_btn="Эффект Slice" url="#" target="false" view_btn="adsbtn-slice" icon="dashicons dashicons-controls-repeat"]
[ads_btn label_btn="Эффект Alternate" url="#" target="false" view_btn="adsbtn-alternate" icon="dashicons dashicons-cloud"]
[ads_btn label_btn="Эффект Smoosh" url="#" target="false" view_btn="adsbtn-smoosh" icon="dashicons dashicons-admin-site"]
[ads_btn label_btn="Эффект Collision" url="#" target="false" view_btn="adsbtn-collision" icon="dashicons dashicons-image-filter"]
[ads_btn label_btn="Эффект Position" url="#" target="false" view_btn="adsbtn-position-aware" icon="dashicons dashicons-star-filled"]
[ads_btn label_btn="Horizontal Overlap" url="#" target="true" view_btn="adsbtn-horizontal-overlap" icon="fa fa-coffee"]

Колонки

Обязательная вещь в подобных плагинах. В ADS (Art Decoration Shortcode) используется flex-сетка с возможностью разбиения до 5-ти колонок. Хотя можно и по разному варьировать. Есть готовые сеты, по несколько колонок

Колонки. Внешний вид

Шорткоды колонок

[ads_row]
	[ads_col col="cell"]1/2[/ads_col]
	[ads_col col="cell"]1/2[/ads_col]
[/ads_row]

[ads_row]
	[ads_col col="cell"]1/3[/ads_col]
	[ads_col col="cell"]1/3[/ads_col]
	[ads_col col="cell"]1/3[/ads_col]
[/ads_row]

[ads_row]
	[ads_col col="cell"]1/4[/ads_col]
	[ads_col col="cell"]1/4[/ads_col]
	[ads_col col="cell"]1/4[/ads_col]
	[ads_col col="cell"]1/4[/ads_col]
[/ads_row]

[ads_row]
	[ads_col col="cell"]1/5[/ads_col]
	[ads_col col="cell"]1/5[/ads_col]
	[ads_col col="cell"]1/5[/ads_col]
	[ads_col col="cell"]1/5[/ads_col]
	[ads_col col="cell"]1/5[/ads_col]
[/ads_row]

[ads_row]
	[ads_col col="cell"]1/3[/ads_col]
	[ads_col col="cell-2of3"]2/3[/ads_col]
[/ads_row]

[ads_row]
	[ads_col col="cell-3of4"]3/4[/ads_col]
	[ads_col col="cell"]1/4[/ads_col]
[/ads_row]

[ads_row]
	[ads_col col="cell-2of5"]2/5[/ads_col]
	[ads_col col="cell-3of5"]3/5[/ads_col]
[/ads_row]

[ads_row]
	[ads_col col="cell"]1/8[/ads_col]
	[ads_col col="cell-3of8"]3/8[/ads_col]
	[ads_col col="cell"]1/8[/ads_col]
	[ads_col col="cell-1of4"]1/4[/ads_col]
	[ads_col col="cell"]1/8[/ads_col]
[/ads_row]

Разделители

Разделители позволяют визуально отделить одну часть текста от другой.

Простой

Градиент

Точки

Чёрточки

Зигзаг

Шорткоды разделителей

[ads_hr hr_style="hr-solid"]
[ads_hr hr_style="hr-fade"]
[ads_hr hr_style="hr-dots"]
[ads_hr hr_style="hr-vertical-lines"]
[ads_hr hr_style="hr-zigzag"]

Цитаты

В данном случае это не штатные цитаты, а то что называется «плавающие» цитаты. Иногда полезная вещь

Выглядит это примерно так

Левая цитата

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

Правая цитата

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

Цитата по центру

Цитата с подписью

Цитата без подписи

Шорткоды цитаты

[ads-pullquote-left]Текст цитаты[/ads-pullquote-left]
[ads-pullquote-right]Текст цитаты[/ads-pullquote-right]

Буквица

Буквица — это, чаще всего, выделенная первая буква абзаца, я иногда пользуюсь. Через шорткод плагина ADS, буквица выглядит так:

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

Шорткод буквицы

[ads_dropcap]З[/ads_dropcap]десь текст абзаца

Цветной блок

Иногда бывает нужно выделить как-то текст, вот цветной бок для этого и нужен. В шорткоде можно настроить цвет фона и цвет текста

Например, светлый фон и темные буквы

И наоборот, темный фон и светлые буквы

Шорткод цветного блока

[ads_color_box color_background="#032759" color_text="#ebebeb"]Здесь текст[/ads_color_box]

Размытый спойлер

Забавная штука. Не совсем спойлер, но очень похоже. И функционал примерно тот же, смотрите сами

Просто размытие

В комбинации с цветным блоком

Внутри абзаца

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

Шорткод размытого спойлера

[ads_blur_spoiler color_blur="#ffffff"]Текст[/ads_blur_spoiler]

Пробел

Оказалось, что иногда не хватает просто пробела. Например, чтобы сделать больше разрыв между абзацами.

Без пробела

С пробелом в 100px

Шорткод пробела

[ads_space space="50"]

Заключение

Как видите, в самой статье используются только шорткоды из плагина Art Decoration Shortcode, ни одного стороннего шорткода нет.

Видеообзор плагина

Видео по управлению шорткодами смотрите ниже

Изменения

6/07/2016 v.1.0 - релиз

7/07/2016 v.1.0.2 - небольшая правка стилей

18/07/2016 v1.0.3 - исправление небольших косяков

7/09/2016 v1.1
добавлена новая кнопка с ховер-эффектом
добавлена возможность использования любых иконок в кнопках
добавлен размытый спойлер
добавлен шорткод пробела
добавлена возможность вставки в шорткод выделенного текста

15/09/2016 v.1.2.
добавлена возможность локализации, теперь 2 языка: русский и английский
исправленые ошибки: методы подключения скриптов и стилей

21/09/2016 v1.2.1
плагин добавлен в репозиторий

Скачать плагин

Пишите ваши предложения и конструктивную критику в комментариях к этой статье или к видео на моем канале WPRUSe

Плагин добавлен в репозиторий WordPress, можно скачать оттуда

Поддержать плагин

Вопросы и пожелания приветствуются! Всем удачи!

Всегда ваш, Артем!

П.С. Если вам понравился плагин, не поленитесь, жмякните на кнопку поделиться.