Вкладки (табы) на 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, в некоторых шаблонах также реализованы табы в сайдбарах, в дополнительных материалах и т.д.
  • В админке, как я уже говорил, сплошь и радом.
  • В новостных блогах.
Читайте также:  Clearfy - плагин для 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] Текст общий для всех вкладок.

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

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

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

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

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

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

          Ответить

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

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

WordPress: 44.87MB | MySQL:63 | 1,836sec