table-791167_640

Сделать вкладки на сайт WordPress Shortcodes Ultimate

 Привет ! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress ! Сегодня вы узнаете как можно очень просто и быстро сделать на своём сайте вкладки. Вы сможете сделать любое количество вкладок. Вкладки отображаются в специальном контейнере. Вы сможете делать как горизонтальные, так и вертикальные вкладки. Вы сможете изменять CSS стили вкладок.

 

вкладки сайт

 

 Делать вкладки мы будет с помощью супер популярного и супер полезного плагина Shortcodes Ultimate. Установить данный плагин вы сможете прямо из админ-панели WordPress. Перейдите на страницу: ПлагиныДобавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

Shortcodes Ultimate

 

 Кстати, данный плагин предназначен не только для создания вкладок. С помощью данного плагина вы сможете создавать более 40 различных функций для своего сайта. Данный плагин мы уже разбирали, как настроить плагин и как с ним работать, об этом можете почитать здесь.

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

 

запись редактор

 

 Далее, у вас откроется окно с функциями плагина. Выберите и нажмите на вкладку — Вкладки.

 

вкладки шорткод

 

 Далее, у вас откроется окно для создания вкладок. Здесь вы сможете настроить вкладки:

 

— Стиль, имеется один стиль по умолчанию. В конце записи вы узнаете как менять CSS стили вкладок.

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

— Вертикально, если указано НЕТ, то вкладки будут отображаться горизонтально.

— Класс, можно добавить дополнительный CSS класс.

— Содержимое, здесь отображается шорткод, который вы добавите в содержание страницы.

В конце нажмите на кнопку — Вставить шорткод.

 

настройка вкладки настройки вкладки

 

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

 

шорткод запись

 

 

Как менять CSS стили вкладок

 

 Далее, чтобы изменить стили вкладок, перейдите на страницу: ШорткодыПримеры. На странице «Основные примеры» нажмите на вкладку — Вкладки, вертикальные вкладки, якори вкладок.

 

пример вкладки

 

 Далее, у вас откроется окно с примерами. Спуститесь в самый низ, в последнем примере «Custom styles» нажмите на кнопку — Получить код.

 

пример вкладки стиль

 

 Далее, в открывшемся окне, скопируйте CSS стили вкладок, как показано на скриншоте.

 

стили вкладки

 

 Далее, перейдите на страницу: ШорткодыНастройкиПроизвольный CSS. Вставьте в чёрное поле CSS стили, которые вы скопировали из примера. В CSS коде вставьте свои html коды цветов и сохраните стили, нажав внизу на кнопку — Save changes.

 

настройки стиль

 

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

 

css стиль шорткод

 

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

 

запись шорткод

 

 Всё готово ! На сайте будут отображаться готовые вкладки с вашими цветами, которые вы изменили в CSS стилях.

 

вкладки стиль сайт

 

 Остались вопросы ? Напиши комментарий ! Удачи !

 

Сделать вкладки на сайт WordPress Shortcodes Ultimate обновлено: Август 21, 2016 автором: Илья Журавлёв
 
 

Комментарии

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


3 + 7 =



super-infa-top
Стрелка вверх