Как добавить мегаменю в WordPress (+5 лучших плагинов)

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

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

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

Что такое мегаменю в WordPress?

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

Чтобы получить доступ к встроенной системе меню, вы можете начать с входа на свой сайт WordPress. Затем из панели администратора перейдите в «Внешний вид» → «Меню ».

По умолчанию WordPress использует стандартные меню, в которых отображается список страниц, иногда с выпадающими списками в один столбец. Там нет дополнительной информации или контента, такого как изображения, описания и т. д. — это просто набор списков. Как правило, это довольно просто и понятно, но ограничивает вас, когда дело доходит до количества страниц, объема или информации, которую вы можете включить. Вот пример из WooCommerce:

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

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

Зачем использовать мегаменю в WordPress?

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

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

Как создать мега меню WordPress

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

Создание мегаменю вручную (без плагина)

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

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

Сначала перейдите в «Внешний вид » → «Меню » на панели управления WordPress и назовите свое меню.

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

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

Затем перейдите к файловому менеджеру cPanel или используйте клиент протокола передачи файлов (FTP) для подключения к файлам вашего веб-сайта. Найдите таблицу стилей своей темы, перейдя в / wp-content → /themes → /your-theme-or-child-theme → /style.css . Внизу добавьте следующую строку кода:

 .main-navigation ul:hover li ul, .main-navigation ul:hover li ul li ul { display: inherit; }

Это заставит ваши элементы подменю появляться, когда кто-то наводит курсор на элемент верхнего уровня. Теперь мы настроим код, чтобы сделать его более визуально привлекательным, убедившись, что каждый элемент подуровня отображается в полную ширину, а части элементов появляются рядом друг с другом. Добавьте этот код:

 .main-navigation { position: relative; } .main-navigation li { position: static; } .main-navigation ul li:hover ul { display: inherit; position: absolute; left: 0; right: 0; width: 100%; } .main-navigation ul li:hover ul li ul { display: inherit; position: relative; left: 0; } .main-navigation ul li:hover ul li { float: left; position: static; display: block; padding-top: 1em; } .main-navigation ul li:hover ul li ul li { float: none; padding-top: 0; }

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

Хотите более подробное руководство? Tuts+ предлагает полное пошаговое руководство.

Еще один способ создать мегаменю без плагина — проверить встроенные параметры вашей темы. Некоторые, например тема Hestia, по умолчанию включают опции мегаменю. Однако это не всегда так.

Создание мегаменю с помощью плагина WordPress

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

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

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

Мы будем использовать Max Mega Menu в качестве примера. Для начала вы можете установить и активировать плагин на своем веб-сайте WordPress.

Затем вам нужно включить функциональность мегаменю, перейдя в « Внешний вид » → « Меню ». Вы можете выбрать желаемое место для вашего меню, а затем установить флажок рядом с Включить.

Сохраните изменения, когда закончите. Чтобы настроить внешний вид и настройки вашего мегаменю, вы можете перейти в «Мегаменю » → «Темы меню» .

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

Пять лучших плагинов мегаменю WordPress

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

1. Макс Мега Меню

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

Ключевые особенности Max Mega Menu:

• Несколько индивидуально настраиваемых мест меню
• Конструктор макетов сетки
• Наведение меню и варианты перехода
• Конструктор с перетаскиванием
• Шорткоды
• Значки пунктов меню
• Поле поиска
• Логотипы меню

Плюсы Max Mega Menu:

• Доступны бесплатные и премиальные варианты.
• Он легкий, с чистым кодом.
• Он включает поддержку WooCommerce и Easy Digital Downloads.
• Вы можете разместить мегаменю в нескольких местах.
• Виджеты позволяют добавлять карты, контактные формы и многое другое.
• Вы также можете создавать мегаменю с нуля или использовать существующие меню.
• Навигация с помощью клавиатуры обеспечивает лучшую доступность.

Минусы Max Mega Menu:

• Дополнительные параметры настройки доступны только с профессиональной лицензией.
• Для премиум-планов нет бесплатной пробной версии.

Простота использования :

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

Цены :

Max Mega Menu предлагает бесплатную версию с ограниченными возможностями настройки. Планы Pro с расширенными функциями начинаются с 29 долларов за лицензию на один сайт. Это также включает в себя год поддержки.

2. Квадроменю

QuadMenu — еще один популярный плагин мегаменю, которым легко пользоваться независимо от уровня вашего опыта. Гибкий инструмент включает в себя интуитивно понятный конструктор с перетаскиванием и широкий выбор стилей и параметров настройки для создания меню и подменю для WordPress.

Основные возможности QuadMenu :

• Конструктор с перетаскиванием
• Несколько мест меню
• Внешние, липкие и вертикальные меню
• Варианты выравнивания ссылок
• Плавающие выпадающие меню
• Иконки Font Awesome и Google Fonts
• Выпадающие анимации
• Разнообразие фильтров
• Показать виджеты

Плюсы QuadMenu:

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

Минусы QuadMenu:

• Для расширенных параметров стиля требуется профессиональная лицензия.
• Варианты предварительного просмотра в реальном времени ограничены.

Простота использования :

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

Цены:

QuadMenu имеет бесплатную версию. Лицензии Pro доступны по цене от 30 долларов за один сайт.

3. УберМеню

Если вы ищете конструктор мегаменю премиум-класса, вам стоит обратить внимание на UberMenu. Этот мощный, многофункциональный инструмент использует сложную систему сетки, которая позволяет быстро создавать мегаменю профессионального вида.

Основные возможности UberMenu :

• Уникальная система сетки
• Более 50 настроек стилей
• Генерация динамических предметов
• Подменю на основе сообщений, категорий и т. д.
• Возможность добавления вкладок в меню
• Сенсорные меню
• Выпадающие переходы CSS3
• Несколько триггеров меню (наведение, намерение наведения и щелчок)
• Различные места в меню
• Гибкие макеты

Плюсы УберМеню :

• Он широко используется и высоко ценится владельцами сайтов WordPress.
• Есть варианты добавления пользовательского HTML, шорткодов и виджетов.
• Он использует собственный интерфейс WordPress Customizer.
• Есть неограниченные темы меню.

Минусы УберМеню :

• Доступна только премиум-версия.
• В зависимости от вашей темы, это может быть не лучший вариант, если у вас нет навыков программирования на CSS/PHP.

Простота использования :

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

Цены :

Лицензия UberMenu для одного сайта стоит 26 долларов. Сюда входит шестимесячная поддержка разработчиков.

4. Комплект Элементов

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

Основные возможности ElementsKit :

• Интерфейс живого контента
• Библиотека пользовательских модулей
• Конструктор шапки и футера
• Параллаксная прокрутка
• Более 200 готовых шаблонов страниц
• Виджет таймера обратного отсчета
• Выпадающие анимации
• Вне холста, липкие и вертикальные меню
• Иконки Font Awesome
• Светлые и темные темы
• Два макета мобильного меню
• Пользовательские CSS

Плюсы ElementsKit :

• Он полностью интегрируется с конструктором страниц Elementor.
• Он включает в себя функцию перетаскивания.
• Это новичок и удобный.
• Он имеет настройки для цветов значков и текста значков.
• Он имеет встроенные функции WooCommerce.
• Он предлагает расширенные опции мегаменю.

Минусы ElementsKit :

• Это не идеально, если вы не используете конструктор страниц Elementor.
• Это может быть ошеломляющим, если вы ищете только инструмент для создания мегаменю.

Простота использования :

ElementKits — это простой универсальный инструмент. Если вы не знакомы с Elementor, к интерфейсу может потребоваться некоторое время, чтобы привыкнуть. Хотя, если вы уже используете плагин компоновщика страниц, вы, скорее всего, быстро освоите это дополнение.

Цены :

ElementsKit предлагает бесплатную версию. Премиум-лицензии начинаются с 39 долларов в год для одного сайта.

5. Мегаменю WP

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

Ключевые особенности WP Mega Menu :

• Интуитивная навигация
• Интерфейс перетаскивания
• Возможность создавать и сохранять темы меню
• Логотип, панель поиска и фоновые изображения
• Google Fonts и значки Font Awesome
• Социальные иконки
• Маркировка меню

Плюсы WP Mega Menu :

• Его можно загрузить и использовать совершенно бесплатно, доступно обновление до версии Pro.
• Легко ориентироваться и использовать.
• Он имеет функции, которые другие плагины включают только в премиальные версии.
• Он имеет возможность создавать и сохранять темы меню для использования на нескольких веб-сайтах.

Минусы WP Mega Menu :

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

Простота использования :

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

Цены :

Мегаменю WP бесплатно. Но он также предлагает планы Premium, начиная с 29 долларов в год за одну лицензию.

Сравнение лучших плагинов мегаменю для WordPress

Часто задаваемые вопросы (FAQ) о мегаменю

На данный момент, надеюсь, у вас есть четкое представление о том, как создать и добавить мегаменю в WordPress. Но давайте на минутку закончим с ответами на часто задаваемые вопросы (FAQ).

Могу ли я добавлять изображения и значки в мегаменю WordPress?

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

Могу ли я добавить мегаменю на боковую панель WordPress?

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

Начните настраивать меню WordPress

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

Как мы обсуждали в этом посте, есть три основных метода, которые вы можете использовать для создания мегаменю в WordPress. Один из них — использовать параметры вашей темы для добавления мегаменю. Второй — закодировать вручную. Если ни один из них невозможен или вы просто хотите сэкономить время, вы можете попробовать плагин мегаменю, такой как Max Mega Menu, QuadMenu или ElementsKit.

Вы хотите еще больше повысить производительность своего сайта WordPress? В дополнение к простому автоматическому резервному копированию и другим функциям безопасности WordPress, Jetpack может помочь повысить скорость и удобство вашего сайта!