Меню

Wpb accordion menu or category настройка



WordPress.org

Русский

WPB Accordion Menu or Category

Описание

Showing WordPress accordion menu or any WordPress category accordion with submenu/subcategory support. It has icon picker support both for menu and category. So you can setup icons in accordion easily. Enable disable auto-closing previously open accordion etc. Highly optimized for WooCommerce or any other eCommerce categories. Nice animation effects. Responsive and modern flat design.

Pro Version Video Documentation:

Plugin Features

  • Category accordion.
  • Custom taxonomy support.
  • WooCommerce or any other eCommerce plugin compatible.
  • Menu accordion.
  • Multiple menu accordion support.
  • Shortcode system can be used anywhere ( widget, page or post ).
  • Two custom Elementor widgets for showing the menu and categories accordion in the Elementor page.
  • Very lightweight.
  • Work with all WordPress themes.
  • Easy to use.
  • Developer friendly & easy to customize.

Pro Version Features

  • Widgets for showing any custom taxonomy (categories) or any custom menu.
  • Feature to choose any menu or theme location from the menu widget.
  • Five different predefined skins for accordion.
  • Color customization option in settings.
  • WooCommerce product categories and tags support.
  • Auto open first level parent category or menu, settings available for enabling or disable.
  • Feature for keep open selected menu items accordion.
  • Feature for keep open current menu or category accordion.
  • Custom icon picker both for menu & categories.
  • FontAwesome and Themify icons included.
  • Easy to use, lightweight and many more.

Different skins of accordion:

  • Accordion Material Design
  • Accordion Transparent
  • Accordion Minimal
  • Accordion Flat Design
  • Accordion Dark

Tested with Following Themes

  • Divi
  • Storefront
  • Betheme
  • Enfold
  • Flatsome
  • Shopkeeper
  • Avada
  • Kallyas
  • Salient
  • The7
  • Hestia
  • Ocean WP
  • Astra
  • Hello Elementor

Скриншоты

  • Category Accordion.
  • Menu Accordion with Icons.
  • Elementor widget for category accordion.
  • Elementor widgets.
  • Custom widget ( Pro version only ).

Установка

Install it as a regular WordPress plugin

Active the plugin.

Use any shortcode to show your menu or categories accordion.

Category shortcode example

Options:

taxonomy: Default category or any registered taxonomy.

orderby: Sort categories alphabetically, by unique Category ID, or by the count of posts in that Category. Valid values: ID, name, slug, count, term_group

order: Sort order for categories (either ascending or descending). The default is ascending. Valid values: ASC, DESC

show_count: Toggles the display of the current count of posts in each category. The default is false (do not show post counts). Valid values: no, yes

hide_empty: Toggles the display of categories with no posts. The default is yes (hide empty categories). Valid values: yes, no

icon: Accordion navigation icon ( optional ).

accordion: Close previously opened accordion item. The default is no. Valid values: yes, no.

Menu shortcode example

Options:

menu: The menu that is desired; accepts (matching in order) id, slug, name

theme_location: menu can be asign by theme location ( optional ).

icon: Accordion navigation icon ( optional ).

accordion: Close previously opened accordion item. The default is no. Valid values: yes, no.

Часто задаваемые вопросы

Is it compatible with the Elementor?

Yes, it is. We have two custom Elementor widgets for showing the menu and categories accordion in the Elementor page.

Читайте также:  Настройка тарелки ямал 90 градусов

How can I change the background colors?

You need to change a little bit of CSS code for that. or You can get the pro version, which comes with settings for color and background change.

Источник

Как сделать меню аккордеон на WordPress

Меню аккордеон – это удобный способ представления контента. Он представляет собой что-то вроде гармошки, которая состоит из вкладок. При клике на ту или иную вкладку появляется какой-то текст. Изначально все вкладки скрывают текст.

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

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

Меню аккордеон с плагином Accordions

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

Скачайте плагин Accordions, установите его на свой сайт и активируйте. После этого в консоли появится новый пункт «Accordions». Перейдите в подпункт «New Accordions», чтобы добавить новое меню. Здесь вам потребуется написать называние для этого меню, и потом нужно будет рассмотреть опции во вкладках ниже. Есть шесть вкладок:

  • Shortcode. Здесь есть шорткоды, которые можно установить в записи или страницы, а также PHP коды, которые можно поместить в файлы шаблона. Эти коды выводят создаваемое меню аккордеон.
  • Accordionoptions. Здесь небольшие настройки для меню. Всё на английском. Кому интересно, могут поэкспериментировать. Можно оставить всё по умолчанию.
  • Style. Здесь настройки внешнего вида меню аккордеона. Настроек очень много, и благодаря им можно подогнать дизайн меню под тему, которая установлена на сайте, таким образом, что оно будет выглядеть, как элемент шаблона. В общем, можно проявить творчество.
  • Content. В этой вкладке можно добавлять контент для меню аккордеона. Можно добавлять любое количество вкладок. У каждой вкладки может быть заголовок и тело контента. Единственный недостаток, который тут есть – это отсутствие визуального редактора. Поэтому при необходимости форматирования текста придётся пользоваться HTML тегами.
  • CustomCSS. Для тех, кто знает хотя бы основы CSS, здесь открываются дополнительные возможности в дизайне. Можно задавать собственные стили для меню.
  • Tabsoptions. Здесь можно настроить вкладки.

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

Также вам будет интересен похожий плагин, о котором мы рассказали тут.

Источник

Как сделать аккордеон меню для категорий сайта на WordPress (реализация jQuery и Bootstrap 3 и Bootstrap 4)

Для чего это нужно

Владельцы сайтов постоянно думают, как бы улучшить навигацию по своему сайту, подчеркнуть важность тех или иных элементов, в частности рубрик (категория в wordpress). Для решения подобной задачи владелец сайта http://biznesshack.ru/ (блог о заработке в интернете) попросил меня создать на его сайте аккордеон-меню ( ну или коллапс-меню (collapsed /accordion). Результат можете увидеть на этом сайте.

Читайте также:  Карбюратор настройка в картинках

Как выглядит

Реализация

Для реализации данного меню я выбрал jQuery и jQueryUI. Следовательно, для этого нужно подключить их, например, вот так.

Этого вам будет достаточно, но я рекомендую выбрать более свежую версию jQuery т.к. немного изменяется синтаксис кода (за место $ используется jQuery). Давайте пока отложим frontend и займёмся backend’ом т.е. вордпрессом.

Печать категорий

Для того чтобы печатать категории их нужно получить и прежде всего выбрать список категории, которые мы хотим показать посетителям сайта. Допустим, что мы выбрали список рубрик (категорий), которые нам нужны. Нам нужно узнать их ID чтобы потом выводить их в цикле. Можно было бы сначала сообщить имена категорий и делать запросы к WP по имени категории, но это не самый быстрый способ.

Получение ID рубрики WP

Получить id рубрики можно с помощью встроенных функций wp, до для этого нужно выполнять php, и записывать данные куда-то к блокноту чтобы потом написать соответствующий код. Мне это подход не нравиться и поэтому мы пойдём другим путём.

Существует плагин Reveal IDs. Суть работы его очень проста. В «админке» wordpress’а для всех рубрик, страниц, записей и т.д. в списке с их данными появляется поле, в котором появляется соответствующий id. В рубриках это будет выглядеть вот так.

Теперь мы можем сформировать массив (php) c id категорий которые нам нужны. Например:

Этот массив мы будем использовать далее.

Получение списка дочерних категорий (подкатегорий)

У нас уже есть категории первого уровня, подкатегории мы будем получать и выводить в цикле с помощью функции get_categories(); Данная функция будет принимать массив с параметрами: ID родительской категории (child_of), отображать ли пустые рубрики (hide_empty). Функция get_categories() вернет нам массив с данными подкатегорий. Я бы мог выводить родительские категории функцией get_categories(), но это несколько усложнило мне задачу.

Цикл вывода

В данной статье будут рассматриваться несколько вариантов вывода:

  1. С использованием jQuerry
  2. С использованием Bootstrap 3
  3. С использованием Bootstrap 4

Однако скелет цикла будет один и тот же. Вот простая схема

На HTML оболочку у нас будут «повешены» события с помощью селекторов. Будет два цикла. В первом цикле будет печататься название родительских категорий, тех, которые мы перечислили в нашем массиве. Второй цикл будет внутри первого, в нём будут выводиться названия дочерних категорий, ссылка на них и кол-во записей.

Код для jQuery

Код для Bootstrap 3

В bootstrap 3 нет нативного метода аккордеон и в нём будет просто, так скажем, collapse menu. Разница лишь в том, что при открытии блока другой не закрывается.

Код для Bootstrap 4

В 4-м bootstrap есть аккордеон так что там будет примерно одинаковая картина с jQuery.

Примечание

Помните, что нужно обязательно подключить jQuery и соответствующий скрипт. В первом случае это будет jQuery UI и маленький скрипт который указывает на селектор аккордеона. В случае с 3-м бутстрапом не забудьте подключить его стили в шапке и bootstrap.js после подключения jQuery, иначе ничего не будет работать. Подключение bootstrap.js без jQuery является распространённой ошибкой, из-за этого часто не работает выпадающие меню bootstrap, кстати, как сделать такое меню я писал в этой статье. И наконец для bootstrap 4 не забудьте подключить его. Всё делается так же как и с bootstrap 4.

Читайте также:  Архикад настройки по умолчанию

Хочу вам предложить воспользоваться инструментом на моём сайте «Строки». Он помогает быстро преобразовать ключевые слова из таблицы в строку разделив их запятыми.

Поддержи Xakplant

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

Источник

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 появится новый пункт меню, прямо с которого можно создавать содержимое и выводить его в стиле аккордеона. Все записи можно объединять в группы.

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

Источник

Adblock
detector