Аккордеоны и табы WordPress

Опубликовано: 06.09.2018

видео Аккордеоны и табы WordPress

Выводим каждую категорию во вкладку (Bdwebteam Recent Ppost Tabs Widget)

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



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

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


Создание Аккордеона на jQuery

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

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

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

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

скачиваем плагин с wordpress.org; распаковываем в текущий каталог; полученную папку загружаем на сервер в директорию /wp-content/plugins, используя ftp клиент FileZilla ; активируем плагин через админку WordPress.

Универсальный плагин 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. Он позволяет выводить на блог последние новости из социальных сервисов:

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/tabbed-login.php. Он небольшой, поэтому русификация не должна занять много времени.

JQuery Accessible Tabs

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

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

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

Лучший способ выразить благодарность автору - поделиться с друзьями!

Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:

Следите за обновлениями в Twitter и RSS.

rss