Как создать меню WordPress, простое и выпадающее меню WP. Как создать боковое меню в wordpress Плагин вертикальное меню для wordpress через виджет

Навигация является важной частью блога и влияет на впечатление о Вашем сайте. Сайт с плохой навигацией пагубно влияет на развитие и рост сайта.

WordPress по умолчанию поддерживает Меню (модуль навигации), дизайн которого можно менять по своему усмотрению. На сегодняшний день все темы WordPress поддерживают такую функцию.

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

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

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

10. UberMenu

Более 50 тысяч продаж говорят о том, что плагин UberMenu является достаточно популярным продуктом и трендом на платформе CodeCanyon. Этот плагин поддерживает практически все функции, которые Вам потребуются для апгрейда обычного скучного меню. UberMenu – это удобный, настраиваемый, адаптивный плагин меню WordPress. Он предлагает огромное количество пользовательских настроек для создания неповторимого дизайна. Кроме того, плагин позволяет создать версию для сенсорных экранов и использовать визуальные анимированные эффекты.

Ключевые функции UberMenu:

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

9. Admin Menu Editor

У WordPress есть редактор меню по умолчанию, но этот плагин намного более мощный. Если Вам недостает функций, Вы должны обязательно установить этот плагин. Он абсолютно бесплатный, его использует более 20 тысяч людей. С этим плагином с кастомизацией и созданием меню справится даже новичок: все это благодаря функции перетаскивания объектов мышкой. Плагин постоянно обновляется, чтобы быть полностью совместимым с версией WordPress.

8. NOO Menu

Если Вам понравился наш первый плагин, но Вы все еще хотите что-то другое, Вам обязательно нужно присмотреться к NOO Menu. Плагин предоставляет все основные функции, но обладает несколько другим пользовательским интерфейсом, который предлагает новые элементы дизайна. Как раз на дизайн и ориентируется этот плагин, который можно приобрести на платформе CodeCanyon. С помощью плагина можно добавить мега меню на сайт, а потом кастомизировать меню в соответствии со своим желанием. Плагин мало весит и адаптирован для смартфонов, планшетов и любых браузеров.

Ключевые функции NOO Menu:

Показывает изменения в режиме реального времени, что делает кастомизацию очень удобной
Поддерживает вертикализацию и горизонтацию.
В плагине предустановлено 9 стилей с аддонами для последующей кастомизации.
Множество шрифтов Google, опцию прозрачности и 350 иконок Font Awesome.

7. WordPress Menufication

Этот премиум плагин позволяет создавать навигацию, адаптированную для мобильных телефонов. Он использую первый мобильный пользовательский интерфейс с элегантными элементами дизайна и также является очень простым в использовании. В основном использует Flyout, а для анимации – CSS3. Плагин доступен на платформе CodeCanyon со всей необходимой документацией; также предоставляется 6 месяцев бесплатной поддержки производителя.

Ключевые функции WordPress Menufication:

It is totally integrated and compatible with WordPress default Menu system.
Поддерживает сенсорные жесты на тачскринах смартфонов и планшетов.
Позволяет добавлять логотип.
Автоматически улучшает функционирование.

6. Mega Main Menu

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

Ключевые функции Mega Main Menu:

Имеет 10 разных визуальных инструментов и функциональных способностей, что предоставляет широкий выбор.
Предоставляет более 600 шрифтов Google, 1600 иконок Vector и бесконечно разнообразную цветовую палитру.
Плагин поддерживает работу на смартфонах и планшетах.

5. LMM

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

Ключевые функции LMM:

Имеет опцию админа, которая позволяет контролировать доступные опции и разные конфигурации.
Предлагает неограниченное число тем с возможностью последующей кастомизации.
Совместим с WooCommerce и поддерживает цифровую загрузку.

4. ScrollNav

Если Вы ищите мега плагин для WordPress, который позволит Вам добиться отличных результатов, то ScrollNav Вам идеально подойдет. Этот мега плагин разработан специально для улучшения навигации пользователя на странице с помощью круглой кнопки, которая содержит разные функции. Плагин предлагает более 20 стилей с возможностью кастомизации, а также постоянные обновления, необходимые для улучшенной работы.

ScrollNav совместим с различными браузерами, такими как Chrome, Opera, IE11, IE10, Firefox и Safari. Этот плагин также поддерживает большое количество расширений, такие как PHP, HTML, JavaScript JS и CSS. Более того, ScrollNav совместим с BuddyPress 1.7.x, BuddyPress 1.8.x и BuddyPress 1.9.x.

3. Big Voodoo – мега меню плагин

Мечта каждого – это устойчивая платформа, которая будет быстро работать и давать простой доступ к меню. Более того, этот плагин дает полную свободу в кастомизации меню, что позволяет создать нечто неповторимое и привлекательное. Big Voodoo имеет меню ссылок по теме – ключевое преимущество этого плагина для WordPress 3.5. Необходимо отметить одну из ключевых функций этого мега меню плагина: сохранение меню в отдельную таблицу.

Итак, как Big Voodoo улучшает Ваше меню? Добавление шорткода/пользовательского HTML в меню по Вашему выбору означает, что Вы можете быстро и удобно отображать виджеты и любые другие стили в Вашем меню. Вы можете добавить раздел или поделить на колонки Ваше меню, что приведет в более мощному и простому результату. Более того, Вы можете добавить к Вашему меню уже существующее меню.

Для корректной работы плагина Big Voodoo Вам понадобятся PHP 5.3 и WordPress 3.5. Установка этого плагина является простейшей процедурой. Сам плагин прост в использовании и обладает широким спектром функций. Он подойдет как для новичков, так и для опытных пользователей.

2. LMM

LMM – это аббревиация Liquida Mega Menu. В эффективности этого невероятно популярного мега плагина невозможно сомневаться. Самое интересное в отношении LMM – это то, что он превосходно работает, неважно, разработчик Вы или простой пользователь. Этот плагин оставляет о себе очень приятное впечатление. LMM прекрасно справляется с поставленной задачей, не заставляя Вас беспокоиться о технических неполадках. Если Вы хотите создать мощное меню, то LMM – идеальный вариант, обладающий кучей функций.

Те, кто уже использует этот мега меню плагин, будут настойчиво рекомендовать Вам LMM. Этот плагин предоставляет широкие возможности для кастомизации, а также обладает большим набором шрифтов Google и иконок Font. Более того, плагин совместим с WooCommerce, тем самым позволяя управлять платформами онлайн-шопинга. Liquida Mega Menu обладает великолепными темами, а также позволяет создавать меню вертикальной ориентации для мобильных устройств и меню горизонтальной ориентацией для устройств с широким экраном.

1. Supermenu

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

После установки плагина Вам дается несколько типов меню на выбор. Можно использовать CSS3 для создания анимации. Также в наборе идет более 600 шрифтов Google, среди которых Вы точно найдете тот самый, который будет полностью соответствовать Вашему вкусу.

Пользователи плагина Supermenu утверждают, что он прекрасно работает с любой темой. У плагина есть бесконечное количество функций, которые делают кастомизацию полной и простой. Можно установить свой логотип или спрятать его, работать с социальными иконками и боковым меню. Прекрасная стилизация меню является ключевым достоинством Supermenu. С помощью этого плагина можно выбрать цвет фона, настроить границы меню, подогнать его под общий стиль сайта. Этот плагин воплощает в себе все необходимые функции для создания идеального меню и немного больше. Он простой, полный и дико популярный.

Заключение

Каждый из этих плагинов меню легок в использовании, но необходимо помнить о том, что нельзя перебарщивать. Если меню будет переполнено ссылками, картинками и прочими деталями – это не будет выглядеть привлекательно. Помните, что красота и функциональность заключаются в простоте. Расскажите в комментариях, какой плагин из нашего списка пришелся Вам по вкусу и почему. Это важно не только для нас, но и для других читателей!

Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress! Сегодня вы узнаете о супер полезном плагине, который позволит вам создать горизонтальное выпадающее меню. Вы сможете вставлять в выпадающее меню любые виджеты, текст, редактор, фото, видео, формы, html код.

Вы сможете полностью настроить внешний вид меню и настроить выпадающее меню. Можно добавить в горизонтальное выпадающее меню до 8 восьми колонок. Можно отключить выпадающее меню для мобильных устройств. Очень гибкий плагин, вы сможете сделать Супер меню!

Установить Супер плагин вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

General Settings .

– Click Event Behaviour, поведение при клике. Здесь у вас на выбор два варианта:

First click will open a sub menu, second click will close the sub menu , первый клик открывает подменю, второе нажатие закрывает подменю;
First click will open a sub menu, second click will follow the link , первый клик открывает подменю, второй клик по ссылке.
Оставьте по умолчанию, ничего не меняйте.

– Mobile Menu Behaviour, поведение на мобильном меню,

Standard – Open sub menus will remain open until closed by the user , Стандарт – открытое подменю будет оставаться открытым, пока его не закроет пользователь.
Accordion – Open sub menus will automatically close when another one is opened , Аккордеон – открытые подменю будет автоматически закрываться, когда другое открыто.

– CSS Output, оставьте по умолчанию, ничего не надо менять здесь.

– Menu Item Descriptions, включить или отключить описание для пунктов меню.

– Active Menu Instances, Некоторые темы будут выводить расположение меню несколько раз на одной странице. Например, ваша тема может выводить расположение меню после главного меню, затем снова для мобильного меню. Этот параметр можно использовать, чтобы убедиться, что меню Max Mega Menu применяется только к одному из этих экземпляров.

– .

Menu Themes .

– Select theme to edit, здесь указано меню, которое вы будете редактировать. Можно создать и выбрать другое меню.

– Theme Title, заголовок темы меню, оставьте по умолчанию.

– Arrow, можно выбрать стрелку, которая отображается в пункте меню с выпадающим меню.

– Line Height, линия высоты.

– Z Index, показатель Z Index, можно оставить по умолчанию.

– Shadow, можно настроить тень меню.

– Hover Transitions, включить переходы при наведении на пункты меню.

– Reset Widget Styling, отключить стили виджетов Mega Menu.

Menu Bar .

– Menu Height, высота меню.

– Menu Background, цвет фона меню.

– Menu Padding, обивка меню.

– Menu Border Radius, радиус границы меню.

– Menu Items Align, расположение пунктов меню.

– Menu Item Background, цвет фона пунктов меню.

– Menu Item Background (Hover), цвет фона пункта меню при наведении.

– Menu Item Spacing, интервал пунктов меню.

– Font, параметры шрифта, цвет, размер, расположение, семейство и т.д.

– Font (Hover), параметры шрифта при наведении.

– Menu Item Padding, обивка пунктов меню.

– Menu Item Border, параметры границы пункта меню.

– Menu Item Border (Hover), параметры границы пункта меню при наведении.

– Menu Item Border Radius, параметры радиуса границы пункта меню.

– Menu Item Divider, разделитель меню.

– Highlight Current Item, выделять текущий пункт меню.

Mega Menus .

– Panel Background, цвет фона выпадающего меню.

– Panel Width, ширина окна выпадающего меню.

– Panel Padding, обивка.

– Panel Border, цвет и размер границ.

– Panel Border Radius, радиус границы.

– Item Padding , обивка пункта меню в выпадающем меню.

Widgets .

– Heading Font, параметры шрифта заголовка виджета в выпадающем меню.

– Heading Padding, обивка заголовка.

– Heading Margin, отступы от границ заголовка виджета.

– Header Border, параметры границы бордюра.

– Content Font, шрифт в содержании виджета.

Second Level Menu Items .

– Font, шрифт пунктов меню второго уровня.

– Font (Hover), шрифт при наведении.

– Background (Hover), цвет фона при наведении.

– Padding, обивка.

– Margin, отступ.

– Border, бордюр, граница.

Third Level Menu Items . Те же настройки, только для пунктов меню третьего уровня.

Flyout Menus .

– Menu Background, цвет фона выпадающего меню второго или третьего уровня.

– Menu Width, ширина меню.

– Menu Padding, обивка.

– Menu Border, граница.

– Menu Border Radius, радиус границы.

– Item Background, цвет фона пункта меню.

– Item Background (Hover), цвет фона пункта при наведении.

– Item Height, высота пункта меню.

– Item Padding, обивка пункта.

– Item Font, шрифт текста в пункте меню.

– Item Font (Hover), шрифт при наведении.

– Item Divider, разделитель элемента.

Mobile menu .

– Toggle Bar Designer, здесь показано как выглядит меню на мобильных устройствах.

– Responsive Breakpoint, ширина для перехода в мобильное меню.

– Toggle Bar Background, цвет фона кнопки открытия мобильного меню.

– Disable Mobile Toggle, можно отключить переключатель меню.

– Toggle Bar Height, высота переключателя мобильного меню.

– Mega Menu Columns, сколько колонок в выпадающем меню на мобильном сайте.

– Menu Background, цвет фона мобильного меню.

– Menu Item Height, высота пункта меню.

Custom Styling . Здесь можно добавить свои CSS стили для меню.

– Сохраните сделанные изменения .

Menu Locations .

– здесь вы сможете создавать области меню, в которые потом сможете добавлять меню. Чтобы создать область для меню, нажмите на кнопку – Add another menu location .

Область меню вы сможете добавлять на сайт, с помощью шорткода или php кода.

На странице: Внешний вид – Меню – Управление областями , вы сможете добавить меню для области.

Tools .

– Cache, здесь можно очистить кэш CSS, не обязательно, кэш автоматически очищается при каждом сохранении меню.

– Plugin Data, удалить все данные плагина, сохранённые в базе данных WordPress. Только в случае удаления плагина!

– Export Theme, можно экспортировать тему мега меню в формате JSON или PHP.

– Import Theme, можно импортировать тему мега меню.

– Enable, поставьте здесь галочку, чтобы включить мега меню.

– Event, здесь можно выбрать как будет открываться выпадающее меню.

– Effect, можно выбрать эффект для выпадающего меню.

– Theme, тема меню, по умолчанию.

После включения мега меню, в каждом виджете страницы, при наведении, появится кнопка – Mega Menu . Нажмите на данную кнопку, чтобы настроить выпадающее меню для данного пункта меню.

Далее, у вас откроется окно. Вверху справа нажмите по широкому полю, чтобы выбрать виджет и добавить его в меню. Вверху справа вы можете выбрать сколько будет колонок в выпадающем меню. Виджеты можно распределять по выпадающей панели, можно указать какую часть виджет будет занимать, пример 1/2 или 1/3. Жмите по стрелкам вправо и влево, чтобы указать какую часть будет занимать виджет.

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

– Hide Text, скрыть текст из пункта меню.

– Hide Arrow, скрыть стрелку.

– Hide item on Mobile, скрыть пункт меню на мобильных устройствах.

– Hide item on Desktop, скрыть пункт меню на компьютерах.

– Menu item Align, расположение пункта меню.

– Sub Menu Align, расположение меню второго уровня.

– Hide sub menu on Mobile, скрыть меню второго уровня на мобильных устройствах.

– Сохраните изменения .

Всё готово! Сохраните меню, перейдите на сайт и наслаждайтесь результатом!

Внимание! После включение мега меню, стиль вашего меню по умолчанию будет полностью изменён. Вам нужно будет настраивать стиль меню в настройках, на вкладке “Menu Themes” .

Остались вопросы? Напиши комментарий! Удачи!

Горизонтальное выпадающее меню Супер плагин WordPress обновлено: Май 2, 2019 автором: Илья Журавлёв

Давайте рассмотрим решение одной тривиальной задачи с которая время от времени встречается разработчикам. Бывает, что на сайтах нужно выводить сразу два меню, которые при этом между собой взаимосвязаны: одно верхнее горизонтальное 1-го уровня, а второе в сайдбаре 2-го уровня. Причем в боковом отображаются только те подпункты, для которых выбран соответствующий родительский элемент в главном меню. Например, если у вас в шапке сайта есть перечень стран, то выбрав, допустим, Италию, в сайдбаре получите только лишь список итальянских городов.

Теоретически, реализовать такую фишку можно с помощью функции и какого-то хитрого PHP кода, но я предлагаю воспользоваться готовым решением — виджетом меню для wordpress под названием Advanced Sidebar Menu. Это максимально просто и не нужно делать никакие правки шаблона.

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

Никаких дополнительных настроек после установки делать не нужно, в разделе «Внешний вид» — «Виджеты» просто появится 2 новых элемента: Advanced Sidebar Pages Menu и Advanced Sidebar Categories Menu. Настройки данных виджетов меню для wordpress плюс-минус похожие:

Title — заголовок виджета.
Include Parent Page — добавлять ли родительский элемент в меню.
Include Parent Even With No Children — включать ли страницы без подстраниц.
Order By — варианты сортировки (порядковый номер, заголовок, дата).
Use this Plugin’s Styling — использование стилей оформления от плагина.
Pages to Exclude (ids) — исключаемые страницы.
Always Display Child Pages — всегда выводить подстраницы.
Levels to Display — количество уровней меню для отображения.

Как видите на скриншоте выше, для категорий все, в принципе, аналогично, но без сортировки и уровней. Плюс добавляется опция отображения элемента на странице с полным текстом записи (Display Categories on Single Posts).

Итого, в большинстве случаев вам просто нужно добавить виджет меню для wordpress в сайдбар и он сразу начнет работать. Конечно, при этом на сайте должна существовать соответствующая иерархия с подстраницами. Если честно, не совсем понятно как настроить зависимое меню для сложных проектов с родительской страницей, начиная со 2-го уровня. В описании модуля сказано, что нужно назначить родительскую страницу/категорию, но в настройках ничего похожего я не увидел. С другой стороны подобные ситуации встречаются крайне редко, как правило, зачастую у вас всего 2 меню (боковое и главное), поэтому виджет Advanced Sidebar Menu полностью подходит.

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

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

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

Max Mega Menu

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

Особенности Max Mega Menu :

Основывается на стандартной системе меню WordPress
Поддерживает несколько мест меню, каждое со своей конфигурацией
Конструктор путем перетаскивания элементов
Показывает виджеты WordPress в меню
Настраиваются стили меню с помощью встроенного редактора тем
Переходы подменю Fade, Fade Up, Slide Up или Slide
Добавление иконок к пунктам меню
Опции пунктов меню, включая «Скрыть текст», «Отключить ссылку», «Скрыть на мобильном» и т. д.
Выравнивание пунктов меню

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

Особенности Admin Menus Fixed:

Работает с WordPress 3.5+
Имеет три варианта Admin Menus Fixed
Включает в себя панель инструментов WordPress
Автоматически встраивается в WordPress
Показывает элемент окна администратора