Отличный и легкий плагин WordPress, который украсит сайт разными фишками внутри записи или страницы. Если интересен плагин Elementor, но он кусается своим весом и медленной загрузкой — Shortcodes Ultimate как вариант.
Посмотрим, что может Shortcodes Ultimate и вставим в эту статью все шорткоды для наглядности.
Заголовок
Можно: менять размер шрифта, отступа, различные красивые шаблоны (платные), присвоить якорь и CSS.
Пример бесплатной темы шорткода «Заголовок»:
Размер: 13
[su_heading]Текст заголовка[/su_heading]
Размер: 20
[su_heading size=»20″]Текст заголовка[/su_heading]
Вкладки
Вкладки можно настроить стандартно горизонтально и вертикально. В горизонтальном можно включить «скрол» для мобильной версии.
Пример горизонтальной вкладки с включенным скором для мобилок:
[su_tabs mobile=»scroll»][su_tab title=»Имя 1 вкладки» disabled=»no» anchor=»» url=»» target=»blank» class=»»]Содержимое вкладки первой[/su_tab] [su_tab title=»Имя 2 вкладки» disabled=»no» anchor=»» url=»» target=»blank» class=»»]Содержимое вкладки номер два[/su_tab] [su_tab title=»Имя 3 вкладки» disabled=»no» anchor=»» url=»» target=»blank» class=»»]Содержимое вкладки последней[/su_tab][/su_tabs]
Вертикальные вкладки:
[su_tabs vertical=»yes»][su_tab title=»Имя вкладки №1″ disabled=»no» anchor=»» url=»» target=»blank» class=»»]Содержимое 1 вкладки[/su_tab] [su_tab title=»Имя вкладки номер два» disabled=»no» anchor=»» url=»» target=»blank» class=»»]Содержимое второй вкладки[/su_tab] [su_tab title=»Имя третьей вкладки» disabled=»no» anchor=»» url=»» target=»blank» class=»»]Содержимое вкладки самой нижней :)[/su_tab][/su_tabs]
Вкладка
Еще какая-то вкладка:
[su_tab]Содержимое вкладки[/su_tab]
Вот я ее вставил, но ничего не отображается. Хм.
Спойлер
Вот такие можно вставить спойлеры:
[su_spoiler title=»Заголовок стильного спойлера» style=»fancy» icon=»arrow»]Скрытое содержимое стильного спойлера с иконкой «стрелка».[/su_spoiler]
[su_spoiler title=»Заголовок спойлера со стилем ‘по умолчанию'» icon=»chevron»]Скрытое содержимое спойлера со стилем «по умолчанию» с иконкой «уголок».[/su_spoiler]
[su_spoiler title=»Заголовок спойлера со стилем ‘простой'» open=»yes» style=»simple» icon=»caret»]Содержимое спойлера можно настроить стандартно раскрытым. Этот спойлер я настроил со стилем «простой» с иконкой «треугольник». Но в «простом» иконка не отображается :)[/su_spoiler]
Аккордеон
Аккордеон, он же баян, он же гармошка 🙂 Тот же спойлер, но он автоматизирован — при открытии одного из спойлеров, все другие спойлеры закрываются в пределах аккордеона.
Настроек кроме CSS — нет.
[su_accordion][su_spoiler title=»Скрытый текст» open=»no» style=»default» icon=»plus» anchor=»» anchor_in_url=»no» class=»»]Скрытое содержимое первого спойлера аккордеона[/su_spoiler] [su_spoiler title=»Кликни меня» open=»no» style=»default» icon=»plus» anchor=»» anchor_in_url=»no» class=»»]Скрытое второе содержимое[/su_spoiler] [su_spoiler title=»Скрытый текст тоже кликни :)» open=»no» style=»default» icon=»plus» anchor=»» anchor_in_url=»no» class=»»]Скрытое содержимое №3[/su_spoiler][/su_accordion]
ПС. Внутрь аккордеона можно вставлять спойлеры, описанные выше и с разными стилями 🙂
[su_accordion][su_spoiler title=»Заголовок стильного спойлера» style=»fancy» icon=»arrow»]Скрытое содержимое стильного спойлера с иконкой «стрелка».[/su_spoiler]
[su_spoiler title=»Заголовок спойлера со стилем ‘по умолчанию'» icon=»chevron»]Скрытое содержимое спойлера со стилем «по умолчанию» с иконкой «уголок».[/su_spoiler][/su_accordion]
Разделитель
Имеет 4 стиля: сплошной, точки, тире, раздвоенный. Можно прикрепить штуку к нему. Настройка размера и цвета присутствует.
Двойной
[su_divider top=»no» divider_color=»#b8bbe8″ link_color=»#e24d76″]
Тире плюс ссылка
[su_divider style=»dashed» divider_color=»#b8bbe8″ link_color=»#e24d76″]
Пробел
Настроим большой пробел на 250 пикселей, но можно и на 800 !
[su_spacer size=»250″]
Выделитель
[su_highlight]Выделитель[/su_highlight], пожалуй, самый интересный штук в этих шорткодах. Ну [su_highlight background=»#ffbc5e»]Посмотрите[/su_highlight], как красиво все сразу становиться 🙂
Ярлык
[su_label type=»important»]Ярлык[/su_label] — примерно та же штука, но там значит, есть всего несколько стилей и в зависимости от стиля меняется цвет. Красненький — называется «Важно».
[su_label type=»success»]Успех[/su_label]
[su_label type=»warning»]Внимание[/su_label]
[su_label]По умолчанию[/su_label] и [su_label type=»black»]Черный[/su_label]
Цитата
[su_quote cite=»Имя автора цитаты»]Цитата собственной персоной. Обычно содержит несколько строк :)[/su_quote]
Буквица
[su_dropcap]Бу[/su_dropcap]квица с дизайном по умолчанию.
[su_dropcap style=»flat»]М[/su_dropcap]ожно вставлять несколько буков, но здесь я вставил одну, плюс изменил стиль на «плоский».
[su_dropcap style=»light»]С[/su_dropcap]ветлый стиль.
[su_dropcap style=»simple»]П[/su_dropcap]ростой стиль.
[su_dropcap size=»1″]К[/su_dropcap]роме этого можно менять размер.
Колонки
[su_row][su_column size=»1/2″ center=»no» class=»»]Содержимое колонки №1. Удобная штука. В мобильной версии вторая может перенестись вниз.[/su_column] [su_column size=»1/2″ center=»no» class=»»]Содержимое второй колонки. В колонки я даже картинки и списки иногда вставлял :)[/su_column][/su_row]
Колонка
[su_column]Содержимое колонки 1/2[/su_column]
несколько колонок нужно оборачивать в шорткод su_row:
[su_row][su_column size=»1/5″]Содержимое колонки 1/5[/su_column][su_column size=»1/5″]Содержимое колонки 1/5[/su_column][su_column size=»1/5″]Содержимое колонки 1/5[/su_column][su_column size=»1/5″]Содержимое колонки 1/5[/su_column][su_column size=»1/5″]Содержимое колонки 1/5[/su_column][su_column size=»1/5″]Содержимое колонки 1/5[/su_column][su_column size=»1/5″]Содержимое колонки 1/5[/su_column][su_column size=»1/5″]Содержимое колонки 1/5[/su_column][/su_row]
Список
[su_list icon=»icon: music» icon_color=»#3ef12a» indent=»3″]
- Элемент списка
- Элемент списка
- Элемент списка
[/su_list]
Кнопка
[su_button target=»blank» style=»3d» title=»Атрибут Заголовка»]Текст кнопки, стиль 3D[/su_button]
[su_button url=»#» desc=»Описание»]Стиль — по умолчанию [/su_button]
[su_button url=»#» style=»flat» radius=»round» icon=»icon: bookmark»]Стиль — плоский, радиус — круглый[/su_button]
Услуга
[su_service icon_color=»#87e3ff»]Описание услуги, услуги описание. Курьер — доставка, доставка — курьер, скидка![/su_service]
Блок
[su_box box_color=»#a5c3f0″ radius=»20″]Содержимое блока, блока содержимого. Могу схлопотать и бан от яндекса под названием «Баден-Баден», за повторение-повторение :)[/su_box]
Заметка
[su_note note_color=»#c4e4ff»]Текст в блоке «заметка». Из настроек — скругление в 3 пикселя и цвет.[/su_note]
Развернуть
Уникальный шорткод. Я такого нигде не встречал 🙂
[su_expand more_text=»Показать больше текста мать вашу!» link_style=»button» link_align=»center» more_icon=»icon: refresh» less_icon=»icon: rotate-right»]Этот текстовый блок может быть развернут[/su_expand]
Лайтбокс
[su_lightbox src=»https://www.youtube.com/watch?v=1rENnKECnfs»]Нажмите здесь, чтобы открыть лайтбокс с видосиком[/su_lightbox]
[su_lightbox type=»image» src=»https://borodash.ru/wp-content/uploads/2018/07/img_4059.jpg»]Нажмите здесь, чтобы открыть лайтбокс с картинкой[/su_lightbox]
Таблица
[su_table]
| Элемент таблицы | Элемент таблицы |
| Элемент таблицы | Элемент таблицы |
| Элемент таблицы | Элемент таблицы |
| Элемент таблицы | Элемент таблицы |
[/su_table]
Таблица CSV
Не знаю почему не работает.
[su_csv_table url=»https://drive.google.com/file/d/1Z0KlSymuSOQFnSEshTwQz9VP4S_LyCLP/view?usp=sharing» responsive=»yes»]
Ссылка
Не интересно 🙂
Меню
[su_menu name=»Menu 1″ class=»menutest»]
Галерея
[su_custom_gallery source=»posts: recent» link=»post» width=»150″ height=»100″ title=»always»]
Карусель изображений
Пример с картинками из галереи:
[su_image_carousel source=»media: 579,575,576,383,54″ columns=»3″]
Пример с записями из блога:
[su_image_carousel source=»posts: recent» slides_style=»minimal» columns=»3″ dots=»no» link=»post»]
Записи
[su_posts template=»templates/teaser-loop.php» tax_term=»6″ order=»desc»]