Max Mega Menu – многофункциональный плагин меню WordPress. Плагин WP Mega Menu: функциональные возможности, установка, настройка Редактирование и настройка меню в Вордпресс
В ы хотите настроить WordPress меню навигации, чтобы изменить их цвет или внешний вид? Ваша тема WordPress обрабатывает появление меню навигации на вашем сайте. Вы можете легко настроить его с помощью CSS, чтобы соответствовать вашим требованиям. В этой статье мы покажем вам, как настроить стиль WordPress меню навигации.
Способ 1: Использование ручного изменения стиля меню навигации в WordPress
Этот метод требует, чтобы вы редактировать файлы темы WordPress. Вы должны использовать его, только если вам удобно редактировать код и понять, как работает .
Лучший способ сделать пользовательские настройки в вашей теме WordPress является . Если вы только изменяете CSS, то вы можете увидеть наше руководство о том, как без изменения файлов темы.
Меню навигации в WordPress отображается в виде неупорядоченного списка (маркированный список).
Если вы только что использовали следующий тег, то он будет отображать список без каких-либо CSS классов, связанных с ним.
Ваш неупорядоченный список будет иметь имя класса ‘menu’ с каждым элементом списка, имеющий свой собственный класс .
Это может сработать, если у вас есть только одно место меню. Тем не менее, большинство тем имеет несколько мест, где можно вывести на экран меню навигации.
Использовать только классы CSS по умолчанию может привести к конфликту с меню на других местах.
Именно поэтому вам нужно определить класс CSS и расположение меню. Скорее всего, ваша тема WordPress уже это делает, путем добавления меню навигации с помощью кода, примерно так:
"primary", "menu_class" => "primary-menu",)); ?>
Этот код сообщает WordPress, что это тема отображает начальное меню. Он также добавит класс CSS primary-menu к навигации по меню.
Теперь вы можете настроить стиль вашего меню навигации с помощью этой структуры CSS.
#header .primary-menu{} // container class #header .primary-menu ul {} // container class first unordered list #header .primary-menu ul ul {} //unordered list within an unordered list #header .primary-menu li {} // each navigation item #header .primary-menu li a {} // each navigation item anchor #header .primary-menu li ul {} // unordered list if there is drop down items #header .primary-menu li li {} // each drop down navigation item #header .primary-menu li li a {} // each drap down navigation item anchor
Замените #header на класс контейнера или ID, используемого вашей темой WordPress.
Эта структура поможет вам полностью изменить внешний вид меню навигации.
Тем не менее, существуют и другие классы, которые автоматически добавляются с помощью WordPress для каждого пункта меню и меню. Эти классы позволяют еще больше настроить меню навигации.
Current_page_item{} // Class for Current Page .current-cat{} // Class for Current Category .current-menu-item{} // Class for any other current Menu Item .menu-item-type-taxonomy{} // Class for a Category .menu-item-type-post_type{} // Class for Pages .menu-item-type-custom{} // Class for any custom item that you added .menu-item-home{} // Class for the Home Link
WordPress также позволяет добавлять классы CSS к отдельным пунктам меню изнутри области администратора.
Вы можете использовать эту функцию для стилей пунктов меню, как добавление иконок изображение с помощью меню или просто изменив цвет, чтобы выделить пункт меню.
Зайдем на страницу Appearance »Menus и нажмем на кнопку .
После того, как вы проверили эти настройки, вы увидите, что добавится дополнительное поле, когда вы будете редактировать каждый отдельный пункт меню.
Теперь вы можете использовать этот класс CSS в таблице стилей, чтобы добавить пользовательский CSS. Это будет влиять только на пункт меню с помощью класса CSS, который вы добавили.
Метод 2: Настроить стиль меню в WordPress при помощи плагинов
Ваша тема WordPress использует стиль для меню навигации. Многим новичкам не очень удобно редактировать файлы темы или писать CSS самостоятельно.
Вот когда пригодится WordPress плагин стилизации меню. Это избавляет вас от редактирования файлов темы или написания кода.
Сначала вам нужно установить и активировать плагин CSS Hero. Для получения более подробной информации см наш шаг за шагом руководство о том, .
CSS Hero является премиум плагином в WordPress, который позволяет проектировать свою собственную тему WordPress , не написав ни строчки кода (без HTML или CSS).
После активации, вы будете перенаправлены, для получения вашего ключа CSS Hero. Просто следуйте инструкциям на экране, и вы будете перенаправлены обратно на ваш сайт в несколько кликов.
Теперь вам нужно нажать на кнопку CSS Hero в вашей панели администратора WordPress.
CSS Hero предлагает редактор WYSIWYG (что вы видите, то и получаете). Нажатие на кнопку приведет вас на ваш сайт с плавающей панелью инструментов CSS Hero видимой на экране.
Вам нужно нажать на синюю иконку в верхней части, чтобы начать редактирование.
Направьте мышь к вашему меню навигации и CSS Hero выделить его, показывая границы вокруг него. При нажатии на подсвеченное меню навигации, он покажет вам элементы, которые вы можете редактировать.
В приведенном выше скриншоте, показывает нам пункт меню, навигации по меню, контейнер навигации меню и т.д.
Давайте предположим, что мы хотим изменить цвет текста всех элементов в меню навигации. В этом случае мы будем выбирать меню навигации, которая затрагивает все меню.
Теперь CSS Hero покажет вам различные свойства, которые можно редактировать как текст, фон, границы, поля, отступы и т.д.
Вы можете нажать на любое свойство, которое вы хотите изменить. CSS Hero покажет вам простой интерфейс, где вы можете внести свои изменения.
В приведенном выше скриншоте мы выбрали текст, и он показал нам хороший интерфейс для выбора шрифтов, изменение цвета текста, размер и другие свойства.
По мере внесения изменений, вы будете иметь возможность увидеть их в живую в теме предварительного просмотра.
После того, как вы удовлетворены изменениями, нажмите на кнопку Сохранить на панели инструментов CSS Hero, чтобы сохранить изменения.
Лучше всего в использовании этого метода является то, что вы можете легко отменить любые изменения, которые вы делаете. CSS Hero сохраняет полную историю всех ваших изменений, и вы можете вернуться назад и вперед между этими изменениями.
Мы надеемся, что эта статья помогла вам узнать, как создать стиль меню навигации в WordPress.
Mega Main Menu это плагин для быстрого создания меню для wordpress. Оно имеет особые функции, которые облегчают работу на нем.
- Липкое и выпадающие меню, значки, логотип и поиск.
- Разнообразные цвета. Причем можно изменить цвет любой опции в меню. Кроме цветов используются также градиенты, фоновые рисунки и изображения.
- Контент имеет до 10 вариаций. Также можно содержимое поместить в выпадающие меню. В нем может быть все от ссылок до изображений и шорткодов.
- В меню сайта можно использовать до 1600 иконок. Эти иконки имеют векторную графику поэтому больших объемов и разрешений они не требуют. Это позволит использовать их даже на сотовом телефоне.
- Шрифты также имеют свою различную вариацию. В нем можно использовать 600 google шрифтов, которые легко можно настроить в настройках плагина.
Плагин устанавливается обычным методом, как и все программы и затруднений при этом не возникает. После того как вы активировали его-то далее вы должны перейти в главное меню. На странице этого меню в левой части вы увидите четыре опции. Это главная опция с общими настройками, потом опция настроек внешнего вида страницы под названием skins, которая изменяет цвет, шрифт и т. д. Также две последние опции это связь с поддержкой и специальные настройки для профессионалов.
В опциях General
есть три под опции это primary, mobile_menu, secondary. Раздел primary служит для настроек всех основных значений меню. Например, там вы можете установить высоту, сглаживание иконок, настроить изображение логотипа. В mobileи secondary эти настройки воспроизводятся отдельно.
В настройках Skins
также имеются три вариации настроек это primary
, extra
, footer
. В первом варианте мы можем настроить фон первичного контейнера и выбрать горизонтальный, вертикальный и радиальный вид. Потом шрифт первого пункта и т. д.
В конкретных параметрах можно установить отзыв на портативные устройства. Затем можно установить разрешение экрана и стиль.
Последняя опция это настройка структуры сайта. Здесь вы выбираете какую опцию включить, а какую выключить.
Итак, это отличное плагин меню, который сможет преобразить вашу тему. С её помощью вы можете легко наполнить ее иконками, картинками и прочие элементы. Главное, его качество в том что он имеет легкий функционал. В отличие от других плагинов Mega Main Menu имеет ничтожное влияние на сайт.
Привет! В моей жизни как всегда происходит множество событий, поэтому очень сложно выкроить время для блога. Вчера мы купили билеты в Шри-Ланку и скоро улетаем на 4 месяца, приезжайте в гости! А теперь я занимаюсь поиском самого красивого свадебного платья:))
Сегодня поговорим о том, как создать меню в WordPress, а также добавлять данные блоки в произвольных областях шаблона.
Мы научимся настраивать меню и редактировать его по своему усмотрению.
Редактирование и настройка меню в Вордпресс
Для начала разберем функционал, доступный нам в админ-панели блога. В новых шаблонах, совместимых с последними версиями WordPress, вывод меню достаточно прост и настройка не составляет особых трудностей.
После того, как мы создали дочернюю тему, в которую можно вносить изменения без ущерба для основной темы, добавим в ее файл function.php следующую функцию.
1 2 3 | register_nav_menus( array ( "additionalmenu" => __( "Additional Menu" , "Название Вашей Темы" ) ) ) ; |
register_nav_menus(array("additionalmenu" => __("Additional Menu", "Название Вашей Темы")));
Если вы не создаете дочернюю тему, то добавляем ее в основной файл функций вашей темы.
Данная функция позволит нам добавить дополнительное меню WordPress в наш шаблон и создаст для него еще одну область.
После добавления заходим в админку в «Управление областями»:
Должна появиться дополнительная область темы с названием, которое мы задали в функции.
Нажимаем «Использовать новое меню», если хотим изменить разделы для дополнительной области, либо выбираем «Главная». Тогда в новой области будут отображаться те же разделы, что и в Primary Menu.
В нашем случае создаем новое меню под названием Additional:
Выбираем для него область темы «Additional Menu».
Но теперь нам нужно связать эту область с блоками шаблона. Например, нам нужно сделать дополнительное меню под шапкой сайта на WordPress. Заходим в файл header.php или копируем его в дочернюю тему. После тега body добавляем следующее:
1 2 3 | <div id = "additionalmenu" > ( array( "theme_location" = > "additionalmenu")); ?> </ div > |
Смотрим результат:
У нас над шапкой образовалось дополнительное меню. Теперь нам нужно задать для него стили, выровнять пункты в строку и спустить блок под шапку.
Вносим следующие изменения в файл стилей style.css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #additionalmenu nav { width : 940px ; /*ширина контейнера */ margin : 0 auto ; } #additionalmenu li { display : inline ; padding : 10px ; /* отступы */ margin : 20px 0 ; } #additionalmenu { width : 100% ; top : 420px ; /* Отступ от верхнего края */ background-color : #000 ; /* цвет фона */ position : relative ; } |
#additionalmenu nav { width: 940px; /*ширина контейнера */ margin: 0 auto; } #additionalmenu li { display: inline; padding: 10px; /* отступы */ margin: 20px 0; } #additionalmenu { width: 100%; top: 420px; /* Отступ от верхнего края */ background-color: #000; /* цвет фона */ position: relative; }
Смотрим, что получилось:
Отображение созданного нами меню еще далеко от идеала, но, при должном , вы сможете привести его в соответствующий вашему блогу вид.
Виджеты и плагины для добавления меню в WordPress
Предлагаю к просмотру видео о создании меню в WordPress:
В статье про упоминался виджет «Произвольное меню». Разберем его подробнее.
Заходим «Внешний вид» — «Виджеты», находим виджет «Произвольное меню» и перетаскиваем его в доступную для вашей темы и подходящую для блога область:
В нашем случае блок меню добавлен в сайдбар. Для него мы выбрали разделы, созданного нами блока Additional.
Соответственно в боковой панели справа у нас отобразится следующий блок:
Кроме встроенного в тему стандартного виджета, также есть множество дополнительных плагинов, предназначенных для создания различных видов меню: вертикальные, горизонтальные, выпадающие и т.д.
Вот, к примеру, плагин для создания вертикального мультиуровневого меню в WordPress: Navgoco Vertical Multilevel Slide Menu.
Или обладающий расширенными функциями настройки виджет Dropdown Menu Widget.
Также популярны виджеты с JQwery эффектами для меню, например: JQuery Slick Menu Widget.
Разберем на примере принцип его работы.
После установки виджета JQuery Slick Menu Widget, переходим во «Внешний вид» — «Виджеты».
Среди списка доступных виджетов должен появится новый, установленный нами. Перемещаем его в доступную область, в нашем случае сайдбар:
Раскрываем его настройки:
Выбираем название меню (разделы, которые мы создавали), Tab Text – название блока, который будет выводиться на сайте, место размещения (выберем Left – слева), Offset – отступ от верхнего края в пикселях, Animation Speed – скорость анимации (Fast). Можно выбрать Auto-Close Menu, чтобы блок исчезал автоматически. И выбираем цвет блока. Нажимаем сохранить и смотрим результат:
Слева в шапке появилось выдвижное меню. При клике на язычок, появляется отображение разделов:
При повторном нажатии, блок снова исчезнет.
Это лишь один из видов установки, редактирования и вывода меню в WordPress.
Выбирайте наиболее приемлемый и удобный способ создания меню для своего WordPress-блога. Удачи!
Это можно сделать с помощью стилей.
Но вам нужно понимать, что у вас Меню тогда необходимо переместить из верхней части в Сайдбар, которого у вас пока нет.
Ну то есть, если эта Тема позволяет, подключайте с правой стороны Сайдбар и переносите в него Меню.
А чтобы оно было вертикальным, достаточно добавить / изменить CSS
Main-navigation ul li, .secondary-navigation ul li { display: block !important; }
Ну там еще после этого немного нужно поменять отступы и прочие свойства.
Возможно я Вас неправильно понял, но у меня Max mega menu уже находится в области левой колонки (оно черного цвета, выстроилось в 2 строки из за обраниченности области, а так оно по умолчанию в плагине горизонтальное), добавил туда через виджеты, в верхней части у меня стандартное меню темы и они мне оба нужны, сейчас попробую CSS, спасибо
Возможно, что я тоже не совсем правильно вас понял.
Я говорил о меню, которое у вас на скрине в горизонтальном верхнем блоке салатового цвета «Чай Кофе Сладости…»
Но перечитав ваш ответ, понимаю, что мы говорим о разных меню.
На скрине у вас вижу в левой части это самое Max mega menu, но не вижу его на сайте по вашей ссылке.
И т.к. не видел его и вчера, то на скрин и не смотрел.
Сейчас также не наблюдаю.
Пытаюсь что-то сделать постоянно, разное ставлю и убираю, пока не понял как это меню сделать вертикальным, ищу другое подходящее. Для этого меню такое же решение с помощью css можно применить как Вы написали? Вы не могли бы подсказать, в какую именно часть кода вставить данные строки, в код самого плагина? Расположение имеет значение?
Зашел Плагины-редактировать-выбрал Max mega menu, дальше есть такие разделы:
css
megamenu.scss
reset.scss
toggle-blocks.scss
admin
mixin.scss
Ни в одном из них не нашел подобных строк, чтобы исправить
Я просто совсем нуб и не понял, зачем Вам нужно, чтобы у меня оно отображалось, видимо чтобы код посмотреть и подсказать. Нашел в форуме поддержки Max Mega Menu ответ админа, что вертикальное доступно только в Про (платной) версии, поэтому от него пока что придется отказаться. Не могли бы Вы пожалуйста посоветовать какой-либо аналогичный плагин, критерии такие:
— возможность установить в сайдбар
— меню должно быть выпадающим
— при переходе на какую-либо из категорий, чтобы оно оставалось открытым на данном этапе, а не закрывалось полностью с обновлением страницы
Именно так.
Не видя это самое Меню — невозможно давать советы и рекомендации. Возможно, что достаточно пары строчек в CSS. Но не факт.
Хотя, если вы действительно планируете использовать это Max Mega Menu раскрывая все его возможности, то за такой продукт 23 доллара — совсем не много. Оно того стоит.
Насколько я понимаю, под термином мега меню в WordPress подразумевают сверхфункциональное огромный блок со множеством разных элементов: списками, картинками, текстами, слайдерами и т.п. Наверняка вы такие встречали. Когда-нибудь опубликую полноценную подборку по теме, но сегодня речь пойдет о вполне конкретном решении — плагине Max Mega Menu. Выбрал его так как уже тестировал в работе для , он часто попадает в списки , плюс тут имеется одна из самых толковых и постоянно развивающихся бесплатных (Lite) версий.
Сразу после установки Max Mega Menu в WordPress ваша стандартная навигация преобразуется в более мощный и функциональный механизм с возможностью добавления разного рода виджетов, удобным редактором и кучей дополнительных настроек. Скачивайте плагин отсюда либо ищите его через WP админку.
На данный момент минимальная требуемая версия системы — 3.8, работает до последней сейчас 4.8.3. Загрузок около 100 тысяч. Мне нравится, что за последние 2 месяца было исправлено почти 70 разных багов из 89, что свидетельствует о хорошей активности разработчиков.
Основные функции и фишки Max Mega Menu
- Поддерживаются несколько мест размещения, для каждого из которых сможете выбирать свои параметры;
- Простая работа с элементами навигации через Drag&Drop.
- Добавление .
- Есть удобный редактор тем оформления.
- Добавление любых виджетов: картинки, тексты, списки и др.
- Условие срабатывания: при наведении, клике.
- Эффекты вывода подменю: выезд, появление/затухание и т.п.
- Разные дополнительные опции по типу скрытия текста/ссылки или выключения на мобильной версии. Последний пункт поможет упростить создание отдельного .
- Выравнивание для пунктов меню.
Чтобы понять насколько все это круто и удобно, советую просто глянуть следующее видео:
Кроме всего разработчики могут похвастаться очень правильными и корректным подходим к созданию своего решения. WordPress Max Mega Menu — действительно качественный продукт, вот вам парочка подтверждений:
- все оформление задается с помощью одного CSS файла, где вообще не используется «знаменитое» свойство important;
- поддержка Retina, адаптивность, срабатывание на смартфонах и планшетах (тестировали практически во всех существующих десктопных и мобильных браузерах);
- чистый код, JS скрипты при gzipped будут занимать менее 2Кб;
- поддержка разных фильтров/хуков;
- детальная документация + в отличии от многих других плагинов, форум поддержи достаточно живой.
Настройка и работа с Max Mega Menu
Сразу после установки в админке появится одноименный раздел. В «Основных настройках» вы сможете подправить несколько опций, касающихся поведения подменю, мобильных девайсов и т.п. Куда более интересными выглядят «Темы».
Здесь сразу 6 вкладок с разными фишками:
- Основные — выбирайте тип стрелок, тени, высоту строки и т.п.
- Меню бар — оформление основного блока: фоны, отступы, шрифты, наведение.
- Mega Menus — стили и настройки Mega Menu.
- Выпадающие — аналогичный остальным набор стилей.
- Mobile Menu — размер экрана для срабатывания и другие опции мобильного меню.
- Кастомное оформление — добавляйте свои CSS стили.
После того как основные параметры заданы, переходим в раздел WP админки «Внешний вид» — «Меню».
Вам нужно выбрать меню, с которым хотите работать, а затем в его настройках поставить галочку напротив «Включено». Активировать Max Mega Menu в WordPress получится только когда для меню заданна область отображения в шаблоне (шапка, футер, сайдбар и т.п.). Здесь же есть параметры эффектов и событий срабатывания.
Чтобы открыть редактор модуля наводим курсор на один из пунктов иерархии и нажимаем на появившуюся кнопку «Мега меню». Во всплывающем окне отобразится соответствующий инструмент, который вы могли видеть в видеопрезентации плагина выше.
Тут сможете, во-первых, определить количество столбцов, а также добавить любые виджеты. Кроме того, допускается изменение размеров каждого элемента. Выбирать виджеты разрешается только в первом (главном) уровне навигации. Если кликать по кнопке «Мега меню» напротив других элементов, то только для задания иконок и разных свойств:
Скрытие текста/линка, выравнивание и отключение на декстопе/мобильных — весьма полезный набор функций. Допускается задание подобных опций в каждом пункте меню. Не забывайте сохранять изменения.
Max Mega Menu Pro и Выводы
Вообще у данной разработки кроме репозитория есть еще отдельный сайт . Там собраны описания всех возможностей модуля, представлена документация и небольшая его демка, а также есть ссылка на тех.поддержку и загрузку. Стоимость продвинутой версии Max Mega Menu Pro, в принципе, не такая уж и высокая — для 1 / 5 / 99 сайтов она обойдется вам в $23 / $35 / $99 долларов соответственно. Сюда входит апдейт и поддержка в течении года. Если вы разработчик, то взяв Pro Business Licence и установив плагин на 5 сайтов, получите итоговую стоимость решения = 7 долларам!
Что же входит в Max Mega Menu Pro:
- Интеграция Google Fonts, наличие FontAwesome и пользовательских иконок в настройках.
- Поддержка вертикального и меню типа аккордеон.
- Общий логотип в навигации + блок поиска.
- Стили отдельных пунктов.
- Поддержка WooCommerce и EDD.
- Возможность настройки .
- Поиск, иконки/лого и HTML для мобильных элементов.
- Автообновление и приоритетная поддержка.
Для рядовых классических сайтов вполне хватает обычной бесплатной версии Max Mega Menu в WordPress, которая по функциональности очень хороша. Разных настроек здесь очень много. Понравилось также, что разработчики поддерживают свое детище, относительно быстро исправляют текущий баги и заботятся о чистоте/корректности кода. На ознакомление придется потратить некоторое время, но оно того стоит. Чтобы проще было разобраться с работой плагина — смотрите видео и читайте документацию.
А какие модули Mega Menu в WordPress вы используете и почему? Работали с данным решением, что можете по нему добавить?