Хотите создать многоуровневые сложные меню для своего веб-сайта, и при этом не возиться с этим делом слишком долго? Решение есть. Сборка и оформление меню сайта легко осуществляется с помощью специальных плагинов для WordPress.
Темы WordPress предоставляют отличные возможности для разработки великолепных сайтов. Однако современные навигационные меню отличаются от тех меню, которые использовались несколько лет назад. При этом темы WordPress продолжают предоставлять меню, которые работают с концепцией темы.
Это не всегда подходит для крупных сайтов с большим количеством страниц, содержащих разнообразные продукты или услуги.
Специальные плагины меню для WordPress помогут добавить на сайт удобную, адаптивную навигацию.
Адаптивные меню WordPress
Меню веб-сайта является одним из самых важных элементов, поскольку оно помогает перемещаться по страницам. Меню определяет варианты выбора, представленные пользователям. Нажав на выбранный пункт меню, пользователь переходит на определенную веб-страницу или совершает действие.
Как с эстетической, так и с навигационной точки зрения, визуально привлекательное меню имеет решающее значение для дизайна сайта.
Меню бывает разных типов, и в идеале вы можете выбрать один из них в зависимости от количества страниц и общего дизайна вашего сайта.
Горизонтальные отображаются в верхней части веб-страницы, а оставшееся пространство зарезервировано для основного содержимого. Оно интуитивно понятно, так как большинство людей предпочитают читать текст по горизонтали.
Вертикальные используются отдельно, или в сочетании с горизонтальным меню. В основном применяются, когда содержимое не может быть помещено горизонтально по всей странице.
Выпадающие могут использоваться как с горизонтальным, так и с вертикальным. Они отделяют видимые элементы главного меню от элементов подменю, которые появляются только при наведении указателя мыши.
Мега-меню - это большие двухмерные панели, сгруппированные по вариантам навигации. Это сравнительно новая концепция, которая набирает популярность, поскольку полное меню сразу видно без прокрутки. Это сочетание простых и выпадающих меню, схожее с лентой в Microsoft Office.
Плагины меню WordPress
Сегодня мы познакомим вас с плагинами, которые позволяют создать как раз последний тип меню.
WordPress сам по себе предоставляет встроенные функции для создания различных типов меню. Однако эти функции являются общими, и не позволяют внедрять мега-меню.
Специальные плагины WordPress интегрируются с существующей системой меню WordPress, и предоставляют дополнительные возможности. Плагины помогают создавать профессионально выглядящие mega-меню.
Большинство плагинов имеют встроенную панель администратора для добавления или изменения элементов меню, стилизованных под ваш дизайн сайта. Есть настройки для шрифтов, цветов, фоновой текстуры, значков и т. д. Элементы шорткода позволяют добавлять в меню контактные формы, изображения, видео, карты Google и динамическое содержимое.
Большинство плагинов WordPress Mega Menu оптимизированы для работы с несколькими устройствами. Эти плагины включают в себя поддержку нескольких меню, эффекты наведения и другую анимацию.
Max Mega Menu - это полный плагин управления меню. С полной легкостью можно изменить существующее меню в удобное, полностью доступное и отзывчивое. Опции включают встроенные настройки для переустановки, добавления виджетов, изменения поведения и преобразования простого меню в мега-меню. Этот плагин в бесплатной версии поддерживает встроенный редактор. В Max Mega Menu Pro добавлены такие функции, как вертикальное, гамбургер-меню, логотип-меню, поддержка шрифтов Google, поддержка WooCommerce и EDD.
Это настраиваемый плагин для WordPress. Интерфейс прост в использовании и предоставляет множество настраиваемых параметров. Различные варианты настройки меню включают в себя тип меню, фоновое изображение, анимацию меню, выравнивание и размещение меню, размер экрана. В бесплатной версии плагин предоставляет такие возможности, как логотипы меню, компоненты для изменения порядка, включающие скрипты, триггеры пользовательского меню. Функциональные возможности Advanced и Pro обеспечивают поддержку предварительного просмотра дизайна, анимации элементов меню, встроенной панели заголовка и т. д.
Настраиваемый плагин для мобильного меню. Плагин позволяет преобразовывать существующее меню WordPress во что-то элегантное, удобное и адаптивное. Этот плагин легко интегрируется с системой меню WordPress и работает на всех типах мобильных устройств. Бесплатная версия предоставляет простой в использовании интерфейс администратора. Он предлагает множество вариантов и возможность показывать категории, подкатегории и сообщения. Плагин предоставляет встроенную поддержку для добавления цветов, логотипов, скрытия определенных элементов на мобильных устройствах.
Плагин Nextend Accordion Menu является удобным для пользователя, настраиваемым и легко интегрируемым. Гамбургер-меню позволяет вам использовать различные уровни подменю. Обеспечивает полный контроль над меню, уровнями, цветами, анимационными эффектами. Его можно использовать для создания «гамбургера» из любого меню WordPress. Версия Lite поставляется с одной темой. 3 дополнительные темы доступны для покупки с PRO версией плагина. Список мощных функций также включает полный контроль над цветами, фоном, изображениями, шрифтами. Также добавлено несколько уровней меню и встроенная поддержка шрифтов Google.
Плагин Mega Menu от WooRockets - мощный, отзывчивый, ориентированный на пользователя плагин. Предоставляет вам выделенный и интуитивно понятный конструктор. Обеспечивает полный контроль над проектированием и настройкой меню. Поддерживаются ориентация меню и параметры отображения значков, предварительный просмотр в реальном времени и профили для настроек меню. Вы также можете вставлять контент и встраивать Google Fonts из панели подключаемых модулей.
Вышеупомянутые плагины являются хорошо известными и высоко оцененными плагинами WordPress. С их помощью вы без труда создадите мега крутое меню на своем сайте.
Чтобы полностью раскрыть потенциал меню на WordPress, попробуйте несколько доступных плагинов. Выбор достаточно широкий, ведь плагины позволяют расширить возможности меню самым разным образом, например, бывают и мега-меню, и адаптивные меню, и кнопки меню и т.д. Ниже список из 8 лучших, на мой взгляд, плагинов для меню на WordPress.
1. Адаптивное меню
Если на вашем сайте еще нет адаптивного меню, то плагин Responsive Menu – хороший выбор для каждого уважающего себя владельца сайта. Расширение предоставляет возможность использовать множество настроек и имеет платную и бесплатную версии. Бесплатный вариант Responsive Menu позволяет изменить немало: цвет, шрифт, кегль, фоновые изображения, реализована возможность деактивировать элементы меню или поменять их порядок, поменять расположение меню на странице (слева, справа, сверху или снизу) и т.д.
2. Max Mega Menu
Удобство навигации и использования на сайтах, где меню состоит из десятков или сотен категорий и элементов, можно улучшить с помощью мега-меню. Мега-меню позволяют разместить все необходимые элементы и при этом не усложнять пользовательский интерфейс. Один из лучших плагинов для создания мега-меню - Max Mega Menu . Созданные с помощью него меню адаптивные, могут использоваться на устройствах с сенсорными и retina экранами.
В расширении Max Mega Menu используется drag-and-drop. Можно одновременно открывать несколько экземпляров плагина и наладить достаточно много визуальных эффектов в меню, например, которые появляются при наведении мыши. Можно сделать так, чтобы при наведении или нажатии мышью появлялись подменю, чтобы изображение плавно появлялось и исчезало, чтобы при навигации выдвигалось подменю сверху или сбоку, добавить иконки. Все это доступно в бесплатной версии, а в платной – еще больше.
Возможности кастомизации движка WordPress практически безграничные – все зависит от вашей фантазии и возможностей. Я часто натыкаюсь на необычную реализацию «повседневных» модулей и функций рыская по просторам интернета.
Если тема Вашего блога предусматривает что эффектные меню то Вам повезло, если нет то придется рыть код таблиц стилей и прописывать самостоятельно все красивые эффекты.
Некоторые настолько «переделывают» свой сайт, что узнать с первого взгляда и даже спустя множество часов использования в нем WordPress не удается. Возникает вопрос – как сделать для себя также?
А знаний в CSS нет!
Первое решение, можно и бесплатно.
Второй ответ:
Учитывая, что это наш любимый WordPress – найти подходящий плагины.
Вот один из ярких примеров красивого и оригинального меню WordPress, но такого можно добиться и с помощью стандартных функций используя специальный шаблон:
Сегодня плагинов есть тысячи, некоторые предназначены для добавления определенной функциональности и работают незаметно для вашей аудитории, другие же влияют на внешний вид темы и записей. Но вы, как и я, не будучи хорошо знакомым с CMS WordPress вряд ли догадываетесь о всех полезных и красивых плагинах/виджетах для этого движка. Сегодня я расскажу с помощью каких плагинов можно сделать красивое, но при этом достаточно функциональное меню.
Стандартными средствами движка вы можете лишь создать категории/подкатегории и вывести их в «древовидном» стиле, это неинтересно и типично – такое можно видеть сплошь и рядом. Конечно, иногда и этого хватает, но если нужно, к примеру, для каждой категории сделать иллюстрацию или небольшое пояснение рядом, притом, чтобы это выглядело уместно и было практичным?
Тут выход один – обратиться к плагинам, некоторые из них появились на свет лет 5 назад и успешно развиваются по сей день в ногу с самим WordPress-ом. Я буду делать обзор самых эффективных решений, возможно, в природе существуют и более красивые решения, но далеко не всегда они обладают нужной функциональность, поддержкой русского языка и другими мелочами, которые необходимы большинству администраторов.
Меню – основа для навигации пользователей, особенно важно это на сайтах коммерческой тематики, к примеру, если это «визитка» компании, которая занимается продажей товаров/услуг, нужно чтобы потенциальный покупатель с максимальной легкостью отыскал то, что его интересует. Плагины меню для WordPress, о которых я расскажу сегодня, позволяют это сделать, причем достаточно просто, некоторые из них платные, но, по моему мнению, не так уж критично заплатить несколько долларов за использование нужного модуля.
Плагины меню для WordPress:
UberMenu :
Один из лучших с точки зрения функциональности, то, как он работает – можете глянуть «воочию» на официальном сайте разработчиков //wpmegamenu.com/ . Его главная особенность состоит в том, что меню можно снабдить кучей различных «плюшек», к примеру, в раздел «контакты» кроме основных пунктов добавить ещё и карту проезда, в качестве иллюстраций к категориям можно использовать красивые картинки.
Настраивается это все из админки, причем очень легко, по моему мнению UberMenu крайне необходим тем сайтам, которые часто делятся с посетителями различного-рода контентом: видео, аудио, картинки. С помощью данного плагина меню будет на 100% понятно даже для тех, кто впервые заглянул к вам на сайт или попросту «не разбирается в интернете». В общем говоря – плагин делает сайт визуально-понятным и от вас не потребуется инструкций, вроде «зайдите туда-то и туда-то», человек сам сориентируется.
На данный момент – это «дополнение» платное и обойдется вам в ~18 долларов, вместе с самим плагином вы получите от разработчиков дополнительные иконки и картинки для кастомизации меню в WordPress.
Stripe:
Плагин тоже платный – обойдется в сумму равную 14 долларам, но имеет совершенно другие цели и функции. Он минималистичен – в Stripe главным остается «незаметность» меню, при этом простая и красивая организация оного, чтобы человек, когда захочет зайти в «контакты» или любую другую категорию, без проблем отыскал её.
Стоить отдать должное художникам – они нарисовали красивые кнопки и анимацию, при наведении курсора на определенный пункт меню, ему отдается весь акцент, остальные же части «тускнеют» и отодвигаются на второй план.
Очень приятно, что внедрить такое меню можно практически в любой сайт без отрицательных последствий, да и смотреться будет гармонично с любым дизайном (шаблоном) – в общем говоря, достаточно универсально!
JQuery Vertical Mega Menu Widget:
Один из самых простых, среди представленных, его выделяет лишь полная бесплатность. Как видите из скриншота выше – авторы позиционируют свое творение, как идеальное для интернет-магазинов. На деле же – подойдет для любого сайта с множеством категорий, удобно организован вывод основных и подкатегорий с картинками и иллюстрациями.
Для крупного проекта, конечно же, WordPress не сильно годится, но небольшой интернет-магазин создать на основе этого меню можно. Если у вас 20-30 позиций в нескольких категориях, к примеру.
P/S.Есть еще в сети интересные сервисы для генерации красивых менюшек.
Там есть сложности в настройке кода, но об них я расскажу в следующих статьях, если конечно Вы попросите.
JQuery Vertical Mega Menu Widget
- бесплатный плагин, предназначенный для создания вертикального выпадающего меню в сайдбаре. Плагин предназначен для WordPress в целом, однако явно заточен под электронную коммерцию и может использоваться не только с WooCommerce, а и с другими плагинами для интернет-коммерции.
Мне встречалось несколько разных плагинов для создания разного рода структурированных, выпадающих менюшек в сайдбаре, однако этот плагин выделяется. Большинство из них автоматически создает меню на основе блоговых записей и категорий, на основе даты и месяца. Удобно, если у вас просто блог.
Рассматриваемый же плагин позволяет создавать совершенно любые менюшки на основе страниц, товаров, категорий, меток - чего угодно! Это именно то, что надо для каталога товаров, хотя придется немного повозиться - пункты добавляются вручную.
После скачивания , установки и активации плагина первое, что надо сделать - это создать необходимое меню, которое будет отображаться посредством плагина. В настройках сайта идем на вкладку "Внешний вид" -> "Меню" и создаем новое - ну допустим "menu2". Дальше наполняем его как хотим, делаем вложенные пункты. Поэкспериментировать можно и потом, первым делом главное создать хоть что-нибудь. Каждый пункт делается вручную ссылкой. То есть, если вставить в меню страничку каталога, то ссылка на каталог работать будет, но позиции из каталога в меню автоматически не подтянуться. Для наибольшего эффекта рекомендуется делать трехуровневые пункты меню, тогда плагин наибольшим образом себя покажет.
Когда меню создано, надо сделать так, чтобы плагин начал его отображать. Идем во "Внешний вид" -> "Виджеты", находим там новый виджет "jQuery Vertical Mega Menu" и помещаем его в нужное место на сайдбаре. Тут можно порыться немного в настройках, хотя главное сейчас - это выбрать наше предварительно созданное меню "menu2" и нажать "Сохранить". Меню создано, его можно просмотреть на сайте!
Меню для WordPress – это один из ключевых элементов сайта. Эта та часть площадки, с которой постоянно взаимодействует пользователь. От качества, эргономичности и дизайна менюшки зависит общее впечатление посетителей о сайте. Порой именно благодаря интересному, необычному меню можно превратить обычного интернет-серфера, который проходил мимо, в постоянного юзера вашего сайта.
Чтобы сделать качественное вертикальное, горизонтальное, многоуровневое или и любое другое произвольное меню, вам предстоит либо самостоятельно открывать и редактировать классы CSS, либо можно не спеша и без профессиональных навыков создать его при помощи плагина.
А поскольку их много, в этом обзоре будут рассмотрены возможности лучших платных и бесплатных модулей, которые позволят быстро вывести меню на ваш сайт.
JQuery Vertical Mega Menu Widget
Хоть в названии плагина и числится слово “мега”, с ним вы не сможете создать чего-то невозможного. Но простое вертикальное меню с собственными категориями любого плана при помощи модуля добавить на сайт вполне реально. Большой плюс JQuery Vertical Mega Menu Widget в том, что инструмент распространяется бесплатно. А значит без дополнительных затрат хоть сегодня вы сможете создать качественную менюшку для своего сайта.
JQuery Vertical Mega Menu Widget позволяет создавать виджет, всплывающее меню, вывод на экран которого можно всячески настраивать (меняя анимацию появления, перехода между категориями, вывод и т. д.). В итоге получится что-то похожее на accordion. Стиль его сможете настроить самостоятельно, редактируя классы CSS. И не забудьте во вкладке “Внешний вид” активировать виджет, и разместить его в определенной части сайта – иначе плагин JQuery Vertical Mega Menu Widget не сможет вывести accordion на страницу.
Плагин позволяет сделать разное, интересное и адаптивное меню для сайта. Всего модуль содержит три вариации менюшки:
- горизонтальное;
- вертикальное широкое;
- вертикальный виджет.
Все три варианта с выходом последней версии плагина могут адаптироваться под мобильные устройства. Модуль совместим с WordPress 3.5+ и работает по простому принципу – настройка не займет много времени. Интегрируется в любую тему, так что ковыряться в CSS и коде шаблона не придется.
JQuery Mega Menu Widget
Еще один плагин из разряда Mega. Модуль JQuery Mega Menu Widget работает с использованием JQuery-библиотек – встраивает JavaScript в HTML. Вы сможете создать виджет, при наведении на который произойдет вывод выпадающих категорий.
JQuery Mega Menu Widget содержит множество настроек:
- Hover/Click – настройка сценария реагирования меню (что будет после нажатия на определенную категорию);
- Определение состава – произвольное количество категорий;
- Оболочка – настройка внешнего облика с открытым кодом CSS, который можно настраивать;
- Animation Effect – анимация появления категорий (можно выбрать скользящий эффект, либо добавить “исчезание”);
- Animation Speed – изменение интенсивности анимационного эффекта;
Также этот Mega плагин позволяет деактивировать анимацию полностью и создать широкоформатное меню, автоматически подстраиваемое под пропорции шаблона. Возможно, это не совсем mega модуль, но скачать его можно бесплатно, и уже через 10-15 минут у вас на сайте появится виджет.
Разнообразный инструмент, который обеспечит возможность добавить колоритное меню с современным дизайном. Основная особенность дополнения в том, что можно сделать не только заголовки категорий, но и загрузить к ним изображения. Вот какие типы менюшек предлагает вам создать плагин:
- горизонтальное меню с картинками и субменю;
- вертикальное в двух вариациях с разными иконками;
- горизонтальное с иконками;
- с круглыми картинками в категориях;
- меню в виде png-кнопок;
Чтобы добавить выбранное адаптивное меню, вам предстоит внести шорткод структуру шаблона.
Еще один jQuery-плагин, который позволяет создать многоуровневое функциональное меню для Вордпресс. Вы получите эстетически приятную округленную менюшку. Кнопки будут разделены спецификой CSS модуля. Сможете самостоятельно настроить стилевые классы, и сделать произвольное меню как раз под дизайн вашего ресурса. В дополнение jQuery Dropdown Menu доступна настройка цвета заднего фона, а также изменение размера и типа шрифтов для описания категорий. Это адаптивное меню.
Виджет работает только с CSS. В большей мере подходит для тех, кто разбирается в CSS, и хочет преобразить вывод уже существующего меню. С модулем Dropdown Menu Widget сможете создать ниспадающее произвольное меню с красивым дизайном. В модуле доступна настройка каждого отдельного элемента. Также имеются несколько стандартных тем CSS. Виджет позволяет сделать вертикальное или горизонтальное отображение многоуровневых категорий.
Ozh’ Admin Drop Down Menu
Этот инструмент не сможет добавить пользовательскую менюшку на сайт, но сделает меню для вебмастера. Модуль Ozh’ Admin Drop Down Menu предназначен для тех, кто устал постоянно заходить в панель администрирования WordPress в поисках нужной настройки. Плагин добавит невидимую для посетителей менюшку на страницах, которое можно будет удобно настроить для быстрого доступа к редактированию постов, добавлению медиа, созданию страниц и т. д.
Это флэш-меню. Разработчики не зря называют его динамическим – вертикальное меню работает с особыми анимационными эффектами. В итоге, сможете сделать адаптивное, стильное и удобное flash-menu. Цвет фона, текста, шрифт и размеры каждого элемента настраиваются в специальном разделе администрирования. Удобство менюшки для пользователя в первую очередь связано с возможностью остановить выбор категории во время скролла на страницах – то есть пользователю не придется постоянно открывать меню, если понадобилось прокрутить сайт.
Это необычная менюшка. Вы можете либо использовать ее в качестве стандартного меню для всего сайта, либо размещать его на отдельных страницах. Рассчитан плагин на использование на ресурсах ресторанов, кафе, баров и других заведений, где есть “Меню”. На проектах другой сферы деятельности использовать не рекомендуется – настройка под другие цели будет сложная.
Custom Taxonomies Menu Widget
Предельно простой плагин. Позволяет быстро создать плавающий виджет и вывести его сбоку экрана. Идеально подходит для блогосферы. Если вы пишите какой-то тематический блог, в котором множество терминов, и хотите обучать начинающих в этой сфере, тогда Custom Taxonomies Menu Widget вас выручит. Сможете сделать классифицированное иерархическое боковое меню с четкой категоризацией и отображением новых разделов. Порядок таксономии настраивается при помощи разных фильтров. Виджет этот бесплатный, и подходит только для обучающих порталов.
JQuery Accordion Menu Widget
Если хотите, чтобы у вас была accordion менюшка на ресурсе, то JQuery Accordion Menu Widget – лучший инструмент, чтобы осуществить эту задумку. Функции плагина JQuery Accordion Menu Widget:
- добавление множества уровней менюшки;
- произвольное число пунктов в accordion;
- настройка перехода в категорию “по клику” либо “при наведении”;
- встраивается в шаблон при помощи шорткодов;
- возможность вывести один или несколько уровней менюшки accordion одновременно;
- плагин JQuery Accordion Menu Widget может использовать куки-файлы пользователей, чтобы сохранять свое открытое/закрытое положение при переходе на страницы;
- автоматическое закрытие меню accordion через секунду после удаления курсора с навигационной панели;
- есть настройка отображения количества подпунктов в родительском меню;
- можно настраивать и активировать классы CSS;
- скорость анимации настраивается.
С последним пунктом будьте осторожны – низкая скорость анимации может уменьшить юзабилити инструмента.
Responsive Select Menu
Респектабельное и стильное меню. Удовлетворит потребности любого сайта, и быстро станет его украшением. А самое главное – Responsive Select Menu можно скачать бесплатно. Вывод менюшки можно будет организовать в любом положении: вертикальное, горизонтальное или в качестве виджета. Это полноценное адаптивное menu, в котором можно создать множество уровней разных форматов. Вы сможете добавить в менюшку кликабельные списки с описаниями подкатегорий, и даже встроить Google Maps с формами для регистрации! Стиль CSS полностью настраивается. Это не скучное стандартное меню, а инновационное и необыкновенное дополнение для вашего проекта!
JQuery Slick Menu Widget
Виджет, который размещается в любой части сайта. Вы получите стильное и аккуратное меню, вывод которого удобно настраивается при помощи различных типов анимации. Модуль JQuery Slick Menu Widget удобен тем, что с ним можно сделать адаптивное меню, которое будет следовать за пользователем, и содержание его может быть произвольное (от перечня главных рубрик портала до списка ссылок на группы социальных сетей). Инструмент предполагает настройку разных стилей CSS – в арсенале имеются 12 готовых вариантов дизайна и возможность самостоятельно их изменить. Вывод менюшки также настраивается, как и ее положение (вертикальное, динамичное, статичное и т. д.).
Fading Menu Plugin
Большинство указанных в обзоре плагинов являются бесплатными. Но Fading Menu Plugin – платный инструмент, и он заслуживает того, чтобы за его использование заплатили. С ним вы сможете добавить на сайт произвольное меню, которое будет закреплено сверху страницы. На первый взгляд кажется, что это мелочная функция. Но на деле оказывается, что закрепление менюшки в верхней позиции может значительно уменьшить число “отказов” (одного из параметров пользовательского поведения), а это позитивно повлияет на ваши позиции в поисковике.
Настройка Fading Menu Plugin не отличается особой сложностью – вывод и содержание менюшки сможете настроить в стандартной панели WordPress. В процессе настройки у вас будет выбор: добавить виджет в верхней панели или снизу. Рекомендуется добавлять сверху – в этой части сайта пользователи обычно проявляют большую активность. Не забудьте также настроить стилевые параметры. Важно не сделать плагин ярким и перенасыщенным, а удачно его совместить с текущим шаблоном Вордпресс вашего сайта. Если есть время и возможности, можно добавить собственные иконки для менюшки. И обязательно внесите в разделы модуля категории, в которой периодически будут появляться новые записи – Fading Menu Plugin позволяет отображать новые уведомления в шапке меню.
UberMenu
Поддерживает вертикальное и меню в горизонтальном положении. Подходит как для создания менюшки с нуля, так и для корректировки уже существующего. Плагин содержит много разных настроек, которые легко регулируются в панели Вордпресс. Вывод менюшки доступен в одном из 20 стилей. Вертикальное меню может быть размещено с любой стороны страницы, а горизонтальное – снизу или сверху. UberMenu адаптивное и работает на всех популярных браузерах одинаково хорошо.
Вывод
Какое бы произвольное дополнение из предложенного списка вы не выбрали, помните, что будь то вертикальное, горизонтальное или всплывающее виджет-меню, оно должно удачно сочетаться с остальными элементами сайта!