Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

Категории

Рубрики

Услуги SEO копирайтера под ключ. Пишем качественные тексты.

от 950 

Настройка и сопровождение рекламного кабинета Яндекс Директ.

от 14000 

Написание постов, ведение соц сетей Ваших компаний. Формирование имиджа и контента.

от 22900 

WordPress как сделать вкладки

Чтобы добавить вкладки на страницу в WordPress, можно использовать плагины или создать собственный код. Рассмотрим каждый из методов.

  1. Добавление вкладок на страницу с помощью плагина

Один из популярных плагинов для создания вкладок на странице — это Tabby Responsive Tabs. Для его установки и настройки нужно сделать следующее:

  • Установите и активируйте плагин Tabby Responsive Tabs;
  • Создайте новую страницу в WordPress или перейдите на страницу, на которой вы хотите добавить вкладки, и откройте ее для редактирования;
  • Вставьте шорткод [tabs] и добавьте нужное количество вкладок с помощью шорткода [tab title=»Заголовок вкладки» ID=»ID вкладки»] Содержание вкладки [/tab];
  • Добавьте нужное содержимое в каждую вкладку;
  • Настройте стиль вкладок, выбрав соответствующие опции в настройках плагина.
  1. Создание вкладок на странице с помощью собственного кода

Вы также можете создать вкладки на странице при помощи HTML и CSS кода, вставив его в редактор страниц WordPress. Вот базовый пример:

<div class="tabs">
  <div class="tab">
    <input type="radio" id="tab-1" name="tab-group-1" checked>
    <label for="tab-1">Заголовок вкладки 1</label>
    <div class="content">Содержимое вкладки 1</div>
  </div>
  <div class="tab">
    <input type="radio" id="tab-2" name="tab-group-1">
    <label for="tab-2">Заголовок вкладки 2</label>
    <div class="content">Содержимое вкладки 2</div>
  </div>
</div>

Не забудьте добавить подходящие стили CSS для вкладок.

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

Поделиться:

Комментарии

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

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

Задать вопрос

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

Меню

Оставить заявку

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