Чтобы помочь быстрее создавать сайт на WordPress темы Divi и Extra от Elegant Themes поставляются с огромным выбором функций, включая шорткоды.
t

Шорткод — что это?
Шорткод – это некий набор символов, заключенный в квадратные скобки, который вы можете вставить непосредственно в пост или страницу WordPress. Шорткод при этом выполнит какое то конкретное действие с контентом. Действие определяется написанным програмным кодом, соответствующим данному шорткоду.

Шорткоды в Divi встроены еще с самого начала создания темы и разработчики пока их оставили в текущих версиях.

В шорткоды Divi включены следующие элементы: кнопки, цветные поля, слайдер, блок отзывов, таблица цен, переключатель с текстом, вкладки, стилизованные списки, буквица (dropcaps), цытата, подсказки, блок «информация об авторе», защита контента паролем.

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

Приведенные ниже примеры контента с шорткодами ранее взяты с сайта Elegant Themes и дают вам представление о них.
В статье приведено подробное описание как использовать шорткоды в Divi и Extra, их параметры и примеры.

Жмите на навигационные ссылки ниже, чтобы добраться до интересующего вас элемента.

1. Кнопки

Ниже приведен скриншот, показывающий некоторые варианты кнопок, которые можно отобразить по шорткоду в Divi.

Кнопки шорткоды Divi

1.1. Как в Divi добавить кнопки шорткодом:

Вы можете добавить кнопку прямо с панели инструментов текстового редактора WordPress на странице или в посте (рисунок ниже). Нажмите кнопку «Add ET Button» на панели инструментов:

Как добавить Кнопки шорткоды Divi
Второй способ: вы можете ввести шорткод непосредственно в текстовую область поста / страницы:

[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.

Поля шорткоды Divi

2.1. Как добавить поля по шорткоду в Divi

Вы можете добавить поле прямо с панели инструментов редактора WordPress на странице или в посте (рисунок ниже). Нажмите кнопку «Add ET Box» на панели инструментов:

Как добавить поля шорткоды Divi
Или вы можете ввести шорткод непосредственно в текстовую область поста / страницы:

[box] Контент [/box] ( обыкновенное поле (Normal Box))

[box type = "download"] Контент [/ box] (это поле загрузки)

Параметры шорткода:
type — тип поля: Download, Warning, Info, Bio.

По умолчанию (если не указать параметры) выводится Normal Box (серый фон).

3. Переключатель с текстом

Ниже приведен скриншот, показывающий переключатель в открытом и закрытом виде.

Рисунок Переключатель с текстом ( типа "Аккордкон" )

3.1. Как добавить переключатель с текстом на страницу:

Вы можете добавить переключатель с панели инструментов редактора WordPress на странице или в посте (рисунок ниже) нажав на кнопку «Add ET Learn more block».

Скрин добавить шорткод Divi
Второй способ: вы можете ввести шорткод непосредственно в текстовую область поста или страницы:

[learn_more caption = "Заголовок" state = "open"] Содержимое находится здесь [/ learn_more]

Добавьте теги шорткода на страницу и вставьте между ними контент, отображение которое должно переключаться (в примере место, где написано «Содержимое»)

Параметры шорткода:

caption — заголовок на поле (добавте параметр сaption показанный в шорткоде выше со значением »Заголовок»)

state — если вы хотите, чтобы переключатель был открыт по умолчанию, то можете добавить параметр state со значением open. По умолчанию (без параметра) переключатель закрыт.

4. Вкладки

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

Рисунок вкладки шорткоды Divi

4.1. Как добавить вкладки в Divi шорткодом

Вы можете добавить вкладки с панели инструментов WordPress на странице или в посте (см. ниже). Для этого нажмите кнопку «Add ET Tabs» на панели инструментов:

Рисунок добавить вкладки шорткоды Divi
Шорткод контента с вкладками довольно сложен, поэтому я рекомендую использовать для его создания кнопку на панели инструментов.

Вам нужно будет добавить каждую вкладку. После создания (когда нажмете «ОК») вы не можете вернуться назад, Редактирование вкладок придется делать в тексте поста или страницы.

Ниже приведен сравнительно простой пример двух вкладок (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 шорткод простого слайдер для различных видов контента: текст или изображение.

Ниже приведен пример слайдера при использовании изображений:

Скрин слайдер шорткоды Divi

5.1. Как добавить слайдер на страницу в Divi шорткодом

Вы можете добавить слайдер с панели инструментов WordPress на странице или в посте (см. ниже). Нажмите кнопку «Add ET Tabs» на панели инструментов и в настройках опции Slider Type выберите simple (текст), images (изображения).

Рисунок добавить вкладки шорткоды Divi

Шорткод слайдера довольно сложен, поэтому я рекомендую использовать для его создания кнопку на панели инструментов.

Вам нужно будет добавить каждый слайдер. После создания (когда нажмете «ОК») вы не можете вернуться назад, Редактирование слайдера придется делать в тексте поста или страницы.

Ниже приведен сравнительно простой пример двух текстовых слайдов:

[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. Информация об авторе

Как он выглядит:

Скрин информация об авторе шорткоды Divi

6.1. Как добавить информацию об авторе в теме Divi шорткодом

Вы можете добавить шорткод с панели инструментов WordPress на странице или в посте (см. ниже): кнопкой «Add Autor Bio» на панели инструментов:

Скрин добавить информация об авторе шорткоды Divi
Также вы можете ввести шорткод непосредственно в текстовую область поста / страницы:

Шорткод «Информация об авторе» содержит несколько элементов.

[author] [author_image timthumb = ‘on’] URL фото автора [/ author_image] [author_info] Содержимое находится здесь [/ author_info] [/author]

Как вы можете видеть, есть основной шорткод автора, а внутри него есть несколько субшорткодов.
Например:
author_image — внутри вы размещаете URL изображения, которое будет отображено (параметр timthumb включает (on) / выключает (off) автоматическое изменение размера)
author_info — размещаете текстовое описание для автора

7. Таблица цен

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

крин таблица цен шорткод тема Divi

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]

В шорткоде слайда есть несколько важных частей: есть основной шорткод priceing_table, а внутри него есть несколько субшорткодов для элементов внутри него, например:
pricing​ -это параметры каждого столбца
feature — каждая отдельная строчка в столбце (есть одна опция — checkmark = «x», если вы хотите крестик вместо галочки)

Опции шорткода:

price — цена, отображаемая внизу столбца;
currency — символ, который будет идти перед ценой (валюта)
title — заголовок столбца
desc — текст под заголовком
url — URL для кнопки
moretext — текст для кнопки
window — «new», если вы хотите нажать на кнопку, чтобы открыть URL в новом окне / вкладке
type — «big», если вы хотите, чтобы этот столбец выделялся.

8. Cтилизованные списки

Добавление различных значков в списки может их выделить.
У шорткода «стилизованные списки» есть три типа выделения списка: серая точка, зеленая галочка, красный крест.
Как они выглядят:

Рисунок Cтилизованные списки шорткод Divi

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. Столбцы

Столбцы могут быть очень удобны для разделения контента на части. Контент можно разделить на половинки, трети, четверти, одна треть / две трети, четверть / четверть / половина.

Рисунок  столбцы шорткодом в тема Divi

9.1. Как разделиить контент в Divi шорткодом на столбцы

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

Обратите внимание! Для последнего столбца вы должны использовать last шорткод (например для половинки это one_half_last). Это гарантирует, что весь контент выровнен правильно и строка закрыта.

Вы можете добавлять столбцы через панель инструментов, но только на вкладке редактирования текста стандартного редактора WordPress (как показано ниже):

Рисунок как разместить столбцы шорткодом в тема Divi
Ниже приведено несколько примеров:

Половинки (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:

Рисунок Отзывы  шорткод в тема Divi

10.1. Как добавить отзыв в Divi шорткодом:

Увы, вы не сможете добавить блок отзыва с панели инструментов текствого редакторв WordPress на странице или в посте. Придется добавлять его вручную.

Ниже приведен пример шорткода:


[testimonial company="Имя компании" author="Имя автора отзыва" image="url изображения"] Содержание отзыва[/testimonial]
Параметры шорткода:
company — название компании или должности человека, оствляющего отзыв.
author — имя человека, дающего отзыв
image — URL изображения, которое вы хотите отобразить рядом с именем автора
сontent — содержимое отзыва

11. Подсказка

Когда вы наводите курсор мыши на текст или объект (кнопка, ссылка), появляется маленькое окно со всплывающей подсказкой:

Рисунок Подсказка шорткод в теме Divi

11.1 Как добавить подсказку в Divi шорткодом

Вы не сможете добавить шорткод с панели инструментов текствого редактора WordPress на странице или в посте. Придется добавлять его вручную.

Шорткод Подсказка (tooltip) — один из самых простых. Вот пример:

[tooltip text = "Текст подсказки"] Содержимое [/tooltip]

Параметры шорткода «Подсказка» (tooltip):

text — текст, который будет отображаться во всплывающей подсказке

12. Защита контента паролем

Этот шорткод может быть полезен если у вас есть контент, который вы хотите показать только зарегистрированным пользователям.

Вот так выглядит защищенный контент для незарегистророванных посетителей:

Рисунок защищенный контент в теме Divi шорткодi

12.1. Как добавить шорткодом ограничение доступа к контенту по паролю в Divi

Вы сможете добавить шорткод с панели инструментов текствого редактора WordPress на странице или в посте:

Скрин Шорткоды в Divi защита контента
Также можете добавлять шорткод вручную. Шорткод защиты контента паролем является одним из самых простых. Вот пример:

[protected] Защищаемый контент [/protected]
Параметров у шорткода нет.

13. Буквица

Очень старый «школьный» способ начать предложение буквицой может добавить хороший стиль на страницу или пост.
Вот так выглядит результат работы шорткода «Буквица»:

Рисунок буквица в теме Divi шорткод

13.1. Как добавить буквицу в Divi шорткодом

Вы сможете добавить шорткод на странице или в посте только вручную.

Шорткод Буквица (Dropcaps) относительно прост, так как имеет только один параметр. Вот пример:

[dropcap style="font-size: 60px; color: #9b9b9b;"] L [/dropcap]

Параметры шорткода «Буквица» (dropcap):

style — CSS, который вы хотите применить к контенту между тегами.

Примечание: в примере определен размер шрифта и его цвет (шестнадцатеричный код). Вы можете добавить дополнительные свойства CSS для буквицы.

14. Цитата

Хороший способ представить конкретную фразу или предложение в контенте.

Вот так выглядит цитата (шорткоды в Divi):

Рисунок цитата в теме Divi шорткод

14.1. Как добавить шорткодом цитату в Divi

Вы сможете добавить шорткод на страницу или пост вручную.

Шорткод «цитата» является одним из самых простых. Вот пример:


[quote type="center"] Content [/quote]

У шорткода один параметр: type. Он используется для центрирования цитаты. Смотрите использование параметра в примере выше.

15.Кнопки социальных сетей

Не все эти кнопки могут работат в современных версиях Divi, поэтому я не рекомендую их использовать.
Они также довольно некрасивы, имеют разные формы и размеры.

Лично я бы порекомендовал использовать один из платных плагинов. Например Easy Social Share Buttons for WordPress..
Или Simple Share Buttons Addr и если вы хотите плагин бесплатно,

Рисунок социальные кнопки в теме Divi шорткод

15.1. Как добавить социальные кнопки в Divi шорткодом

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

Скрин кнопки социальных сетей в Divi
Убедитесь, что они работают.
Задавайте вопросы, делитесь комментариями.

Удачи!
Александр Коваль

Рисунок Банер Divi WordPress Theme
Рубрики: CSS & Советы по Divi

Об авторе:

Александр Коваль

Александр Коваль

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

Share via
Send this to a friend