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

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

к содержанию

Инфоблоки

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

Плагин шорткодов Art Decoration Shortcodes. Информационные блоки
Плагин шорткодов Art Decoration Shortcodes. Информационные блоки

 

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

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

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

Стандартный

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

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

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

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

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

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

[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 (!) разных эффектов, их надо просто «пощупать», чтобы понять насколько они прикольные. А еще к кнопкам можно иконки прикрутить.

Плагин шорткодов Art Decoration Shortcodes. Кнопки с ховерэффектами
Плагин шорткодов Art Decoration Shortcodes. Кнопки с ховерэффектами

Есть небольшие моменты. Все ховер-эффекты используют «жесткие» размеры, а потому размер кнопки ограничен до 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-ти колонок. Хотя можно и по разному варьировать. Есть готовые сеты, по несколько колонок

Плагин шорткодов Art Decoration Shortcodes. Колонки
Плагин шорткодов Art Decoration Shortcodes. Колонки
к содержанию

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

Колонка 1/2
Колонка 1/2
Колонка 1/3
Колонка 1/3
Колонка 1/3
Колонка 1/4
Колонка 1/4
Колонка 1/4
Колонка 1/4
Колонка 1/5
Колонка 1/5
Колонка 1/5
Колонка 1/5
Колонка 1/5
Колонка 1/3
Колонка 2/3
Колонка 3/4
Колонка 1/4
Колонка 2/5
Колонка 3/5
Колонка 1/4
Колонка 1/2
Колонка 1/4
Колонка 1/8
Колонка 5/8
Колонка 1/8

к содержанию

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

[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]
к содержанию

Разделители

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

Плагин шорткодов Art Decoration Shortcodes. Разделители
Плагин шорткодов Art Decoration Shortcodes. Разделители

 

к содержанию

Простой

Градиент

Точки

Чёрточки

Зигзаг

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

[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"]

Цитаты

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

 

Плагин шорткодов Art Decoration Shortcodes. Цитаты
Плагин шорткодов Art Decoration Shortcodes. Цитаты

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

к содержанию

Левая цитата

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

к содержанию

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

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

к содержанию

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

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

Никогда и ничего не просите! Никогда и ничего, и в особенности у тех, кто сильнее вас. Сами предложат и сами все дадут!
М. Булгаков, "Мастер и Маргарита"

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

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

к содержанию

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

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

Буквица

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

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

к содержанию

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

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

Цветной блок

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

Плагин шорткодов Art Decoration Shortcodes. Цветной блок
Плагин шорткодов Art Decoration Shortcodes. Цветной блок

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

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

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

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

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

к содержанию

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

[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, можно скачать оттуда

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

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

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

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