Горизонтальный аккордеон для wordpress

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

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

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

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

Как видите, это своего рода закладки, с помощью которых можно переключать информацию, отображаемую в специально отведенном для нее месте. На 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 с wordpress.org .

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

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

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

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

• 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:

Источник

Accordion for WordPress — бесплатное аккордеон меню для WordPress

Возникла у меня недавно потребность в аккордеон меню для сайта. Начал как всегда искать и испытывать различные плагины, перед установкой на основной сайт. Выбор меню большой. Но большинство из них платные и для пользования всеми функциями нужно купить Pro версию. В бесплатных версиях — традиционно разработчики всовывают различную рекламу.

Accordion for WordPress — не содержит рекламы и совместимо с новой (на момент написания статьи) версией WordPress. Позволяет вывести вертикальное или горизонтальное меню в стиле аккордеона. Поддерживаются продукты woocommerce.

Распространяется плагин под лицензией GNU (публичной).

Открываем административную панель сайта и переходим в плагины. (Видео о том, как устанавливать плагины)

Далее «Добавить новый». В поле поиска вводим «Accordion for WordPress».

Находим наш плагин (смотрим скриншоты) и нажимаем «Установить».

После успешной установки нажимаем «Активировать».

1. Далее переходим к виджетам: « Внешний вид» → «Виджеты».

2. Нам нужно найти наш виджет и перетащить его в нужное место на сайте, например боковую панель.

3. Тогда заполняем название меню (при желании).

Напротив Select Menu: выбираем наше меню (оно должно уже у вас быть создано, если нет, то сначала создайте меню).

Если отметить пункт «Show as Accordion:»,то меню при загрузке сайта будет свернутым.

Template: выбор шаблона для вывода меню.

Напротив Style: выбираем как показывать меню — вертикально или горизонтально.

После всех действий нажимаем «Сохранить».

Вид во фронтальной части сайта.

В виджетах можно увидеть еще два, которые относятся к нашему плагину. Это Accordion Term Widget и Accordion Post Widget. Первый выводит у виде аккордеона рубрики сайта, а второй — отдельные статьи.

Для вывода рубрик используем виджет Accordion Term Widget , и повторяем вышеперечисленные три пункта.

Далее напротив Taxonomy указываем, что выводить (рубрики, метки и т.д.).

Show no of term: количество рубрик, меток, которые будут выводиться.

Style: выбор вертикального или горизонтального отображения.

Затем сохраняем и просматриваем на фронтальной части сайта результаты.

Для добавления виджета Accordion Post Widget повторяем три вышеописанных пункта и настраиваем.

• Title: заголовок;
• Post Type: выбор материалов для выведения (страницы, записи);
• Show no of post: количество выводимых записей;
• Template: выбор шаблона;
• Style: вертикальный аккордеон или горизонтальный.

Сохраняем и видим результат (на скриншоте выведение страницы).

Кроме того, в левой панели WordPress появится новый пункт меню, прямо с которого можно создавать содержимое и выводить его в стиле аккордеона. Все записи можно объединять в группы.

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

Источник

12 Лучших табов, виджетов аккордеона и плагинов для WordPress

Russian (Pусский) translation by Marat Amerov (you can also view the original English article)

Аккордеоны и табы — отличные способы передачи текстовой информации в элегантном и сжатом виде, при этом экономится ценное пространство на вашем WordPress-сайте и уменьшается информационная перегрузка.

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

Табы выполняют аналогичную аккордеонам функцию, но по-другому. Они стилизованы под традиционные табы, которые вставляются в файлы или картотеки. Подобно табам карт, плагины и виджеты для табов помечены и дают подсказку с информацией, которую они скрывают. Кликая на таб, пользователь может открыть дополнительную информацию о субъекте таба и использовать табы для навигации по сайту или странице.

Если вы ищете табы или виджеты и плагины аккордеона, вы можете найти то, что ищете на CodeCanyon. Чтобы сэкономить вам некоторое время, вот выбор из 12 лучших табов, виджетов и плагинов аккордеона доступных в Code Canyon.

1. Accordion Tables, FAQs, Columns, and More

С более чем 20 настраиваемыми пресетами таблиц аккордеонов, FAQs, столбцов и многим другим — этот плагин для аккордеона, понравится широкому кругу пользователей, желающих превратить их контент в компактные аккордеоны.

• Возможность предварительного просмотра изменений вживую, когда вы их делаете
• автоматические обновления
• интеграция с Font Awesome Icons
• поставка с несколькими настраиваемыми пресетами
• и многое другое

Accordion Tables, FAQs, Columns, and More — отличный выбор для отображения вашего контента в стильных макетах аккордеона.

2. Accordion Slider — Responsive WordPress Plugin

Плагин Accordion Slider объединяет две большие функции в одном удобном плагине. Во-первых он функционирует как аккордеон, а во-вторых, он функционирует как слайдер.

• Добавьте столько панелей, сколько хотите, не беспокоясь о пространстве экрана
• touch-enabled хорошо работает с мобильными экранами
• загрузка изображений и контента из постов, галерей и Flickr
• Аккордеоны автоматически кэшируются, чтобы улучшить время загрузки
• могут быть размещены в любом месте, в постах/ страницах, шаблоне PHP-кода или виджетах
• и многое другое

Accordion Slider — Responsive WordPress Plugin — отличный вариант для одного плагина, который понравится тем, кто ищет отличный способ отобразить изображения или текст.

3. WP Responsive FAQ with Category

FAQ WP Responsive FAQ с плагином Category специально разработан для пользователей, которые имеют или хотят добавить область часто задаваемых вопросов на свой сайт, и не хотят, чтобы их посетители просматривали бесконечный поток текста, чтобы получить ответы на вопросы и ответы. относящихся к ним.

• FAQs могут быть организованы по категориям
• 15 настраиваемых различных вариантов дизайна на выбор
• совместимость с билдером страниц Visual Composer и WooCommerce
• два типа FAQ: значок стрелки или плюс
• и многое другое

Нет никаких сомнений в том, что WP Responsive FAQ with Category является решением для FAQ.

4. WooCommerce Category Accordion

WooCommerce Category Accordion разработан специально для пользователей WooCommerce. Его можно использовать в качестве виджета или шорткода для перечисления категорий продуктов и подкатегорий.

• поддерживает неограниченные категории и подкатегории
• включены 14 иконочных шрифтов
• возможность выделения текущей категории
• сортировка по возрастанию или убыванию
• и многое другое

WooCommerce Category Accordion идеально подходит для пользователей, которые хотят организовывать свои продукты или услуги по категориям и подкатегориям, чтобы клиенты могли легко перемещаться по сайту.

5. Responsive Searchable 3 Level Accordion For WordPress

Responsive Searchable 3 Level Accordion For WordPress — это супер простой плагин, который можно использовать в любом месте вашего WordPress сайта . Это понравится пользователям, которые хотят упорядочить контент в стиле аккордеона в постах, боковой панели, футере и т. д.

• может использоваться как виджет или шорткод
• доступны три уровня вложенности
• пять вариантов стиля
• позволяет пользователям вводить искомую фразу
• и многое другое

Responsive Searchable 3 Level Accordion For WordPress — это плагин с отсутствием лишнего, и его отличные функции, такие как трехуровневая поддержка и поиск по контенту, действительно выделяют его.

6. StackTabs for WordPress

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

• упорядочивание и перемещение вкладок с помощью drag & drop билдера
• гибкая кастомизация
• интеграция со шрифтом Awesome Icons
• Доступны неограниченные цветовые комбинации
• и многое другое

Если вы не можете выбрать между табами и плагином аккордеона, почему бы и нет? StackTabs for WordPress дает вам именно это.

7. WordPress Tabs and Accordions DZS

WordPress Tabs and Accordions DZS — это еще один плагин, который дает пользователям доступ к функциям табов и аккордеона.

• полные скины, для соответствия каждому бренду
• WYSIWYG редактор
• неограниченное количество цветов для настройки
• оптимизация под iPhone, iPad и Android
• и многое другое

Так что если StackTabs не привлекает, WordPress Tabs and Accordions DZS — еще один отличный вариант два в одном.

8. Hello Tabs WordPress Widget

Hello Tabs позволяют создавать табы из любых виджетов или контента на вашем сайте. Используя простую функцию перетаскивания, плагин предлагает 12 предопределенных стилей и 24 анимационных эффекта.

• multi-tabs для создания нескольких элементов табов
• функция перетаскивания
• кросс-браузерная совместимость
• 23 анимационных эффекта
• и многое другое

Скажите «Hello» комплексным функциям табов с помощью Hello Tabs WordPress Widget.

9. WooCommerce Tabs Pro: Extra Tabs for Product Page

Если у вас есть сайт WooCommerce, плагин WooCommerce Tab Pro позволит вам создавать и управлять 11 различными типами табов для отображения ваших продуктов.

• возможность добавления неограниченных табов на одну страницу продукта
• WYSIWYG редактор для редактирования пользовательского контента
• возможность включения или отключения табов
• возможность создания глобальных табов, которые могут использоваться со всеми продуктами
• и многое другое

Когда у вас есть сайт электронной коммерции, внесение улучшений в ваш макет может действительно повысить продажи. С WooCommerce Tabs Pro: Extra Tabs for Product Page, скоро будут звонки.

10. Elegant Tabs for Visual Composer

Elegant Tabs for Visual Composer — это аддон для плагина WordPress Visual Composer. Он позволяет добавлять любой шорткод на несколько табов и предлагает множество настроек, таких как разные цвета, иконки и фоны для разных разделов или табов.

• Вертикальные табы
• перетаскивание любых элементов Visual Composer внутри содержимого таба
• поддержка глубоких ссылок
• десять различных стилей табов и неограниченные варианты
• и многое другое

11. Social Network Tabs For WordPress

Social Network Tabs for WordPress — это другой подход к табам из тех, которые были представлены до сих пор. Этот плагин специально разработан, чтобы продемонстрировать все профили и фиды социальных сетей на слайдовых или статических табах, которые расположены вокруг краев окна вашего веб-сайта.

• 16 социальных сетей с 69 вариантами фидов
• гибкое позиционирование
• посты включают в себя ссылки Twitter, Facebook, Google + и LinkedIn
• легкая стилизация табов с помощью колорпикера
• и многое другое

Нужно больше фолловеров? Social Network Tabs For WordPress поможет вам стать суперзвездой в социальных сетях.

12. PullOut Widgets for WordPress

Подобно Social Network Tabs for WordPress, PullOut Widgets — это другой подход к табам. Он специально предназначен для превращения любого виджета на вашем сайте в выносные табы.

• 289 иконок для выносных табов
• 32 эффекта анимации скольжения
• неограниченное размещение виджета в верхней, правой, нижней или левой стороне
• неограниченные цвета виджета
• и многое другое

Самые успешные веб-сайты являются интерактивными, а PullOut Widgets for WordPress дает вашим посетителям множество возможностей для взаимодействия с вашим контентом.

Заключение

12 Best Tab & Accordion WordPress Widgets Envato Market & Plugins — это всего лишь несколько продуктов, доступных на Envato Market. Если вы не нашли то, что ищете, у нас есть много других отличных вариантов, которые бы соответствовали вашим потребностям. Поэтому попробуйте выбрать виджеты и плагины табов и аккордеонов.

И если вы хотите улучшить свои навыки WordPress, ознакомьтесь с нашими полезными и бесплатными учебниками WordPress.

Источник