Мега меню вордпресс. Как настроить стиль меню навигации в WordPress

WordPress меню навигации — Mega Main Menu

Всем привет уважаемые читатели. Сегодняшняя статья расскажет вам о новом, великолепном плагине для создания красивого и функционального WordPress меню — Mega Main Menu.

Недавно помогал своему знакомому «обустраивать» свой новый блог. Выбирали тему оформления и остановились на популярном шаблоне Weaver 2. Всем тема ему понравилась кроме одного – меню навигации. Как по мне, то у Вейвера вполне себе нормальное меню, но знакомому хотелось чего-то более яркого и главное — функционального. Сначала рассматривали вариант с UberMenu о котором, я уже не так давно писал. Но чуть позже остановились на новом плагине под названием — Mega Main Menu. Плагин оказался на удивление хорош, и я решил посвятить ему отдельную статью.

Вообще говоря, плагинов изменяющих навигационное меню WordPress, на удивление мало. В принципе, создать собственное меню не так уж и сложно, и в сети можно найти много разных примеров или отдельных кусков кода. Однако все это касается, как правило, простых двух или трех уровневых вариантов. Однако требования растут и современному пользователю подавай уже не просто красиво анимированное меню навигации, но и всяческий, продвинутый функционал. Всем этим в полной мере обладает плагин Mega Main Menu. Давайте рассмотрим этот плагин и его возможности.

Меню навигации WordPress — Mega Main Menu

Mega Main Menu позволяет быстро создавать современное меню навигации для сайтов на WordPress и имеет следующие, ключевые особенности:

• «Липкое» меню, добавление значков, выпадающие меню, логотип и поиск которые могут присутствовать в одном меню.
• Неограниченные вариации цвета. Вы можете легко изменить цвет любого элемента меню. Используйте «плоские» цвета, градиенты и фоновые текстуры или изображения.
• Более 10 различных комбинаций контента. Вы можете поместить любое содержимое, в выпадающем меню — ссылки, текст, изображения, виджеты и шорткоды.
• Используйте 1600+ иконок в меню вашего сайта. Векторные иконки имеют четкую графику, которая будет отлично смотреться на любом устройстве, с любым разрешением.
• 600+ Google шрифтов. Вы можете выбрать из более чем 600 google шрифтов для вашего меню. Шрифт легко меняется их настроек плагина.

Установка плагина стандартная и никаких проблем вызвать не должна. После активации плагина переходим в Внешний вид — Mega Main Menu

Страница настроек плагина имеет четыре основные закладки, на каждой из которых расположены раскрывающиеся собственно с самими настройками:

General имеет три подраздела – primary, mobile_menu и secondary. В разделе primary можно указать все основные значения меню, такие как высота, выравнивание иконок относительно текста, настройка сепаратора, визуального скругления углов меню, включить прилипаемость меню наверху экрана, настроить показ логотипа и прочее. Для mobile_menu и secondary все эти настройки дублируются отдельно. Стоит отметить так же возможность переключения меню из привычного горизонтального вида в вертикальное.

Skins позволяет полностью настроить «шкурку» вашего меню. Как и в предыдущей закладке есть три подраздела — primary, mobile_menu и secondary. Кроме многочисленных настроек цветов отдельно можно настроить шрифты и логотип в меню.

Specific Options для продвинутых пользователей. Можно вставить свой код для корректировки CSS и управлять настройками адаптивности меню.

Support&Suggestions поможет выйти на связь с автором плагина и получить поддержку.

Впрочем, лучше всегда один раз увидеть, чем читать скучные описания настроек. Сделать это вы сможете кликнув на кнопку Live Preview по ссылке на оф. странице плагина в конце статьи.

Заключение

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

Еще один приятный момент заключается в том, что плагин оказался необычайно легким для своего функционала. По результатам проверки тестового сайта плагином P3, Mega Main Menu оказал ничтожное влияние на сайт среди двух десятков прочих установленных плагинов.

Посмотреть удобное демо и приобрести этот функциональный плагин всего за 14 «вечнозеленых», вы можете на его официальной странице.

Max Mega Menu — функциональный плагин мега меню для WordPress сайтов

Насколько я понимаю, под термином мега меню в WordPress подразумевают сверхфункциональное огромный блок навигации по сайту со множеством разных элементов: списками, картинками, текстами, слайдерами и т.п. Наверняка вы такие встречали. Когда-нибудь опубликую полноценную подборку по теме, но сегодня речь пойдет о вполне конкретном решении — плагине Max Mega Menu. Выбрал его так как уже тестировал в работе для WooCommerce меню, он часто попадает в списки лучших модулей, плюс тут имеется одна из самых толковых и постоянно развивающихся бесплатных (Lite) версий.

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

На данный момент минимальная требуемая версия системы — 3.8, работает до последней сейчас 4.8.3. Загрузок около 100 тысяч. Мне нравится, что за последние 2 месяца было исправлено почти 70 разных багов из 89, что свидетельствует о хорошей активности разработчиков.

Основные функции и фишки Max Mega Menu

• Поддерживаются несколько мест размещения, для каждого из которых сможете выбирать свои параметры;
• Простая работа с элементами навигации через Drag&Drop.
• Добавление иконок в пунктах меню.
• Есть удобный редактор тем оформления.
• Добавление любых виджетов: картинки, тексты, списки и др.
• Условие срабатывания: при наведении, клике.
• Эффекты вывода подменю: выезд, появление/затухание и т.п.
• Разные дополнительные опции по типу скрытия текста/ссылки или выключения на мобильной версии. Последний пункт поможет упростить создание отдельного обычного и мобильное меню в WordPress.
• Выравнивание для пунктов меню.

Чтобы понять насколько все это круто и удобно, советую просто глянуть следующее видео:

Кроме всего разработчики могут похвастаться очень правильными и корректным подходим к созданию своего решения. 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:

• Sticky фиксированное меню.
• Интеграция Google Fonts, наличие FontAwesome и пользовательских иконок в настройках.
• Поддержка вертикального и меню типа аккордеон.
• Общий логотип в навигации + блок поиска.
• Стили отдельных пунктов.
• Поддержка WooCommerce и EDD.
• Возможность настройки ролей пользователей.
• Поиск, иконки/лого и HTML для мобильных элементов.
• Автообновление и приоритетная поддержка.

Для рядовых классических сайтов вполне хватает обычной бесплатной версии Max Mega Menu в WordPress, которая по функциональности очень хороша. Разных настроек здесь очень много. Понравилось также, что разработчики поддерживают свое детище, относительно быстро исправляют текущий баги и заботятся о чистоте/корректности кода. На ознакомление придется потратить некоторое время, но оно того стоит. Чтобы проще было разобраться с работой плагина — смотрите видео и читайте документацию.

А какие модули Mega Menu в WordPress вы используете и почему? Работали с данным решением, что можете по нему добавить?

Как настроить меню в WordPress?

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

Для настройки меню WordPress можно использовать и внутренние инструменты (админка), и плагины. В связи с этим рассматривать мы будет все варианты.

Добавление меню в WordPress через админ-панель

Шаг 1. Открываем панель администратора. Далее Внешний вид – Меню.

Примечание! Основной код Вордпресс позволяет создать меню из нескольких элементов. А именно:

Шаг 2. Для создания меню нажимаем Создайте новое меню.

Шаг 3. В появившемся поле Название меню введите нужное вам имя, например, Главное меню и подтвердите действие, нажав Создайте новое меню.

Шаг 4. Вы создали меню. Следующий этап – это добавление нужных вам рубрик, страниц, записей и меток в меню WordPress. Выбираем пункт, который следует добавить, к примеру, Страницы, и ставим галочку напротив раздела, который хотим сюда добавить. Кликаем на Добавить в меню.

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

Когда вы добавите и упорядочите все нужные вашему меню страницы, записи и рубрики не забудьте все сохранить, нажав Сохранить меню.

Шаг 5. Чтоб ваше меню отобразилось на сайте WordPress, переходим в Управление областями, выбираем в перечне созданное меню и кликаем на Сохранить изменения.

Вот и все. Мы создали меню и разместили его на WordPress сайте.

Дополнительные функции в меню WordPress

Как добавить раздел меню, если его нет в списке?

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

В результате, меню, расширенное при помощи опции Настройка экрана, может выглядеть следующим образом:

Как сделать в WordPress выпадающее меню?

Если по названию это кажется сложным, то на самом деле это элементарная задача, выполнимая в одно действие.

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

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

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

Добавление произвольной ссылки в меню WordPress

Некоторые сайты требуют создания определённого рода рубрик. Например, это может быть партнерская ссылка. В чем ее смысл? Она добавляется для того, чтоб осуществлялся переход не на другие страницы сайта, а на страницы других ресурсов (рекламодателей, партнеров и т.п.).

Настройка такого рода ссылки делается через меню WordPress. Заходим Внешний вид – Меню – Произвольные ссылки.

В появившемся окне, в графе URL вводите ссылку на ресурс, на который нужно будет делать переход. В графе Текст ссылки вставляете текст, который в дальнейшем будет отображаться в меню сайта.

Кликаем на Добавить в меню и все, у вас на сайте появится раздел меню, при нажатии на который будет осуществляться переход на сторонний ресурс.

Как удалить рубрику в меню WordPress?

Бывает, что мы по ошибке создали не нужный пункт меню. Чтобы убрать кнопку какой-то рубрики в созданном меню Вордпресс — выделите ее галочкой, и в разделе Действия, нажмите Удалить.

Важно! После удаления рубрику восстановить нельзя.

Как удалить меню WordPress?

Создавать и редактировать меню Вордпресс мы уже научились. Пришло время понять, как удалить меню с сайта, если возникла такая надобность. Это действие можно сделать через админ-панель сайта. Как обычно, идем Внешний вид – Меню. Далее выбираем меню, необходимое удалить.

На экране появится окно с настройками. Внизу будет доступна функция Удалить меню.

Нажимаете и все, ваше меню удалено и можно приступить к созданию нового.

Как настроить меню в WordPress?

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

Как сделать вертикальное и боковое меню в WordPress?

Для создания нестандартных меню нужно использовать плагины. Так, разместить на сайте меню вертикально поможет плагин «jQuery Vertical Accordion Menu». По умолчанию у данного плагина имеется в арсенале парочка готовых шаблонов, при этом с разными цветами. Кроме этого, он позволяет сделать непростое меню, а раздвижное. Это очень удобно, если ваше меню имеет много подразделов.

Установить «jQuery Vertical Accordion Menu» можно через админку, указав название плагина. Установив его, зайдите в раздел Виджеты, выделите виджет плагина и перетащите его в сайдбар. Уже в виджете вы сможете найти все нужные настройки.

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

Изменение цвета меню в WordPress

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

Чтоб добиться разноцветного результата как на скрине, вам необходимо:

1. Добавить цвета для стилей в файле style.css для каждого раздела меню отдельно. Для этого прописываем цвет каждого пункта в style.css.

1. Присваиваем CSS классы к разделам меню. В вордпресс открываем Внешний вид – Меню – Настройки экрана и активируем КлассыCSS.
2. Настраиваем для меню классыCSS. Открываем первый пункт меню, вводим greencolor в графе КлассыCSS. По такому же принципу добавляем остальные цвета для остальных разделов меню и нажимаем Сохранить.

В результате ваше меню должно преобразиться по образу скрина выше.

Как добавить строку поиска в меню WordPress?

Ни один сайт нельзя представить без строки поиска. Согласитесь, намного удобнее и быстрее найти информацию на сайте не листая страницу за страницей, а ввести ключевое слово в поиск и просмотреть результаты. Как же добавить такую полезную функцию на сайт WordPress?

Самым простым способом считается добавление нижеуказанного кода в файл functions.php.

В итоге получим:

А визуально это будет выглядеть так:

Подытожим

Сайт на WordPress – это не только современная, но и удобная платформа. Даже новичку будет под силу справиться с настройками и функциями меню сайта на WordPress. Вы с легкостью сможете создавать интересные меню, которые могут быть и простыми, и многослойными, состоящими и нескольких подразделов.

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

Более искушенные и продвинутые пользователи могут воспользоваться дополнительно разнообразными плагинами и кодировками, которые помогут воплотить все их пожелания в реальность.

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

Новости TemplateMonster

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