Шорткод — что это?
Шорткод – это некий набор символов, заключенный в квадратные скобки, который вы можете вставить непосредственно в пост или страницу WordPress. Шорткод при этом выполнит какое то конкретное действие с контентом. Действие определяется написанным програмным кодом, соответствующим данному шорткоду.
В шорткоды Divi включены следующие элементы: кнопки, цветные поля, слайдер, блок отзывов, таблица цен, переключатель с текстом, вкладки, стилизованные списки, буквица (dropcaps), цытата, подсказки, блок «информация об авторе», защита контента паролем.
Конечно, многие из этих элементов в Divi могут быть созданы с использованием Divi Page Builder. Но если вы работаете с простой (в основном текстовой) страницей или публикацией без использования Divi Builder, шорткоды могут быть хорошим подспоръем в оформлении контента.
Приведенные ниже примеры контента с шорткодами ранее взяты с сайта Elegant Themes и дают вам представление о них.
В статье приведено подробное описание как использовать шорткоды в Divi и Extra, их параметры и примеры.
Жмите на навигационные ссылки ниже, чтобы добраться до интересующего вас элемента.
Шорткоды в Divi — перечень:
1. Кнопки
Ниже приведен скриншот, показывающий некоторые варианты кнопок, которые можно отобразить по шорткоду в Divi.
1.1. Как в Divi добавить кнопки шорткодом:
Вы можете добавить кнопку прямо с панели инструментов текстового редактора WordPress на странице или в посте (рисунок ниже). Нажмите кнопку «Add ET Button» на панели инструментов:
[button link = "http://google.com"] Текст кнопки [/button] — это стандартная кнопка
[button type = "big" color = "purple"] Текст ссылки [/ button] — это большая кнопка
[button link = "url" type = "icon" newwindow = "yes"] Текст ссылки [/ button] -это кнопка со значком
Параметры шорткода:
ссылка — URL, на который будет перенаправлен пользователь при нажатии кнопки
type — если вам нужна большая кнопка (big) или кнопка с пиктограммой (icon), вам нужно добавить этот параметр. По умолчанию используются без параметров выводятся маленькие кнопки.
color — blue, lightblue, teal, sliver, pink, black, purple, orange, green, red (большинство из них вы можете увидеть на изображении выше).
icon — download, search, refresh, question, people, warning, mail, heart, paper, notice, stats, rss
newwindow — yes (по умолчанию no) открывает новую вкладку / окно при нажатии кнопки
2. Поля
Ниже приведен пример некоторых вариантов полей, отображаемых по шорткоду в Divi.
2.1. Как добавить поля по шорткоду в Divi
Вы можете добавить поле прямо с панели инструментов редактора WordPress на странице или в посте (рисунок ниже). Нажмите кнопку «Add ET Box» на панели инструментов:
[box] Контент [/box] ( обыкновенное поле (Normal Box))
[box type = "download"] Контент [/ box] (это поле загрузки)
type — тип поля: Download, Warning, Info, Bio.
По умолчанию (если не указать параметры) выводится Normal Box (серый фон).
3. Переключатель с текстом
Ниже приведен скриншот, показывающий переключатель в открытом и закрытом виде.
3.1. Как добавить переключатель с текстом на страницу:
Вы можете добавить переключатель с панели инструментов редактора WordPress на странице или в посте (рисунок ниже) нажав на кнопку «Add ET Learn more block».
[learn_more caption = "Заголовок" state = "open"] Содержимое находится здесь [/ learn_more]
Добавьте теги шорткода на страницу и вставьте между ними контент, отображение которое должно переключаться (в примере место, где написано «Содержимое»)
Параметры шорткода:
caption — заголовок на поле (добавте параметр сaption показанный в шорткоде выше со значением »Заголовок»)
state — если вы хотите, чтобы переключатель был открыт по умолчанию, то можете добавить параметр state со значением open. По умолчанию (без параметра) переключатель закрыт.
4. Вкладки
Вкладки могут быть хорошим способом разделения контента для облегчения его восприятия.
Как они выглядят смотрите на рисунке ниже:
4.1. Как добавить вкладки в Divi шорткодом
Вы можете добавить вкладки с панели инструментов WordPress на странице или в посте (см. ниже). Для этого нажмите кнопку «Add ET Tabs» на панели инструментов:
Вам нужно будет добавить каждую вкладку. После создания (когда нажмете «ОК») вы не можете вернуться назад, Редактирование вкладок придется делать в тексте поста или страницы.
Ниже приведен сравнительно простой пример двух вкладок (Tab1, Tab2):
[tabs slidertype="top tabs"] [tabcontainer] [tabtext]Tab1[/tabtext] [tabtext]Tab 2[/tabtext] [/tabcontainer] [tabcontent] [tab] Контент 1 вкладки [/tab] [tab] Контент 2 вкладки[/tab] [/tabcontent] [/tabs]
tabs — основная область вкладки
tabcontainer — содержит фактические вкладки (т. е. [tabtext] … [/ tabtext])
tabtext — отдельные вкладки внутри tabcontainer, добавленные в порядке их появления
tabcontent — как и tabcontainer выше, этот содержит содержимое каждой вкладки (т. е. [tab] …. [/ tab])
tab — содержимое каждой вкладки, внутри tabcontent, добавляется в порядке их появления
Опции:
Единственный элемент, который имеет параметры, — это раздел tabs.
slidertype — где вы хотите, чтобы вкладки появлялись: top tabs — вверху, left tabs — слева.
fx — стиль перехода при нажатии на вкладку, варианты — slide, fade (fade задан по умолчанию, поэтому его не нужно добавлять)
5. Слайдер (текст или изображения)
Elegant Themes оставили в Divi шорткод простого слайдер для различных видов контента: текст или изображение.
Ниже приведен пример слайдера при использовании изображений:
5.1. Как добавить слайдер на страницу в Divi шорткодом
Вы можете добавить слайдер с панели инструментов WordPress на странице или в посте (см. ниже). Нажмите кнопку «Add ET Tabs» на панели инструментов и в настройках опции Slider Type выберите simple (текст), images (изображения).
Шорткод слайдера довольно сложен, поэтому я рекомендую использовать для его создания кнопку на панели инструментов.
Вам нужно будет добавить каждый слайдер. После создания (когда нажмете «ОК») вы не можете вернуться назад, Редактирование слайдера придется делать в тексте поста или страницы.
Ниже приведен сравнительно простой пример двух текстовых слайдов:
[tabs slidertype="simple" fx="slide" auto="yes" autospeed="3000"] [tab]Содержимое слайда 1[/tab] [tab]Содержимое слайда 2[/tab] [/tabs]
и двух слайдов с изображениями
[tabs slidertype="images"] [imagetab width= "undefined" height= "undefined" ] URL изображения[/imagetab] [imagetab width= "undefined" height= "undefined" ]URL изображения [/imagetab] [/tabs]
tabs — основная область слайдера
tab — содержание каждого слайда, добавленное в порядке их появления
imagetab — применяется вместо tab если вы используете тип слайдера images. Также при этом указывается дополнительные параметры (высота, ширина) . В этом случае вы должны вставить полный URL-адрес изображения в контент, а не текст.
Опции:
Единственный элемент, который имеет параметры, — это раздел tabs.
fx — указывает как слайд должен появляться / двигаться, варианты — slide, fade (fade — по умолчанию, поэтому его можно не добавлять)
slidertype — стиль содержимого слайда, значения: simple, images (если вы используете images, то [tab] становится [imagetab])
auto — автоматически перемещать слайды (по умолчанию нет)
autospeed — если вы установите auto на yes, вы можете определить скорость смены слайдов в миллисекундах (1000 — 1 секунда)
6. Информация об авторе
Как он выглядит:
6.1. Как добавить информацию об авторе в теме Divi шорткодом
Вы можете добавить шорткод с панели инструментов WordPress на странице или в посте (см. ниже): кнопкой «Add Autor Bio» на панели инструментов:
Шорткод «Информация об авторе» содержит несколько элементов.
[author] [author_image timthumb = ‘on’] URL фото автора [/ author_image] [author_info] Содержимое находится здесь [/ author_info] [/author]
Как вы можете видеть, есть основной шорткод автора, а внутри него есть несколько субшорткодов.
Например:
author_image — внутри вы размещаете URL изображения, которое будет отображено (параметр timthumb включает (on) / выключает (off) автоматическое изменение размера)
author_info — размещаете текстовое описание для автора
7. Таблица цен
Если у вас есть товар с различными схожими функциями и с несколькими ценовыми категориями, таблица цен — хороший способ их сравнить.
Ниже приведен пример как это выглядит:
7.1. Как добавить таблицу цен в Divi на страницу или пост шорткодом
Увы, вы не сможете добавить таблицу цен с панели инструментов текстового редактора WordPress на странице или в посте. Придется добавлять его вручную.
Шорткод таблицы цен имеет ряд элементов, и если вы скопируете пример ниже, это упростит вашу работу.
[pricing_table]
[pricing price="99.95" currency="$" title="Enterprise" desc="Description" moretext="join" url="url-адрес" window="new"] [feature] Контент [/feature] [feature checkmark="x"] Контент [/feature] [feature] Контент [/feature][/pricing]
[pricing price="99.95" title="Enterprise" desc="Description" moretext="join" type="big»" url="url-адрес" window=»new»] [feature] Контент [/feature] [feature checkmark="x"] Контент [/feature][feature] Контент [/feature][/pricing]
[/pricing_table]
pricing -это параметры каждого столбца
feature — каждая отдельная строчка в столбце (есть одна опция — checkmark = «x», если вы хотите крестик вместо галочки)
Опции шорткода:
price — цена, отображаемая внизу столбца;
currency — символ, который будет идти перед ценой (валюта)
title — заголовок столбца
desc — текст под заголовком
url — URL для кнопки
moretext — текст для кнопки
window — «new», если вы хотите нажать на кнопку, чтобы открыть URL в новом окне / вкладке
type — «big», если вы хотите, чтобы этот столбец выделялся.
8. Cтилизованные списки
Добавление различных значков в списки может их выделить.
У шорткода «стилизованные списки» есть три типа выделения списка: серая точка, зеленая галочка, красный крест.
Как они выглядят:
8.1. Как стилизировать списки шорткодом в Divi
Шорткод стилизованного списка используется как обертка в обычном HTML-списке. Таким образом, вы добавляете шорткод, а затем добавляете html-список (с элементами ul и li).
Примечание: поскольку в примере показан HTML, его необходимо добавить на текстовой вкладке в редакторе WordPress (НЕ на визуальной вкладке).
Ниже приведено несколько примеров, которые помогут вам понять, как это работает:
[custom_list type="dot"]
<ul>
<li>Grey Dot</li>
<li>Grey Dot 2</li>
</ul>
[/custom_list]
[custom_list type="check"]
<ul>
<li>Green Ticks</li>
</ul>
[/custom_list]
[custom_list type="x"]
<ul>
<li>Red X</li>
</ul>
[/custom_list]
Шорткод довольно прост, но вы должны помнить: для списка нужно добавить стандартные элементы ul и li внутри.
Единственным параметром для шорткода Custom List является тип, который может быть x, check или dot.
9. Столбцы
Столбцы могут быть очень удобны для разделения контента на части. Контент можно разделить на половинки, трети, четверти, одна треть / две трети, четверть / четверть / половина.
9.1. Как разделиить контент в Divi шорткодом на столбцы
Шорткод используются в качестве оболочки для остальной части вашего контента. Таким образом, вы добавляете шорткод, затем в каждый столбец шорткода добавьте контент, который должен быть в столбцк.
Обратите внимание! Для последнего столбца вы должны использовать last шорткод (например для половинки это one_half_last). Это гарантирует, что весь контент выровнен правильно и строка закрыта.
Вы можете добавлять столбцы через панель инструментов, но только на вкладке редактирования текста стандартного редактора WordPress (как показано ниже):
Половинки (2 столбца):
[one_half] Контент 1 столбец [/one_half][one_half_last] Контент 2 столбец [/one_half_last]
3 столбца:
[one_third] Контент 1 столбец [/one_third] [one_third] Контент 2 столбец [/one_third][one_third_last] Контент 3 столбец [/one_third_last]
Шорткод параметров не имеет.
10. Отзыв
Так выглядят отзыв, созданный шорткодом в Divi:
10.1. Как добавить отзыв в Divi шорткодом:
Увы, вы не сможете добавить блок отзыва с панели инструментов текствого редакторв WordPress на странице или в посте. Придется добавлять его вручную.
Ниже приведен пример шорткода:
[testimonial company="Имя компании" author="Имя автора отзыва" image="url изображения"] Содержание отзыва[/testimonial]
company — название компании или должности человека, оствляющего отзыв.
author — имя человека, дающего отзыв
image — URL изображения, которое вы хотите отобразить рядом с именем автора
сontent — содержимое отзыва
11. Подсказка
Когда вы наводите курсор мыши на текст или объект (кнопка, ссылка), появляется маленькое окно со всплывающей подсказкой:
11.1 Как добавить подсказку в Divi шорткодом
Вы не сможете добавить шорткод с панели инструментов текствого редактора WordPress на странице или в посте. Придется добавлять его вручную.
Шорткод Подсказка (tooltip) — один из самых простых. Вот пример:
Параметры шорткода «Подсказка» (tooltip):
text — текст, который будет отображаться во всплывающей подсказке
12. Защита контента паролем
Этот шорткод может быть полезен если у вас есть контент, который вы хотите показать только зарегистрированным пользователям.
Вот так выглядит защищенный контент для незарегистророванных посетителей:
12.1. Как добавить шорткодом ограничение доступа к контенту по паролю в Divi
Вы сможете добавить шорткод с панели инструментов текствого редактора WordPress на странице или в посте:
[protected] Защищаемый контент [/protected]
13. Буквица
Очень старый «школьный» способ начать предложение буквицой может добавить хороший стиль на страницу или пост.
Вот так выглядит результат работы шорткода «Буквица»:
13.1. Как добавить буквицу в Divi шорткодом
Вы сможете добавить шорткод на странице или в посте только вручную.
Шорткод Буквица (Dropcaps) относительно прост, так как имеет только один параметр. Вот пример:
Параметры шорткода «Буквица» (dropcap):
style — CSS, который вы хотите применить к контенту между тегами.
Примечание: в примере определен размер шрифта и его цвет (шестнадцатеричный код). Вы можете добавить дополнительные свойства CSS для буквицы.
14. Цитата
Хороший способ представить конкретную фразу или предложение в контенте.
Вот так выглядит цитата (шорткоды в Divi):
14.1. Как добавить шорткодом цитату в Divi
Вы сможете добавить шорткод на страницу или пост вручную.
Шорткод «цитата» является одним из самых простых. Вот пример:
[quote type="center"] Content [/quote]
У шорткода один параметр: type. Он используется для центрирования цитаты. Смотрите использование параметра в примере выше.
15.Кнопки социальных сетей
Не все эти кнопки могут работат в современных версиях Divi, поэтому я не рекомендую их использовать.
Они также довольно некрасивы, имеют разные формы и размеры.
Лично я бы порекомендовал использовать один из платных плагинов. Например Easy Social Share Buttons for WordPress..
Или Simple Share Buttons Addr и если вы хотите плагин бесплатно,
15.1. Как добавить социальные кнопки в Divi шорткодом
Если все таки вы захотите добавить кнопки социальных сетей, то можете сделать это через панель инструментов на вкладке редактирования текста классического редактора WordPress (как показано ниже).
Удачи!
Александр Коваль