Главная › Новости

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

Опубликовано: 01.09.2018

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

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

Сайт Wordpress. Главное меню админ панели

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

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

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

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

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

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

Щелкаем Внешний вид — 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 . Затем вставляем строку —

& lt ; ? php uberMenu_easyIntegrate ( ) ; ? & gt ;

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

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

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

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

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

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

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

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

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

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

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

Первым делом, кликаем 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 ».

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

в поле Content Override .

Заключение

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

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

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

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

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