Плагины WordPress: аккордеоны и табы

Блог FairHeart.ru рад приветствовать своих посетителей! Сегодня будем делать блог более красивым и функциональным с помощью аккордеонов и табов WordPress. Если вы не знаете, что это такое — не беда! Вы обязательно встречали их на многих сайтах в интернете, вот только не задумывались, как это называется. Исправим этот досадный пробел знаний.

Что такое табы и аккордеоны

Объяснить на словах, что такое табы, и дать этому выражение краткое и лаконичное определение, мне не позволяет мое красноречие. Давайте, просто посмотрим на пример, и вы все сами поймете. Возьмем до боли родной портал wordpress.org. Описание каждого плагина представлено именно с помощью табов.

Как видите, это своего рода закладки, с помощью которых можно переключать информацию, отображаемую в специально отведенном для нее месте. На wordpress.org это область контента, но часто табы используют и в сайдбарах по бокам сайта.

Табы позволяют сэкономить место и более удобно и компактно представить информацию.

Но табы не единственное средство представления информации, позволяющее сэкономить место на сайте. Есть еще так называемый «аккордеон». Название произошло из-за похожести на одноименный музыкальный инструмент. Аккордеон — это набор областей, из которых только одна отображается, а остальные скрыты. При открытии следующей области, предыдущая сворачивается и скрывается из вида. Чаще всего аккордеоны используют в качестве меню, но никто не запрещает воспользоваться ими для представления контента страницы.

Универсальный плагин TheThe Tabs and Accordions для WordPress

Специально для этой стати я рассмотрел больше десятка всевозможных плагинов WordPress для табов и аккордеонов. Некоторые из них просто не захотели работать, другие оказались весьма убогими и непривлекательными. Больше всего мне понравился плагин TheThe Tabs and Accordions.

Какие плюсы он имеет:

• для создания табов и аккордеонов используются шорткоды с внушительным количеством атрибутов, что дает большую гибкость их настройки;
• огромное количество визуальных тем на любой вкус;
• поддерживаются табы, горизонтальный и вертикальный аккордеон, выдвижные области — далеко не каждый плагин может похвастаться таким набором;
• шорткод можно задействовать не только в посте, но и вывести в сайдбаре блога с помощью виджета «Текст».

Минус только один. Людям, которые работают только с визуальным редактором WP и ничего не понимают в коде, придется нелегко. Хотя к шорткодам привыкать надо, ибо их используют очень много полезных плагинов WordPress. Лично я уже забыл, когда последний раз переключался на визуальный редактор — использую только HTML.

Скачать TheThe Tabs and Accordions.

И так, после установки плагина появляется новый пунк в админке WP — «TheThe Fly».

В первом разделе «About TheThe Fly» представлена общая информация о продукте, и он нам не пригодится.

Второй раздел «Tabs and Accordions» имеет две вкладки:

• Overview — представлены примеры шорткодов для создания табов, аккордеонов и выдвижных областей.
• Settings — настройки отображения:
  • Disable on Frontpage — отключить вывод на главной странице блога.
  • General Style — активный стиль. От выбранного стиля зависит внешний вид элементов, создаваемых с помощью данного плагина.
  • Custom Style — пользовательский стиль.

Примеров дается немного, по одному на каждый вид: Toggles (выдвижная область), Tabs (табы), Accordion (вертикальный аккордеон) и Horizontal Accordion (горизонтальный). Зачастую их вполне хватает, чтобы научится пользоваться плагином.

Напомню, шорткоды необходимо вставлять в текст постов при включенном HTML редакторе WordPress. Кроме этого, результат действия шорткода можно вывести в сайдбаре блога с помощью стандартного виджета «Текст».

Виджеты с табами и аккордеонами для сайдбара WordPress

Теперь же я хочу рассказать о трех разноплановых плагинах, добавляющих в WordPress новые виджеты с поддержкой табов.

Social Media Tabs

Скачать Social Media Tabs с wordpress.org.

Первым в моей подборке будет плагин Social Media Tabs. Он позволяет выводить на блог последние новости из социальных сервисов:

• Facebook;
• Google +1;
• Twitter;
• RSS Feed;
• YouTube;
• Flickr;
• Pinterest.

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

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

Давайте, быстро пробежимся по настройкам виджета.

• Tabs — вид виджета: Slide Out — плавающая панелька; Static — стандартно, в сайдбаре.
• Slider — при переключении вкладки информация в поле буде прокручиваться либо вертикально (Vertical), либо горизонтально (Horizontal).
• Размеры виджета: ширина (Width) и высота (Height).
• Location — позиция плавающей панельки.
• Offset — смещение.
• Slide Speed — скорость смены закладки.
• Auto-Close — панелька закрывается, если кликнуть вне ее.
• Далее задаем количество табов и социальные сервисы к ним.
• Чуть ниже идут настройки каждой социальной сети в отдельности. В основном они сводятся к указанию ID/Username учетной записи и количеству последних новостей.

Tabbed Login Widget

Скачать Tabbed Login Widget.

Совсем небольшой плагин, который добавляет новый виджет, позволяющий вывести на блог с помощью табов формы входа на сайт, регистрации и восстановления пароля. Данный виджет никаких настроек не имеет.

Все формы на английском языке, но это можно исправить, подредактировав файл tabbed-login/tabbed-login.php. Он небольшой, поэтому русификация не должна занять много времени.

JQuery Accessible Tabs

Еще один простой плагин, который добавляет в виджет таб с тремя закладками — архив, последние записи и комментарии. Заголовки для закладок можно указать самому, больше никаких настроек виджет не имеет.

Остальные плагины для создания табов WordPress и аккордеонов либо отказались корректно работать, либо просто не достойны нашего внимания.

На этом все, спасибо за внимание! До скорых встреч!