UberMenu — ставим ПРО навигацию на свой блог

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

Устанавливается плагин Ubermenu совершенно стандартно. Загружаем на сервер и активируем среди прочих плагинов.

Управление UberMenu

После установки плагина в вашем распоряжении окажутся два центра управления:

Внешний вид — Меню. Теперь на этой странице вы сможете найти настоящую мастерскую быстрой сборки разнообразных меню.

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

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

Для того, чтоб включить UberMenu, кликаем Внешний вид — Меню. В меню Activate Uber Menu Locations обязательно ставим галочку в чекбоксе меню, которое хотим заменить на UberMenu. Количество доступных меню зависит от вашей темы — все индивидуально. Кроме того, нужно настроить бокс «Область темы» — в частности активировать то меню, которое должно выводится в виде UberMenu. Теперь отключаем функцию UberMenu для некоторых пунктов главного меню, например, для домашней страницы (Show/Hide UberMenu Options — Activate Mega Menu, убрать галочку из чекбокса).

Базовые настройки UberMenu.

Щелкаем Внешний вид — Ubermenu — Basic Configuration. Здесь можно включить вертикальное меню: Orientation — Vertical. Кроме того, чуть ниже можно изменить ширину выпадающего списка относительно главного меню (Vertical Mega Submenu — Width)

Оформление и внешний вид

Для того чтоб сменить оформление меню можно просто перейти в Ubermenu — Style Configuration и выбрать подходящий вариант оформления из десяти предложенных (Style Preset).

Если же ничего из готовых вариантов не подошло, есть возможность создать собственный дизайн, воспользовавшись генератором стилей:

Style Configuration — Set the Style Application — включаем Style Generator, сохраняем изменения идем в меню Style Generator (находится ниже) и создаем собственное меню.

Интеграция плагина с темами: решение проблем

Если тема не поддерживает WordPress 3 Menu, то решить эту проблему довольно легко. Кликаем Ubermenu — Theme Integration — Easy Integration и переключаем рычажок в положение ON. Затем вставляем строку —

<?php uberMenu_easyIntegrate(); ?>

в файл вашей темы header.php или шорткод

[uberMenu_easyIntegrate]

в текстовый виджет.

Если же UberMenu некорректно отображается в IE, стоит попробовать в Theme Integration — Use IE Fix Script переключить рычажок в положение ON.

Расположение UberMenu по центру

1. Жмем UberMenu — Advanced Settings
2. Устанавливаем параметр Menu Bar Width в соответствии с шириной блока с контентом. Обычно – это 960 пикселей.
3. Активируем Center Menu Bar.
4. Активируем Enable Clearfix, если этот параметр еще не включен
5. Кликаем UberMenu — Basic Configuration и отключаем опции. «Expand Menu Bar Full Width»
6. Сохраняем настройки. Все готово!

Создание базовых меню

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

Базовое меню навигации WordPress

На странице «Меню» создаем новое меню (не забываем переключиться на него в «Область темы»/Редактируем старое. Выбираем пункт главного меню и создаем для него меню второго уровня (для этого используем бокс «Произвольные ссылки»). Располагаем подменю в нужном порядке, перетаскивая их куда нужно, подтягивая вправо и располагая лесенкой. При отключении функции «UberMenu» подменю будут просто выводиться лесенкой.

UberMenu

Занимаемся следующим пунктом главного меню. Сначала необходимо удостовериться, что активирована функция «UberMenu». Создаем меню второго и третьего уровня способом, описанным выше. Располагаем их согласно желаемым уровням вложенности. Если мы хотим подсветить какой — либо заголовок, то просто разворачиваем меню с его настройками «Show/Hide UberMenu Options» и ставим галочку в чекбоксе «Highlight this item». Теперь для того чтоб выровнять наши колоночки, обращаемся к настройкам пункта главного меню, с которым мы работаем и ставим галочку в чекбоксе «Full Width Submenu», а также редактируем параметр Submenu Columns [FullWidth] –нужно указать количество пунктов меню самого нижнего уровня.

UberMenu с описаниями

Прежде всего, кликаем UberMenu — Descriptions, Shortcodes, Widgets. Здесь нужно включить опции «Display Sub-Header Descriptions» и «Display Sub-Menu Item Descriptions». Переходим к созданию пунктов меню. Если вы не видите поле для внесения описания, то нужно развернуть меню «Настройки экрана» WordPress и в «Показывать расширенные свойства меню» поставить галочку в чекбоксе «Описание». Теперь вы можете добавлять описания, в остальном же меню формируется так же, как рассказано выше.

UberMenu с иконками

Проделываем все те же действия, которые были описаны ранее, но на этот раз жмем Show/Hide UberMenu Options, и далее – кнопочку «Set Thumbnail» и загружаем подготовленную иконку. Если же изображение не видно, то щелкаем UberMenu — Images и отключаем параметр Resize Images. Точно также добавляем иконки ко всем пунктам меню.

UberMenu из виджетов и контент-блоков

Первым делом, кликаем UberMenu — Descriptions, Shortcodes, Widgets — и ставим ползунок параметра «Allow Content Overrides» в положение ON. Там же регулируем параметр Number of Widget Areas, который отвечает за количество создаваемых виджет-полей. Если вы намерены использовать карты Google, но не помешает активировать параметр Load Google Maps.

Открываем страницу «Виджеты» и видим в сайдбаре новое вместилище для виджетов — « UberMenu Widget Area 1». Переносим сюда текстовый виджет и вставляем желаемый шорткод – все зависит от того, что вы хотите вывести в меню, к примеру, можно отобразить контактную форму. Так, можно добавить сколько угодно текстовых виджетов с разнообразным содержимым. Для того, чтоб вывести все это в меню, создаем новый пункт главного меню, развернем меню с его настройками и, сначала, расставим галочки в следующих чекбоксах: «Disable Link?» и «Disable Text?», затем в выпадающем списке «Display a Widget Area?» выберем созданное ранее виджет-поле.

Простое меню навигации в виде картинки

Такое меню пригодится для создания пункта меню, отвечающего за связь с домашней страницей. Разворачиваем настройки нужного пункта меню, ставим галочку в чекбоксе «Disable Text?» и загружаем подготовленную иконку (лого).

Вставка формы поиска в строку меню

1. Кликаем UberMenu — Descriptions, Shortcodes, Widgets — активировать Allow Content Overrides.

2. Добавить пункт главного меню.

3. Текст ссылки:«Search» или «Поиск» и URL : «#».

4. Поставить галочки в чекбоксах «Disable Text»,  «Check Disable» и « Align Menu Item to Right Edge».

Добавить шорткод

[ubermenu-search]

в поле Content Override.

Заключение

В данной статье я преднамеренно не стал детально останавливаться на каждом пункте настроек, иначе статья приняла бы просто чудовищные размеры. Да и настраивать каждый пункт вам конечно не придется. Многое работает «из коробки».

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

• UberMenu — Flat Skin Pack. Добавляет пак визуально плоских стилей в духе Metro и Windows 8.
• UberMenu — Sticky Menu Extension. Делает меню «прилипаемым» к верхнему краю страницы при её прокрутке вниз.

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

Официальная страница плагина.