Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress! Сегодня вы узнаете как добавить на свой сайт мобильное меню. Вы сможете настроить меню, которое будет отображаться только на мобильных устройствах. Вы сможете указать максимальный размер экрана, при котором будет отображаться мобильное меню. Вы сможете сделать два меню, с левой и с правой стороны экрана, сможете указать для каждого меню отдельное меню сайта. Можно настроить внешний вид меню, цвета, размер, отступы и т.д.
Установить плагин WP Mobile Menu вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
Далее, после активации плагина, вы попадёте на страницу “Mobile Menu Options”. Вам нужно нажать на кнопку – Allow & Continue.
Далее, у вас откроются основные настройки плагина.
Разберём настройки:
General Options.
– Enable Mobile Menu, можно включить или отключить мобильное меню.
– Enable Left Header Menu, включить или отключить левое меню.
– Enable Right Header Menu, включить или отключить правое меню.
– Width Trigger, укажите при каком максимальном размере будет отображаться мобильное меню.
– Hide Elements, скрыть какой-либо элемент с сайта при отображении мобильного меню. Можно указать CSS класс или ID элемента.
– Custom CSS, можно указать свои CSS стили для меню.
– Save Changes, сохраните изменения.
Header Options.
– Site Logo, можно выбрать что будет отображаться на мобильном сайте. Логотип или Текст.
– Logo, нажмите по полю, чтобы загрузить логотип.
– Alternative Logo URL, можно указать альтернативный URL-адрес логотипа.
– Header Height, можно указать высоту меню.
– Logo Top Margin, размер отступа, от верха сайта до логотипа.
– Header Text, можно указать текст, который будет отображаться в заголовке, если вы в начале выбрали отображение текста.
– Header Text Font Size, можно выбрать размер текста заголовка.
– Сохраните изменения.
Left Menu Options.
– Left Menu, выберите меню сайта для левого меню.
– Menu Icon, можно выбрать для меню иконку или изображение.
– Menu Icon Image, нажмите по полю, чтобы загрузить иконку или изображение.
– Left Menu Panel Width, можете указать размер ширины панели левого меню.
– Icon Top Margin, верхний отступ от иконки.
– Icon Left Margin, отступ с левой стороны до иконки.
– Сохраните изменения.
Right Menu Options. Здесь такие же настройки как и для левого меню. Здесь настройки для правого меню.
Color Options.
– Header Background Color, можно выбрать цвет для заголовка меню.
– Header Text Color, можно выбрать цвет для текста заголовка меню.
Выбор цвета для левого и правого меню (одинаковые настройки).
– Left Menu Icon Color, цвет иконки.
– Background Color, цвет фона меню.
– Text Color, цвет текста в меню.
– Background Hover Color, цвет фона при наведении.
– Hover Text Color, цвет текста при наведении.
– Submenu Background Color, цвет фона субменю или подменю (вложения).
– Submenu Text Color, цвет текста в подменю.
– Сохраните изменения, нажав на кнопку – Save Changes.
Всё готово! После сохранения настроек у вас на сайте (при определённом размере экрана) будет отображаться мобильное меню.
Меню в развёрнутом виде:
Остались вопросы? Напиши комментарий! Удачи!
Здравствуйте! А как убрать с мобильной версии меню, которое идёт по умолчанию- главное?
Добрый день. У вас сейчас отображается два меню, одно по умолчанию, а второе от плагина?
Илья, здравствуйте! Почему у меня меню в мобильной версии выводится в самом низу страницы, под футером?
Здравствуйте, а на основном сайте вверху? Меню у вас одинаковые и для десктоп и для мобильной версии или разные? На странице создания меню, внизу, там может быть указаны разные варианты отображения меню. Меню стало отображаться под футером, после установки данного плагина?
Добрый день! В режиме мобильного меню скрывается верхний блок сайта, произошло это после обновления плагина. как это изменить?
Здравствуйте! Можно стили поправить. Может помочь плагин SiteOrigin CSS. Либо вручную, скопировать CSS стили блока и изменить их, здесь показывал как. Можно плагин откатить к предыдущей версии. Есть плагин специальный WP Rollback
Добрый! Я в упор не понимаю, как добавить строки в это меню. У меня там только дем. страница и главная стр…Можно туда вставить другие созданные страницы?
В настройках плагина можно выбрать меню. Добавить страницы в меню: Внешний вид – Меню.
А есть идеи, как сделать своё меню? Я использую Menu Cart от Elementor, там удобная инфо-корзинка котоая показывает данные о товаре. Это не всунуть в меню WordPress а в настройках тем. Хочется своё моб меню сделать, возможно это можно с помощью CSS? Есть наработки или идеи куда копать?
Если вас интересуют стили, вам поможет плагин SiteOrigin CSS. Вот этот плагин ещё посмотрите, интересный, выпадающее горизонтальное меню.
Классная статья! Подскажите, как сделать, чтобы отображалось 2 или 3 товара в мобильном меню вместо одного? И не могу понять , как скрыть не нужные элементы через hide ? Спасибо!
Добавьте ещё товары в меню, в чём проблема? Какие именно элементы хотите скрыть? Вот здесь я показывал как скрыть любой элемент с сайта с помощью CSS.
Спасибо ! Товаров у меня много, но вид отображения в мобильной версии по одному товару , а я хотел бы сделать , чтобы в мобильном варианте показывало 2 товара друг с другом
Вам тогда шаблон сайта менять надо. Посмотрите в настройках по умолчанию должно быть: Внешний вид – Настроить – Woocommerce – Отображение товаров. Смотрите там.
Добрый день. Все облазил, не нашел плагин. Как на вордпресс сделать меню, чтобы на мобильном отображалось как здесь? Нужно с мобильного смотреть. Подскажите, мне на главную нужно сделать.
Я имел ввиду перечисления категорий с переходами на подкатегории, которые под слайдером
Ссылка пропала, был сайт рбт ру
Здравствуйте. Ссылку видел, рекомендую плагин Bellows Accordion Menu
Спасибо. Попробую