Лучшие системы табов для wordpress
С недавних пор табы стали неотъемлемою частью различных дизайнов сайтов, причем это не только касается блогов на wordpress, но и других проектов. Оно и не удивительно, решение достаточно функциональное и полезное, часто встречается в плагинах шорткодов. С его помощью вы сможете сэкономить место на странице при отображении большого количества информации. Для тех, кто не знает, что такое табы, можно использовать слова «закзаладки» / «вкладки», пользователь переключается между ними и видит разную информацию — последние записи блога, облако тегов, лучших комментаторов и т.п.
Однажды я уже рассказывал про табы в wordpress блоге — о том как реализовать их с помощью UI/Tabs jQuery. С тех пор прошло уже больше 2-х лет и в сети появилась еще парочку интересных реализаций механизмов табов.
Недавно в сети нашел подборку с табами, где выбрал парочку механизмов создания, о которых сейчас и поведаю. Не буду рассказывать подробно об установке каждого из них, поскольку это займет очень много времени, а лишь остановлюсь на главных моментах.
StereoTabs
StereoTabs — простая система табов, является частью библиотеки script.aculo.us.
Stereotabs — маленький, небольшой скрипт для легкого добавления интерактивных закладок (табов) на странице, управление простое, внешний вид приятный. Особенности:
- Загрузка скрипта происходит после страницы без вмешательства в html код. Пользователи без включенного javascript также увидят контент.
- Простота добавления — всегда пару строк кода позволит разместить табы на любой странице.
- Скрипт маленький — 82 строки кода, 2кб!
- После перезагрузки страницы активный там все равно запоминается, что весьма хорошо.
- Есть специальные эффекты (затемнение) при переключении табов — на соответствующих по дизайну сайтах смотрелось бы очень стильно.
DOMTab
Про систему табов DOMTab есть много хороших отзывов.
DOMtab это JavaScript который превращает ссылки на блоки контента в табы. Скрипт автоматически удаляет все ссылки типа «back to top» и скрывает контент всех блоков кроме первой закладки. Вы можете использовать сколько угодно табов для страницы. Из нового было добавлено, что если URL страницы указывает на какой-то из табов напрямую, то он будет подсвечиваться. Также можно определить классы и настроить ссылки типа «предыдущая» и «следующая» для навигации по табам, что иногда может очень пригодится. В целом, оригинальный такой скриптик.
Easy Tabs 1.2
Easy Tabs 1.2 — еще одна хорошая и «легкая» система для табов.
Новая версия скрипта поддерживает автосмену табов, если я правильно понял. При этом, как обычно, система совместима со своими браузерами. Кое-что из опций:
- Можно осуществлять навигацию по табам с помощью клавиши TAB.
- Доступна установка стартовой (активной) закладки.
- Поддерживается любое количество табов.
- Можно задать смену табов при наведении на них мышкой.
- Абсолютно бесплатное использование для любых (и коммерческих) проектов.
- Если отключено JavaScript будут отображаться все блоки контента.
В принципе, неплохой скрипт, понравилось как на странице с его описанием в сайдбаре для табов использовались не просто название блоков, а логотипы twitter, youtube.
Tabifier
Tabifier — еще один скрипт для табов.
Автоматически создает табы из HTML кода с помощью JavaScript. Основным особенностями являются:
- Собственно основная возможность — конвертация HTML в табы, вам не нужно знать никакой JavaScript для этого. Выделение и стили задаются через CSS.
- Можно использовать альтернативные выделения стилями, если, например, на влючен JavaScript или для страницы печати.
- Допускается несколько блоков с табами на одной странице.
- Можно сделать любой таб активным.
- Используются cookie для запоминания последнего выбранного таба, чтобы выводить его когда вы снова вернетесь на страницу.
- Объектно-ориентированный код с подробными комментариями — полезно для разработчиков.
В целом, последний скрипт похож на наиболее «общим» и сырым, так сказать широченное поле возможностей для разработчиков. Каждая из представленных систем табов имеет какие-то свои плюсы, особенности, что могут пригодится в тех или иных ситуациях, поэтому выбрать однозначно нельзя.
P.S. При этом, конечно, сейчас без вложений в интернете сложно работать, можно взять вебмани в кредит под проценты дабы потом заработать и погасить небольшой долг.
Интернет магазин Линзместар предлагает альтернативу очкам — контактные линзы по доступным ценам, доставка, широкий выбор линз и аксессуаров.
комментариев 11 к статье “Лучшие системы табов для wordpress”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Як сховати відсутні товари в Woocommerce шорткодах та схожих товарах
- Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
- Плагіни для створення стрічки новин з біжучим рядком в WordPress
- Як змінити розміщення кнопки оформлення замовлення в WooCommerce
- Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
- Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
- Онлайн генератор ссылок на мессенджеры для WordPress и не только
- WooCommerce (46)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (246)
- Сервисы (87)
- Хаки и секреты (87)
- Шаблоны (45)
- Записи и посты wordpress, оформление записи (5,91 из 7, голосов - 47)
- Проблема с адаптивными изображениями в Gutenberg редакторе WordPress (3,90 из 7, голосов - 48)
- Умный копирайт в footer.php для wordpress (5,63 из 7, голосов - 30)
- Обновление плагинов и тем в WordPress: автоматическое, через FTP, скрытие уведомлений (5,19 из 7, голосов - 31)
- Polylang — плагин для мультиязычных сайтов на нескольких языках в WordPress (4,42 из 7, голосов - 31)
- Плагин TinyMCE Advanced – wordpress текстовый редактор (6,35 из 7, голосов - 20)
- Рубрики и категории wordpress, функция wp_list_categories (6,05 из 7, голосов - 20)
- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Советы по выбору холодильника LG с технологией No Frost
- Зачем нужны Wi-Fi ретрансляторы и как выбрать подходящую модель
- Введение в онлайн-казино Slotor777: многообразие игр и привлекательные бонусы
- Необходимость использования облачного хранилища в наше время, что важно и как выгодно?
- Спрощення процесу звітності за допомогою програми BAS Бухгалтерія
- Технологія підключення інтернету GPON та її переваги
- За що гравці найбільше цінують Lineage 2
- Для каких проектов нужна аренда виртуального сервера и что такое VPS
А я использую табы от Димокса: _dimox.name/universal-jquery-tabs-script/
Я кстати тоже. Во первых они универсальны,во вторых там все в ксс задается легко. Потом скрипт очень короткий. Вроде строк 6 и все). Имхо удобная вещь)
А я использую табы от Димокса
Ну прям реклама этого Димокса, пойду и я посмотрю что ж там хорошего.
Allpa, Читер, asa, нужно будет и себе потом глянуть на эти табы)
Алькор, да, Димокс крут.
Люди, кто в состоянии помочь с табами Димокса,? К ним надо прикрутить ajax загрузку, но только загружать информацию, если таб активен, а так он скопом все грузит и это нехорошо.
Rivolt, наверное Димокс и может помочь)
Да, написал ему….ему лень тестировать:) какой то кошмар творится:)
Вот мой переделанный пример
http://narod.ru/disk/26384649001/%D1%82%D0%B0%D0%B1%D1%8B%20%D1%81%20ajax.rar.html
Для людей с нужным образованием это займет минут 10.
Всего то нужно добавить в скрипт что то типа этого : если таб активен, то загружать ajax такой то, если не активен, выводить прелоадер (или вобще не выводить) (или иначе прелоадер)…мои познания в программировании…их нет.
Как-то давно попробовал DOMTab, тогда при нажатии на ссылку «читать запись полностью», и не только, также при нажатии где-то в сайдбаре, к примеру на «читать последний комментарий». Всегда добавляло к (диву = контент) — «display:none;», попробовал множество других решений и все таки вот снова поставил се такое решение, как DOMTab, на свой новый блог. И вот теперь решил всячески попытаться решить такие проблемы. Но это решение с табами, порадовало тогда больше всего.
Подскажите как установить Easy Tabs 1.2 на вордпрес?
Вадим, на сайте скрипта найдете инструкцию по установке — там не сложно должно быть.