Привет ! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress ! Сегодня вы узнаете как можно очень просто и быстро сделать на своём сайте вкладки. Вы сможете сделать любое количество вкладок. Вкладки отображаются в специальном контейнере. Вы сможете делать как горизонтальные, так и вертикальные вкладки. Вы сможете изменять CSS стили вкладок.
Делать вкладки мы будет с помощью супер популярного и супер полезного плагина Shortcodes Ultimate. Установить данный плагин вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
Кстати, данный плагин предназначен не только для создания вкладок. С помощью данного плагина вы сможете создавать более 40 различных функций для своего сайта. Данный плагин мы уже разбирали, как настроить плагин и как с ним работать, об этом можете почитать здесь.
Далее, после установки и активации плагина, перейдите на страницу редактирования записи или страницы, куда вы хотите добавить вкладки со своим содержимым. В визуальном редакторе у вас появится новая кнопка – Вставить шорткод. Нажмите на данную кнопку.
Далее, у вас откроется окно с функциями плагина. Выберите и нажмите на вкладку – Вкладки.
Далее, у вас откроется окно для создания вкладок. Здесь вы сможете настроить вкладки:
– Стиль, имеется один стиль по умолчанию. В конце записи вы узнаете как менять CSS стили вкладок.
– Активная вкладка, укажите какая вкладка будет активная по умолчанию, то есть вкладка будет сразу открыта при открытии страницы.
– Вертикально, если указано НЕТ, то вкладки будут отображаться горизонтально.
– Класс, можно добавить дополнительный CSS класс.
– Содержимое, здесь отображается шорткод, который вы добавите в содержание страницы.
– В конце нажмите на кнопку – Вставить шорткод.
Далее, у вас на странице редактирования появится шорткод. Вам нужно разложить шорткод так, чтобы каждый элемент отображался в отдельной строке. Так вам будет удобней вставлять своё содержание в каждую вкладку. Вы сможете добавлять в вкладки любое содержание, текст, видео, фото, аудио, веб-элементы и т.д. Также вам нужно указать свои заголовки для каждой вкладки. В конце обновите или опубликуйте страницу. На сайте у вас будут отображаться готовые вкладки.
Как менять CSS стили вкладок
Далее, чтобы изменить стили вкладок, перейдите на страницу: Шорткоды – Примеры. На странице “Основные примеры” нажмите на вкладку – Вкладки, вертикальные вкладки, якори вкладок.
Далее, у вас откроется окно с примерами. Спуститесь в самый низ, в последнем примере “Custom styles” нажмите на кнопку – Получить код.
Далее, в открывшемся окне, скопируйте CSS стили вкладок, как показано на скриншоте.
Далее, перейдите на страницу: Шорткоды – Настройки – Произвольный CSS. Вставьте в чёрное поле CSS стили, которые вы скопировали из примера. В CSS коде вставьте свои html коды цветов и сохраните стили, нажав внизу на кнопку – Save changes.
Далее, снова перейдите на страницу примеров вкладок, в самый низ страницы. Теперь вам нужно только скопировать шорткод примера, вставить его на страницу, изменить содержание и заголовки.
Далее, скопированный шорткод примера вставляете на страницу редактирования записи или страницы. Указываете свои заголовки и содержание. Элементы шорткода лучше распределить по отдельным строкам. Обновите или опубликуйте страницу.
Всё готово ! На сайте будут отображаться готовые вкладки с вашими цветами, которые вы изменили в CSS стилях.
Остались вопросы ? Напиши комментарий ! Удачи !
Илья, а можно в шорткоде, который вставлен с помощью этого плагина уменьшить пробел между строчками? У меня очень большие получились, а SiteOriginCSS их не редактирует. Такой шорткод получился.
Ой, а он опубликовывается, как на сайте – сам код не показать Вам
Почему SiteOrigin их не редактирует?
А, честно говоря, я и не знаю – разные вариации пробовала, не работает именно в шорткоде Список. В шорткоде Меню все изменяется.
При редактировании в SiteOrigin, когда курсор мыши наводите на список, он выделяется для редактирования?
Да, пишет .textwidget.
Но при изменении margin в соседних колонках, где помещен текст через шорткод меню, отступы между строк меняются, а здесь – нет.
Шорткоды – Настройки – Произвольный CSS код, лучше туда стили добавить. Можно посмотреть файл shortcodes.css, чтобы увидеть стили по умолчанию. Вручную знаете как стили менять? Правой кнопкой мыши жмёте по элементу, в открывшемся окне жмите Исследовать элемент (в Яндекс), Посмотреть код (в Google). Справа откроется окно редактора кода, там будут указаны CSS стили. Вот оттуда можно скопировать стили списка и добавить к ним свои, если не указаны нужные. Там может не быть стилей, тогда файл стилей плагина нужно смотреть, там искать.