Вкладки (табы) на wordpress с помощью postTabs
Здравствуйте! Считаю этот пост интересным и важным, но он, к сожалению, канул в архивы. Поэтому решил дать ему новое дыхание.
Сегодня речь пойдет о том, как можно создать вкладки (табы) в самом посте. Такая фишка может вам пригодится, если на одной странице нужно разместить много информации.
Итак, в двух словах, что это такое.
С табами вы уже неоднократно встречались, чаще всего в своей админке, когда переключались между визуальным редактором и html. Во вкладке «рубрики», в той же админке, также есть табы.
Вообще в Рунете активно применять табы начали сравнительно недавно, года два назад. Впрочем не только табы, но и «умные корзины», аккордеоны, галереи и другие фишки, для работы которых нужна библиотека jQuery или js скрипты.
Поэтому, конечно, для реализации подобных идей необходимо подключать саму библиотеку jQuery, но я бы рекомендовал это делать только тому, кто решил плотно работать с ней, так как дополнительные скрипты — это лишний довесок на блоге.
Поэтому:
В нашем случае мы воспользуемся простым плагином postTabs.
1. Итак, скачиваем плагин по этой ссылке
2. Разархивируйте, закачайте плагин на хостинг в папку с плагинами.
3. Далее... Заходим в админку, находим плагин, активируем его во вкладке "Плагины"
3. В админке в меню «Параметры» находим пункт posttabs.
4. Заходим в настройки плагина. Здесь основная часть настроек — это цветовое оформление вкладок:
- цвет контуров
- цвет текста и фона в активной вкладке
- цвет текста фоновый цвет в неактивной
- то же самое — при наведение
- выравнивание вкладки
Так что вы сможете подогнать цвет под дизайн своего блога. Во время этих манипуляций, справа в интерактивном окне вы сможете видеть, как изменятся цвет вкладок.
В общем, ничего сложного нет. Далее...
Другие настройки postTabs
Следующие настройки у меня стоят в позиции «Never» и «Hide-Show Tabs». Скажу честно, я не разбирался с ними, так как по умолчанию все работает прекрасно, поэтому не видел смысла копаться в остальных настройках. Кому интересно, поэкспериментируете, будет о чем писать.
Скажу только что «Display TOC» — это своего рода дополнительная навигация.
Например, пункт «At the end of the post, after everything», если его включить, будет выводить после текста ссылки на табы. Это удобно в том случае, если текст во вкладке длинный, и для того, чтобы было удобно перейти на следующую без скролинга, после текста показываются дополнительные ссылки на табы.
Как создать вкладки на странице
Для того, чтобы текст поместить во вкладку, нужно в редакторе написать квадратные скобки [ ] и между ними написать tab: название вкладки.
[tab: название вкладки] текст
Весь последующий текст будет находится в этой вкладке. Затем написать в квадратных скобках [ ] другой tab: название 2 вкладки. Последующий текст попадет во вторую вкладку и т.д.
Например: [tab: ещё одна вкладка] текст...
!!!!!! С недавнего времени я отключил этот плагин, поэтому, извиняйте, не могу продемонстрировать вам его в действии. !!!!
Вот несколько аргументов в пользу применения вкладок-табов:
- Большой по объему материал можно компактно разместить
- Вкладки выглядят интересно, они добавляют разнообразия.
- С их помощью можно организовать дополнительный материал по теме.
- Они работают без перезагрузки страницы.
ПОДПИСАТЬСЯ НА ОБНОВЛЕНИЯ БЛОГА И ПОЛУЧАТЬ НОВЫЕ СТАТЬИ, АУИДО И ВИДЕОКУРСЫ
Наиболее часто табы-вкладки встречаются:
- В современных интернет-магазинах, когда дополнительная информация по товару открывается не в отдельном окне, а тут же, без перезагрузки страницы.
- На wordpress, в некоторых шаблонах также реализованы табы в сайдбарах, в дополнительных материалах и т.д.
- В админке, как я уже говорил, сплошь и радом.
- В новостных блогах.
Автор: Игорь
Чистый звук в мире инфобизнеса
Полезный плагинчик. Спасибо.
А боковые виджеты в табах можно плагинами как-то сделать или только шаблон переделывать?
Нет, этот плагин только для постов. Если в виджетах делать табы, нужно с шаблоном работать или искать соответствующий плагин, или подключать jQuery.
Игорь супер! Спасибо большое! Скоро пригодится.
Спасибо Игорь. Были мысли на счет вкладок, но не знал как сделать. Еще раз спасибо.
Пожалуйста, Михаил!
Интересная идея с табами.
Судя по исходнику страницы, текст табов будет индексироваться поисковиками — это хорошо.
Однако как будет содержимое отображаться при печати? Думаю, бывают энтузиасты, которые печатают статьи из блогов... 🙂
Пусть энтузиасты люмают себе голову. 🙂
Каждую вкладку отдельно. И что голову ломать... 👿
Доброго времени суток.
Вот стоит такая задача. Хочу сделать страницу типа словаря или энциклопедии. В идеале вижу это тремя уровнями табов.
Первый цифры 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 выдал одну.
Значит две ленты не получится сделать. Надо искать другое решение.
Забыли написать, что в конце табов должен стоять оператор [tab:END]. Например:
[tab: вкладка 1] текст
[tab: вкладка 2] текст
[tab: вкладка 3] текст
[tab:END]
Да, спасибо. Должен стоять.
😉 в настройках плагина,есть возможность чтобы увеличивать размер шрифта во вкладках,:)
В настройках плагина — нет возможности увеличивать размер шрифта. Я думаю, что это можно сделать в файле css данного плагина.
Я уже голову сломал, как прикуртить табы в сайдбар 🙂 Может знаешь как сделать табы в сайдбаре 🙂
Только что прикрутил, но не знаю, что туда вставлять ) Поэтому снял. Сам процесс понятен. На днях напишу статью. А вообще в Интернете есть по этой теме информация.
Игорь, напишите, пожалуйста, пост, как на сайте создать страницы со ссылками(не карту). Так, чтобы читатель, щелкнув по рубрике, видел не анонсы на публикации, а только ссылки. А потом уже выбирал, по какой ссылке щелкнуть, чтобы увидеть нужную статью полностью. Или может, подскажете, где найти такую информацию? Движок WP.
Не знаю, Лидия. Могу предположить, что такие страницы можно сделать на основе page, когда на самой странице делается список статей рубрики, страница скрывается из верхнего меню, а ссылка на неё выводится с помощью виджета «меню» в сайдбаре. Это первое что пришло на ум. По крайне мере, я бы проверил свое предположение на практике.
Всё чётко работает. Поставил на страницу контакты.
Спасибо!!!
Какая интересная эта штука — табы. Чесно сказать, я даже не знал о них. Сейчас посмотрел и понял, на сколько же они удобные. Экономят место, да и привносят новизну в посты. Надо будет как-нибудь попробовать у себя такое сделать.
Игорь спасибо вам за интересность!
Вы вновь порадовали новинкой.
О табах знаю с ФБ — но вот о том что их применить можно и в Ворд Прессе не знала.
Установила плагин — теперь думаю мои статьи станут еще интереснее внешне.
Спасибо вам. Остаюсь с вами — как хорошо что подписана на обновления!
С ув. Т.С
Плагин простой в использовании.
Знакомому своему делал блог под заказ, как раз использовал этот плагин. Очень хорошая вещь.
Мне тоже сразу понравился данный плагин.
С его помощью реализовала магазин цифровых товаров.
Удобно: все разделы товаров перед глазами в одной-двух строчках. 🙂
Спасибо! Очень удобный плагин, то что искал, уже его использовал!
А как реализовать несколько табов в каждом из «главных» табов?
Наверное, такого нет. Я особо не вникал, как есть в простейшей форме, так и использую.
Здравствуйте, Игорь.
Классный плагин. Поставил и пытаюсь настроить. Вот только не понял, как завершить все вкладки. То есть чтобы было так: основной текст => 3 вкладки => опять основной текст.
Если я ставлю после окончания третьей вкладки tab: END, то продолжение основного текста тоже прячется в четвертую вкладку.
Как бороться? Подскажите, если не сложно.
Спасибо!
Я также не знаю. Вообще, я уже не пользуюсь этим плагином. Снес. Мало применялся, хотя одно время употреблял.
Спасибо за ответ.
Я уже сам разобрался ))
Оказывается если между tab: и END есть пробел, то плагин делает еще одну вкладку, а если пробела нет, то закрывает все вкладки.
Игорь, а почему плагин Posttabs в действии не сработал?
Разве мы не должны были увидеть вкладки с названиями курсов?
А у Вас все курсы друг под другом, да еще [tab: ...} видно. 😀
Сейчас исправлю. Я отключил Posttabs. Редко им пользуюсь, уже не вижу смысла. На некоторых страницах остались [tab: . Сейчас внесу поправки в текст.
День добрый! Подскажите как поместить контент страницы или страницу в вкладку? Заранее спасибо!
Я описал в статье. Что-то ещё добавить не могу, тем более, что сейчас плагин уже отключил, так как не пользуюсь им.
Юрий, здравствуйте!
Я поместила на свою страничку карты сайта сразу несколько других.
ни, конечно, требуют доработки, но смысл понятен:
[tab: ЗАГ1 ] Техт 1 [tab: ЗАГ2 ] Техт 2 [tab: ЗАГ3 ] Техт 3 ... [tab:END] Текст общий для всех вкладок.
На вкладки я странички вставляла, скопировав их код на своих сайтах.
Попробуйте! 😀
Спасибо!!!!! ( Вы имете в виду скопировать содержание страницы)
Ну да, каждую страничку копирую и вставляю во вкладку. 💡