- Плагины WordPress: аккордеоны и табы
- Что такое табы и аккордеоны
- Универсальный плагин TheThe Tabs and Accordions для WordPress
- Виджеты с табами и аккордеонами для сайдбара WordPress
- Social Media Tabs
- Tabbed Login Widget
- JQuery Accessible Tabs
- Плагин вордпресс для чтения аккордов
- 12 Лучших табов, виджетов аккордеона и плагинов для WordPress
- 1. Accordion Tables, FAQs, Columns, and More
- 2. Accordion Slider — Responsive WordPress Plugin
- 3. WP Responsive FAQ with Category
- 4. WooCommerce Category Accordion
- 5. Responsive Searchable 3 Level Accordion For WordPress
- 6. StackTabs for WordPress
- 7. WordPress Tabs and Accordions DZS
- 8. Hello Tabs WordPress Widget
- 9. WooCommerce Tabs Pro: Extra Tabs for Product Page
- 10. Elegant Tabs for Visual Composer
- 11. Social Network Tabs For WordPress
- 12. PullOut Widgets for 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:
Источник
Плагин вордпресс для чтения аккордов
Тема не слишком популярная, однако кому-то данная информация может пригодиться. Речь в этой статье пойдет о публикации текстов песен и аккордов к ним на сайтах WordPress.
Разумеется, аккорды можно самостоятельно вручную расставить над каждым нужным словом. Однако в случае большого количества быстро сменяющих друг друга аккордов над одной строкой, все ручное форматирование может поплыть. К тому же не всегда такие «ручные» тексты и аккорды будут вести себя хорошо на экранах с различным разрешением.
Для указанных выше целей приспособлен специальный плагин, который называется Chords And Lyrics . Принцип работы плагина предельно прост, после его установки и активации, необходимо окружить текст песни шорткодами [chordsandlyrics] и [/chordsandlyrics], затем перед каждым нужным словом установить соответствующий аккорд, заключенный в квадратные скобки[Am] следующим образом:
После публикации, текст песни будет выглядеть так:
Плагин вы можете найти через стандартный поиск WordPress в админ-панели: «Плагины» — «Добавить новый«, вводите в поисковое поле Chords And Lyrics и жмите «Поиск плагинов«. Он такой один, думаю, что не ошибетесь.
Одним из минусов, которые я обнаружил при работе, явилось то, что создатели плагина по каким-то причинам решили, что аккорд Bи аккорд H полностью друг другу соответствуют, тогда как первым правильно обозначать Си-бемоль, а вторым просто Си. Я исправил этот недостаток, кроме того, в исходном файле плагина было, на мой взгляд, слишком большое расстояние между строками, которое я обнулил, поскольку меня устраивало расстояние, предложенное используемым шаблоном.
При желании, ЗДЕСЬ можете скачать версию плагина с моими правками.
Если после прочтения статьи остались вопросы — обязательно задавайте их в комментариях. Также интересен ваш опыт использования плагина Chords And Lyrics.
Источник
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.
Источник