Меню аккордеон на WordPress
Меню аккордеон – это удобный способ представления контента. Он представляет собой что-то вроде гармошки, которая состоит из вкладок. При клике на ту или иную вкладку появляется какой-то текст. Изначально все вкладки скрывают текст.
Такой вид удобен тем, что позволяет сэкономить пространство на мониторе пользователя, и скрыть от пользователю ту информацию, которая ему сейчас не нужна. При этом если она вдруг понадобится, её можно будет получить одним кликом.
Меню аккордеон также помогает упорядочить текст, скрыв ненужное с глаз. Каждый, кому пригодится скрытая информация, сможет открыть её в этом меню.
Меню аккордеон с плагином
AccordionsВот такое незамысловатое и простое называние у плагина, который создаёт меню аккордеон в WordPress. И работает он так же просто.
Скачайте плагин Accordions, установите его на свой сайт и активируйте. После этого в консоли появится новый пункт «Accordions».
Перейдите в подпункт «New Accordions», чтобы добавить новое меню. Здесь вам потребуется написать называние для этого меню, и потом нужно будет рассмотреть опции во вкладках ниже. Есть шесть вкладок:
- Shortcode. Здесь есть шорткоды, которые можно установить в записи или страницы, а также PHP коды, которые можно поместить в файлы шаблона. Эти коды выводят создаваемое меню аккордеон.
- Accordion options. Здесь небольшие настройки для меню. Всё на английском. Кому интересно, могут поэкспериментировать. Можно оставить всё по умолчанию.
- Style. Здесь настройки внешнего вида меню аккордеона. Настроек очень много, и благодаря им можно подогнать дизайн меню под тему, которая установлена на сайте, таким образом, что оно будет выглядеть, как элемент шаблона. В общем, можно проявить творчество.
- Content. В этой вкладке можно добавлять контент для меню аккордеона.
Можно добавлять любое количество вкладок. У каждой вкладки может быть заголовок и тело контента. Единственный недостаток, который тут есть – это отсутствие визуального редактора. Поэтому при необходимости форматирования текста придётся пользоваться HTML тегами. - Custom CSS. Для тех, кто знает хотя бы основы CSS, здесь открываются дополнительные возможности в дизайне. Можно задавать собственные стили для меню.
- Tabs options. Здесь можно настроить вкладки.
После произведения всех настроек нужно сохранить их. Затем можно использовать коды из первой вкладки для того, чтобы вывести меню аккордеон в удобном месте.
Также вам будет интересен похожий плагин, о котором мы рассказали тут.
Также по этой теме:
← Предыдущая запись
Следующая запись →
Как создать блог. Видео Уроки WordPress © 2019 | Оставляя комментарий на сайте или используя форму обратной связи, вы соглашаетесь с правилами обработки персональных данных.
JQuery плагин вертикального аккордеон меню для блога WordPress
Здравствуйте, дорогие читатели блога. В этот день расскажу Вам я про превосходный плагин, который создаёт на блоге WordPress классное меню аккордеон — JQuery Accordion Menu Widget. Я сам пользуюсь этим плагинов, и естественно Вы его можете посмотреть в действии справа в рубриках. Очень удобный плагин, просто вставляешь через админку виджет и радуйся.
Плагин
Плагин JQuery Accordion Menu Widget легок в установке и в использовании, к тому же очень функционален. В нем присутствует несколько тем оформления, цветов самого меню, а именно красное, синее, чёрное и серое. Соответственно это аккордеон меню вольётся практически в любой дизайн блога.
Ещё огромный плюс плагина — это простота установки. Всего лишь нужно его скачать, затем установить, после плагин создаст виджет, который Вам просто нужно будет добавить в сайдбар Вашего блога.
Ну а теперь давайте перейдём к процессу установки и настройки плагина.
Установка плагина
Теперь нужно, в админке блога, зайти во вкладку плагины, затем выбрать Добавить новый и в поле для поиска вписать JQuery Accordion Menu Widget далее нажать поиск.
Нужный нам плагин будет самый первый в списке. А под ним будет ссылка Установить плагин. После того как он установится нужный нам виджет появится во вкладке Внешний вид — Виджеты.
На рисунке выше я подчеркнул название самого виджета.
После Вам всего лишь понадобится перетащить его в сайдбар, который находится сплава, в нужно Вам место.
Настройки плагина
После того как виджет будет добавлен в сайдбар его можно будет настроить по Вашему вкусу. А именно выбрать цвет самого меню, тему оформления. Как будет открываться меню при наведении на него или при клике. Углубляться сильно в настройки не буду, они лёгкие и понятные.
Важный момент: рубрики и подрубрики.
Если на Вашем блоге есть подрубрики к рубрикам, Вам нужно создать произвольное меню. Это нужно для того, чтобы плагин меню корректно их отображал и вообще работал.
Чтобы создать произвольное меню в WordPress Вам нужно зайти в Внешний вид, а затем в Меню. Далее нужно придумать название меню, выберите какое Вам понравится:-) после нажимаем на кнопочку Создать меню.
Когда меню будет создано нужно будет выбрать его элементы, в нашем случае это будут рубрики. Ниже будет не большое окошко с рубриками, в этом окошке нужно будет выбрать вкладку Все, затем нажать Выделить все, а после нажать Добавить в меню. Теперь давайте посмотрим что у меня получилось с рубриками на beloweb.ru.
Теперь нужно создать подрубрики. В данном случае у рубрики WordPress будет подрубрика Плагины. Для этого Плагины нужно перетащить чуть правее. Смотрите на рисунке ниже, что у меня получилось.
После того ка Вы сделаете этот шаг, плагин JQuery Accordion Menu Widget будет работать.
Надеюсь, что всё ясно и доступно объяснил. Если Вам всё таки Вам будет что то не понятно спрашивайте в комментариях. До скорых встреч, друзья.
10 лучших аккордеонных плагинов WordPress для максимального увеличения места на вашем веб-сайте
Плагины аккордеона WordPress могут помочь вам улучшить качество чтения на вашем сайте, особенно для пользователей на мобильных устройствах.
Ниже мы расскажем, что такое аккордеон, какие плагины WordPress лучше всего подходят для добавления аккордеонов на веб-сайт WordPress и каков идеальный вариант использования каждого плагина.
Зачем использовать плагин WordPress Accordion
Аккордеон — это тип меню, в котором заголовки отображаются друг над другом. Читатели могут щелкнуть один из этих заголовков, чтобы открыть скрытый контент. Этот элемент веб-дизайна может разбить длинные или сложные страницы на удобоваримые куски размером с укус и уменьшить количество прокрутки, особенно на мобильных устройствах.
Обычно используется для разделов часто задаваемых вопросов на веб-сайте или странице продукта. Например, вы часто можете найти аккордеонное меню в нижней части целевой страницы плагина WordPress.
Источник изображения
Несмотря на распространенное заблуждение, скрытый контент за аккордеоном индексируется поисковыми системами, как и любой другой видимый контент, по словам Джона Мюллера в видеовстрече Google для веб-мастеров. Так что аккордеоны не повлияют отрицательно на SEO.
Теперь, когда мы понимаем преимущества аккордеонов, легко понять, почему люди добавляют их на свой веб-сайт. Однако кодирование аккордеона может быть затруднено, поскольку для этого требуются HTML, CSS и JavaScript.
Если у вас нет технического опыта или времени для создания аккордеона с нуля, вы можете использовать плагин. Приведенные ниже плагины позволят вам легко и быстро добавить эту функцию веб-дизайна на ваш сайт WordPress.
Аккордеонные плагины WordPress
- Easy Accordion
- Часто задаваемые вопросы об аккордеоне
- Аккордеон
- Аккордеонные блоки
- Легкий аккордеон
- Аккордеон и слайдер аккордеона
- Икс Меню
- Меховое аккордеонное меню
- Аккордеон Часто задаваемые вопросы Плагин WordPress
- Универсальный аккордеон с возможностью поиска
1.
Easy AccordionПодходит для: Настройка
Easy Accordion — бесплатный плагин WordPress для аккордеона, который также является одним из лучших плагинов FAQ. В бесплатной версии вы можете создавать неограниченное количество аккордеонов, выбирать событие активатора (щелчок или указатель мыши), добавлять и настраивать значки, а также изменять заголовок, описание, цвет фона и поля ваших аккордеонов. Для еще большего контроля над внешним видом ваших аккордеонов вы можете добавить пользовательский CSS, чтобы переопределить стили по умолчанию.
Премиум-версия предлагает еще больше вариантов настройки и дизайна, в том числе:
- 16+ тем
- 14+ наборов стилей значков
- 25+ анимационных эффектов
- 840+ шрифтов Google
Вот видеоруководство о том, как начать работу с плагином Easy Accordion:
2.
Часто задаваемые вопросы об аккордеонеПодходит для: Редактирование методом перетаскивания . Построенный на Bootstrap, этот плагин позволяет создавать адаптивные меню-гармошки и настраивать их с помощью конструктора перетаскивания. Вы можете дополнительно настроить их внешний вид, добавив собственный CSS в настройках плагина.
Премиум-версия Accordion FAQ содержит больше функций, включая восемь шаблонов дизайна, 12 наборов значков и 30 анимационных эффектов для создания более уникальных меню.
3. Accordion
Подходит для: аккордеонов с включенным поиском
Accordion — это самый загружаемый плагин аккордеона WordPress в официальном каталоге плагинов. В бесплатной версии вы можете отображать аккордеон в любом месте вашего сайта с помощью шорткода и настраивать значки аккордеона, заголовок, содержимое и контейнер. Плагин также построен с использованием jQuery, поэтому аккордеоны реагируют на любом устройстве.
В премиум-версии вы можете создавать более продвинутые аккордеоны, добавляя функцию поиска, устанавливая пользовательское фоновое изображение, отслеживая клики и многое другое.
Источник изображения
4. Блоки аккордеона
Подходит для: Редактор Гутенберга
Блоки аккордеона — это простой бесплатный плагин аккордеона для WordPress. После того, как плагин будет установлен и активирован, вы увидите блок Gutenberg для добавления выпадающих меню на ваши страницы. Каждый аккордеон будет иметь несколько настроек, поэтому вы можете настроить свои аккордеоны на автоматическое закрытие при открытии другого элемента или настроить его на автоматическое открытие при загрузке страницы, например.
Вы также можете добавить до восьми классов CSS, чтобы настроить внешний вид и поведение каждого меню-аккордеона. Таким образом, этот плагин является отличным вариантом для владельцев сайтов, которым удобно работать с редактором Gutenberg, а также с HTML и CSS.
5. Легкий аккордеон
Подходит для: Время загрузки
Легкий аккордеон — еще один бесплатный вариант добавления аккордеонов на ваш сайт WordPress. С помощью этого плагина вы можете отображать аккордеоны на своем сайте, используя шорткоды или блок Гутенберга. Если вы решите использовать шорткоды, вы можете контролировать, открывается ли аккордеон при загрузке, на каком уровне заголовка находится заголовок, есть ли у него граница и настроен ли он на часто задаваемые вопросы, среди других параметров.
Этот плагин не использует JavaScript и невероятно легкий, что делает его идеальным для оптимизации времени загрузки страницы.
6. Аккордеон и слайдер-аккордеон
Подходит для: аккордеонов изображений с сенсорным экраном
Бесплатный плагин слайдера-аккордеона и аккордеона позволяет создавать адаптивные слайдеры-гармошки с изображениями.
Что отличает этот плагин от других аккордеонных плагинов WordPress, так это то, что он создает сенсорные аккордеоны. Это означает, что они поддерживают жесты касания и касания на мобильных устройствах и перетаскивание мышью на настольных компьютерах. Таким образом, вы можете отобразить уникальную галерею изображений, и пользователи могут щелкнуть, чтобы открыть полное изображение, или продолжать проводить пальцем вправо.
7. Iks Menu
Подходит для: Меню-аккордеон на боковой панели
Iks Menu — это бесплатный плагин-аккордеон для WordPress, предназначенный для создания настраиваемых меню-аккордеонов на боковой панели. Эти меню могут быть созданы с использованием любого пользовательского меню или таксономии, будь то категории, почтовые теги, категории продуктов WooCommerce или другая пользовательская таксономия. Вы можете настроить цвет, шрифт, поля, отступы, высоту и ширину любого аккордеона и отобразить их с помощью виджета WordPress, шорткода или кода PHP.
Премиум-версия предлагает больше скинов, значков и анимационных эффектов для индивидуальной настройки внешнего вида меню аккордеона.
8. Bellows Accordion Menu
Подходит для: Автогенерация аккордеонных меню
Bellows Accordion Menu — это также бесплатный плагин WordPress для создания аккордеонов со значками, изображениями, виджетами, пользовательским контентом и многим другим. Вы можете настраивать и просматривать аккордеонные меню с помощью настройщика WordPress, изменяя значки переключателей, цвета текста и фона, отступы и шрифты.
Что уникально в Bellows Pro, так это то, что он позволяет вам либо создавать аккордеоны вручную в настройках плагина, либо автоматически генерировать их на основе иерархий постов или таксономий. Это может сэкономить ваше время, особенно если у вас большой веб-сайт с большим количеством постов и страниц.
9. Accordion FAQ Плагин WordPress
Подходит для: Параметры стиля Accordion
Accordion FAQ Плагин WordPress — это плагин премиум-класса, который можно использовать как отдельный плагин аккордеона или дополнение к Elementor или WPBakery Page Builder . Его ключевые функции включают неограниченные цветовые схемы, разбиение на страницы и упорядочивание элементов аккордеона с помощью перетаскивания.
Имея более 22 дизайнов вкладок, этот плагин предлагает больше всего вариантов стиля среди всех плагинов аккордеона WordPress в списке.
10. Ultimate Searchable Accordion
Подходит для: Владельцев сайтов, использующих WPBakery Page Builder
Ultimate Searchable Accordion — это инструмент премиум-класса, который позволяет создавать адаптивные меню-гармошки с возможностью поиска. Вы можете выбрать одну из шести цветовых схем и 14 анимационных эффектов, чтобы сделать меню еще более привлекательным и интерактивным.
В отличие от других плагинов в этом списке, Ultimate Searchable Accordion — это надстройка премиум-класса для плагина WPBakery Page Builder. Так что это лучше всего подходит для владельцев сайтов, которые уже используют конструктор страниц и хотят расширить его возможности.
Выбор плагина WordPress Accordion
Аккордеоны могут помочь вам максимально увеличить пространство на веб-страницах, улучшая при этом удобство чтения. Использование любого из вышеперечисленных плагинов аккордеона WordPress позволит вам воспользоваться преимуществами включения аккордеонов в ваш веб-дизайн без необходимости кодировать их с нуля.
Темы: Плагины WordPress
Не забудьте поделиться этим постом!
Bellows — Аккордеонное меню WordPress
Попробуй бесплатно
Стать профессионалом
Позвольте вашим клиентам быстро переходить непосредственно к нужному им контенту0049
Легко вставьте в свой макет с помощью виджета, шорткода или фрагмента PHP
Добавьте значки, изображения, виджеты, пользовательский контент и многое другое
Ознакомьтесь с функциями
Очень гибкое, настраиваемое и полнофункциональное меню-аккордеон- Быстро создайте свое меню и вставьте его в макет с помощью шорткода, виджета или PHP.
- Меню является адаптивным и автоматически подстраивается под ширину своего контейнера.
- Выберите, может ли одно подменю или несколько подменю отображаться одновременно.
- Создайте несколько конфигураций, чтобы настроить каждую из настроек меню аккордеона по своему вкусу.
Добавьте расширенный контент в отдельные пункты меню в вашем меню:
- Иконки из Font Awesome
- Изображения — загрузите пользовательское изображение или наследуйте избранное изображение публикации
- Виджеты — создавайте области виджетов в меню, чтобы добавлять свои виджеты
- Пользовательский контент — добавьте любой текст, HTML или шорткод в меню через пользовательский контент
Обратите внимание, что эти настройки применяются к меню, управляемому в разделе «Внешний вид» > «Меню», а не к автоматически заполняемым меню.
СинийКрасныйРозовыйВанильныйФиолетовыйТемно-фиолетовыйИндигоГолубойГолубойБирюзовыйЗеленыйСветло-зеленыйЛаймЖелтыйЯнтарныйОранжевыйТемно-оранжевыйКоричневыйСерыйСиний Серый
Получите полный контроль с помощью Customizer
- Управляйте и предварительно просматривайте настройки мехов с помощью Customizer
- Создайте свои собственные скины
- Настроить:
- значки переключения
- цвета текста и фона
- прокладка
- шрифтов
- и больше!
- Автоматическое создание меню на основе таксономии или иерархии постов
- Работает с пользовательскими типами записей и таксономиями
- Возможность наследования иерархии на основе текущей страницы или таксономии позволяет создать одно меню, содержимое которого будет динамически изменяться на основе текущей страницы.