Блог по продвижению сайтов Блог по SEO

Плагин WordPress Post Tabs - красивые вкладки (табы).

Просмотров: 12980

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

вкладки вордпресс

Проще всего разместить разную информацию в разных вкладках (так называемых "табах"). То есть у вас на странице будут отображаться аккуратные информативные закладки (вроде страниц в Excel) плюс какая-то общая информация. А при переходе по закладкам - открывается соответствующая информация.

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

Вкладки и табы WordPress

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

Как организовать подобные закладки в WordPress?

Проще всего это сделать специализированным плагином, который называется WordPress Post Tabs.
Для этого нужно установить его из репозитория.

Подробная статья "Как устанавливать плагины на WordPress"

После установки плагина достаточно будет в редакторе кликнуть на кнопку и ввести названия для вкладок. Естественно, поместив нужные тексты внутри шорткодов: [wptab name='название вкладки'] Текст для вкладки [/wptab]

Вот так:

Шорткоды Post Tabs

Конечный шорткод [end_wptabset] обозначает конец зоны действия вкладок. И любой текст, стоящий после него, будет показываться на всех вкладках. Это удобно, если вам нужно разместить какую-то общую информацию.

Универсальный плагин для табов

Я сейчас использую для оформления страниц вот такой плагин-комбайн Shortcodes Ultimate.

Shortcodes Ultimate

Почитайте лучшие плагины для WordPress я там чуть подробнее писал о нем и других мастхев плагинах.

Читайте также:  Транслитерация для поисковиков Яндекс и Google или как написать английскими буквами русские слова в ЧПУ ссылках

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

Пример вкладок

Имя вкладкиИмя вкладкиИмя вкладки
Содержимое вкладки 1
Содержимое вкладки 2
Содержимое вкладки 3

и вертикально:

Имя вкладкиИмя вкладкиИмя вкладки
Содержимое вкладки 1
Содержимое вкладки 2
Содержимое вкладки 3

Полезные цитаты: Работники работают ровно столько, чтобы их не уволили. А наниматели платят лишь столько, чтобы работники не уволились. Вполне закономерно, что большинство работников ни к чему не стремится.

Блог — Сергея Арсентьева 📈
image
Сергей Арсентьев
Всего материалов на сайте: 239
Активных комментариев: 3 500
Работает онлайн: 10.6 лет
Читателей за это время: 2 465 946
Я в соцсетях —
Фото
Бесплатный видеокурс для начинающих. Что такое фриланс, можно ли на нем зарабатывать и сколько?
Бесплатно Подробнее
Фото
Бесплатная мини книга для тех, кто хочет заказать сайт, но растерялся во множестве CMS и вариантов выбора.
Бесплатно Подробнее
Фото
Пошаговый видеокурс "Как работать в Опенкарт" с уроками по добавлению товаров и статей.
Комментариев 3
  • WebSuccess
    WebSuccess

    У меня после установки этого плагина появились лишние br (перед табами), в статье и коде сайта всё чисто 100%, софтом искал в плагине, все br которые там нашел удалил - толку 0, беда просто с ним.

    Комментировать
    • Сергей Арсентьев

      Попробуйте плагин Shortcodes Ultimate - там вкладки одна из его опций.
      Просто супер работает, я сейчас только с ним все и делаю :yes:

      Комментировать
      • WebSuccess
        WebSuccess

        Решил проблему с помощью margin-top: -50px;
        Может поможет кому-то)

        Комментировать
Смотреть еще комментарии
Добавить свой комментарий