Вкладки (табы) на wordpress с помощью postTabs


Игорь | 2013-11-06 | 39 комментариев

Здравствуйте! Считаю этот пост интересным и важным, но он, к сожалению, канул в архивы. Поэтому решил дать ему новое дыхание.

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

Итак, в двух словах, что это такое.

С табами вы уже неоднократно встречались, чаще всего в своей админке, когда переключались между визуальным  редактором и html. Во вкладке «рубрики», в той же админке, также есть табы.

Вообще в Рунете  активно применять табы начали сравнительно недавно, года два назад. Впрочем не только табы, но и «умные корзины», аккордеоны, галереи и другие фишки, для работы которых нужна библиотека jQuery или js скрипты.

Поэтому, конечно, для реализации подобных идей необходимо подключать саму библиотеку jQuery, но я бы рекомендовал это делать только тому, кто решил плотно работать с ней, так как дополнительные скрипты — это лишний довесок на блоге.

Поэтому:

В нашем случае мы воспользуемся простым плагином postTabs.

Вкладки (табы) на wordpress с помощью postTabs

1. Итак, скачиваем плагин по этой ссылке

2. Разархивируйте, закачайте плагин на хостинг в папку с плагинами.

3. Далее... Заходим в админку, находим плагин, активируем его во вкладке "Плагины"

3. В админке в меню «Параметры» находим пункт posttabs.

4. Заходим в настройки плагина. Здесь основная часть настроек — это цветовое оформление вкладок:

  • цвет контуров
  • цвет текста и фона в активной вкладке
  • цвет текста фоновый цвет в неактивной
  • то же самое — при наведение
  • выравнивание вкладки

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

Вкладки (табы) на wordpress с помощью postTabs

В общем, ничего сложного нет. Далее...

Другие настройки postTabs

Следующие настройки у меня стоят в позиции «Never» и «Hide-Show Tabs». Скажу честно, я не разбирался с ними, так как по умолчанию все работает прекрасно, поэтому не видел смысла копаться в остальных настройках. Кому интересно, поэкспериментируете, будет о чем писать.

Скажу только что  «Display TOC» — это своего рода дополнительная навигация.

Например, пункт «At the end of the post, after everything», если его включить, будет выводить после текста ссылки на табы. Это удобно в том случае, если текст во вкладке длинный, и для того, чтобы было удобно перейти на следующую без скролинга, после текста показываются дополнительные ссылки на табы.

Читайте также:  Какие профессии будут востребованы в ближайшее время?
Как создать вкладки на странице

Для того, чтобы текст поместить во вкладку, нужно в  редакторе написать квадратные скобки [  ] и между ними написать tab: название вкладки.

[tab: название вкладки] текст

Весь последующий текст будет находится в этой вкладке. Затем написать в квадратных скобках [  ] другой tab: название 2 вкладки. Последующий текст попадет во вторую вкладку и т.д.

Например: [tab: ещё одна вкладка] текст...

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

Вот несколько аргументов в пользу применения вкладок-табов:

  • Большой по объему материал можно компактно разместить
  • Вкладки выглядят интересно, они добавляют разнообразия.
  • С их помощью можно организовать дополнительный материал по теме.
  • Они работают без перезагрузки страницы.

ПОДПИСАТЬСЯ НА ОБНОВЛЕНИЯ БЛОГА И ПОЛУЧАТЬ НОВЫЕ СТАТЬИ, АУИДО И ВИДЕОКУРСЫ

Наиболее часто табы-вкладки встречаются:

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

Автор: Игорь
Чистый звук в мире инфобизнеса



Комментарии (39)

  1. Андрей:

    Полезный плагинчик. Спасибо.

    А боковые виджеты в табах можно плагинами как-то сделать или только шаблон переделывать?

    Ответить
    • Игорь:

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

      Ответить
  2. Александр Борисов:

    Игорь супер! Спасибо большое! Скоро пригодится.

    Ответить
  3. Михаил:

    Спасибо Игорь. Были мысли на счет вкладок, но не знал как сделать. Еще раз спасибо.

    Ответить
  4. АнтонК:

    Интересная идея с табами.

    Судя по исходнику страницы, текст табов будет индексироваться поисковиками — это хорошо.

    Однако как будет содержимое отображаться при печати? Думаю, бывают энтузиасты, которые печатают статьи из блогов... 🙂

    Ответить
    • Игорь:

      Пусть энтузиасты люмают себе голову. 🙂

      Ответить
    • Галина:

      Каждую вкладку отдельно. И что голову ломать... 👿

      Ответить
  5. Андрей:

    Доброго времени суток.

    Вот стоит такая задача. Хочу сделать страницу типа словаря или энциклопедии. В идеале вижу это тремя уровнями табов.

    Первый цифры 0...9, второй латинские буквы ну и третий кириллица.

    Попытался сделать с момощью плагина postTabs, но получается ерунда полная. Сейчас это выглядит вот так: fitness.hall.by/wiki/

    Делал [tab] ... [tab: END] потом писал текст и опять делал [tab]...[tab:END] но в итоге всё сбивается в одну ленту табов и всякую ерунду.

    Если сможете подскажите пожалуйста, можно ли с помощью этого плагина сделать несколько лент табов или всё — таки надо смотреть в сторону скриптов на js?

    Ответить
    • Игорь:

      Попробуйте без [tab: END]

      Просто [tab: 1] текст. Потом [tab: 2] текст [tab: 3] текст. И так дальше.

      Мне кажется, вы именно этот момент сделали неправильно, если писали [tab] ... [tab: END]

      Ответить
      • Андрей:

        Да, именно так я и делал: [tab: 1]« текст. Потом [tab: 2] текст [tab: 3] текст. И так дальше». Для того чтобы закрыть ленту табов используется конструкция [tab: END]

        Потом я думал что можно вставить ещё один блок [tab: 1] текст. [tab: 2] текст [tab: 3] текст [tab: END]

        Но вместо того чтобы сделать две ленты wordpress выдал одну.

        Ответить
        • Игорь:

          Значит две ленты не получится сделать. Надо искать другое решение.

          Ответить
  6. Руслан:

    Забыли написать, что в конце табов должен стоять оператор [tab:END]. Например:

    [tab: вкладка 1] текст

    [tab: вкладка 2] текст

    [tab: вкладка 3] текст

    [tab:END]

    Ответить
    • Игорь:

      Да, спасибо. Должен стоять.

      Ответить
  7. allemiko:

    😉 в настройках плагина,есть возможность чтобы увеличивать размер шрифта во вкладках,:)

    Ответить
    • Игорь:

      В настройках плагина — нет возможности увеличивать размер шрифта. Я думаю, что это можно сделать в файле css данного плагина.

      Ответить
      • allemiko:

        Я уже голову сломал, как прикуртить табы в сайдбар 🙂 Может знаешь как сделать табы в сайдбаре 🙂

        Ответить
        • Игорь:

          Только что прикрутил, но не знаю, что туда вставлять ) Поэтому снял. Сам процесс понятен. На днях напишу статью. А вообще в Интернете есть по этой теме информация.

          Ответить
  8. Лидия:

    Игорь, напишите, пожалуйста, пост, как на сайте создать страницы со ссылками(не карту). Так, чтобы читатель, щелкнув по рубрике, видел не анонсы на публикации, а только ссылки. А потом уже выбирал, по какой ссылке щелкнуть, чтобы увидеть нужную статью полностью. Или может, подскажете, где найти такую информацию? Движок WP.

    Ответить
    • Игорь:

      Не знаю, Лидия. Могу предположить, что такие страницы можно сделать на основе page, когда на самой странице делается список статей рубрики, страница скрывается из верхнего меню, а ссылка на неё выводится с помощью виджета «меню» в сайдбаре. Это первое что пришло на ум. По крайне мере, я бы проверил свое предположение на практике.

      Ответить
  9. Сергей:

    Всё чётко работает. Поставил на страницу контакты.

    Спасибо!!!

    Ответить
  10. Философ:

    Какая интересная эта штука — табы. Чесно сказать, я даже не знал о них. Сейчас посмотрел и понял, на сколько же они удобные. Экономят место, да и привносят новизну в посты. Надо будет как-нибудь попробовать у себя такое сделать.

    Ответить
  11. Татьяна Румянцева:

    Игорь спасибо вам за интересность!

    Вы вновь порадовали новинкой.

    О табах знаю с ФБ — но вот о том что их применить можно и в Ворд Прессе не знала.

    Установила плагин — теперь думаю мои статьи станут еще интереснее внешне.

    Спасибо вам. Остаюсь с вами — как хорошо что подписана на обновления!

    С ув. Т.С

    Ответить
    • Игорь:

      Плагин простой в использовании.

      Ответить
  12. Александр:

    Знакомому своему делал блог под заказ, как раз использовал этот плагин. Очень хорошая вещь.

    Ответить
  13. Галина:

    Мне тоже сразу понравился данный плагин.

    С его помощью реализовала магазин цифровых товаров.

    Удобно: все разделы товаров перед глазами в одной-двух строчках. 🙂

    Ответить
  14. Vit:

    Спасибо! Очень удобный плагин, то что искал, уже его использовал!

    Ответить
  15. Vit:

    А как реализовать несколько табов в каждом из «главных» табов?

    Ответить
    • Игорь:

      Наверное, такого нет. Я особо не вникал, как есть в простейшей форме, так и использую.

      Ответить
  16. Андрей Литвиненко:

    Здравствуйте, Игорь.

    Классный плагин. Поставил и пытаюсь настроить. Вот только не понял, как завершить все вкладки. То есть чтобы было так: основной текст => 3 вкладки => опять основной текст.

    Если я ставлю после окончания третьей вкладки tab: END, то продолжение основного текста тоже прячется в четвертую вкладку.

    Как бороться? Подскажите, если не сложно.

    Спасибо!

    Ответить
    • Игорь:

      Я также не знаю. Вообще, я уже не пользуюсь этим плагином. Снес. Мало применялся, хотя одно время употреблял.

      Ответить
  17. Андрей Литвиненко:

    Спасибо за ответ.

    Я уже сам разобрался ))

    Оказывается если между tab: и END есть пробел, то плагин делает еще одну вкладку, а если пробела нет, то закрывает все вкладки.

    Ответить
  18. Галина:

    Игорь, а почему плагин Posttabs в действии не сработал?

    Разве мы не должны были увидеть вкладки с названиями курсов?

    А у Вас все курсы друг под другом, да еще [tab: ...} видно. 😀

    Ответить
    • Игорь:

      Сейчас исправлю. Я отключил Posttabs. Редко им пользуюсь, уже не вижу смысла. На некоторых страницах остались [tab: . Сейчас внесу поправки в текст.

      Ответить
  19. Юрий:

    День добрый! Подскажите как поместить контент страницы или страницу в вкладку? Заранее спасибо!

    Ответить
    • Игорь:

      Я описал в статье. Что-то ещё добавить не могу, тем более, что сейчас плагин уже отключил, так как не пользуюсь им.

      Ответить
    • Галина:

      Юрий, здравствуйте!

      Я поместила на свою страничку карты сайта сразу несколько других.

      ни, конечно, требуют доработки, но смысл понятен:

      [tab: ЗАГ1 ] Техт 1 [tab: ЗАГ2 ] Техт 2 [tab: ЗАГ3 ] Техт 3 ... [tab:END] Текст общий для всех вкладок.

      На вкладки я странички вставляла, скопировав их код на своих сайтах.

      Попробуйте! 😀

      Ответить
      • Юрий:

        Спасибо!!!!! ( Вы имете в виду скопировать содержание страницы)

        Ответить
        • Галина:

          Ну да, каждую страничку копирую и вставляю во вкладку. 💡

          Ответить

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

Ваш адрес email не будет опубликован.

Link Link Link Link Link Text text Text text Text text Text text Text text Link Link Link Link Link Text text Text text Text text Text text Text text Link Link Link Link Link Text text Text text Text text Text text Text text Link Link Link Link Link Text text Text text Text text Text text Text text Link Link Link Link Link Text text Text text Text text Text text Text text Link Link Link Link Link Text text Text text Text text Text text Text text Link Link Link Link Link Text text Text text Text text Text text Text text