создание мобильного меню в wordpress

Меню для мобильной версии сайта на WordPress: эффективные методы создания

Сегодня поговорим о том, как сделать мобильное меню для своего сайта. Раньше мы рассматривали как создать мобильную версию блога на Вордпресс, говорили о том, как выбрать адаптивную тему для сайта. Но даже в адаптивном шаблоне могут возникнуть трудности с правильным отображением меню. А ведь именно меню в мобильной версии – основной инструмент навигации по сайту. В этой статье мы разберемся, какие есть методы создания адаптивного меню для сайта на WordPress с плагинами и без них.

Варианты адаптивного меню на сайте

Прежде, чем рассмотреть непосредственно виды меню, стоит учитывать, какие вообще есть варианты адаптивной навигации.

Это решение отлично подходит для вариантов, где количество пунктов не больше четырех.

Смотрим пример полной версии:

И отображение на мобильном устройстве:

Кликая на Explore, видим навигацию по сайту в футере:

Вот пример полной версии:

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

Условно можно выделить такие их основные виды:

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

Приведем примеры основных типов мобильного меню на сайте.

Горизонтальное меню

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

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

Если структура сайта чересчур развернутая, для нескольких пунктов используют вместе с горизонтальным меню также раскрывающиеся списки. Т.е. каждый элемент будет дополнительно раскрываться, добавляя подпункты. Либо же может быть статичное горизонтальное меню из нескольких наиболее важных пунктов (4-5), а более развернутая структура будет доступна в раскрывающемся меню. Вот пример такой реализации (настольная версия):

Также возможно одновременное использование горизонтального и вертикального отображения.

Вертикальное мобильное меню

Вот пример, когда уживаются два вида меню на одном сайте:

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

Раскрывающееся меню

Наиболее распространенный вид раскрывающегося меню – это кнопка вверху экрана, при нажатии на которую, появляются разделы сайта.

Раскрываться такой список может вниз, вправо, либо же, как в примере ниже, пункты меню будут выезжать с левой стороны:

В Wordress-теме Wordie выезжающее меню реализовано как в мобильной, так и в настольной версии. Разница в том, что после нажатия на кнопку, в настольной — меню раскрывается горизонтально, а в мобильной – вертикально.

Важно в таком варианте сделать кнопку меню заметной для пользователя.

Ранее мы рассматривали различные комбинации раскрывающегося меню с горизонтальным и вертикальным. Там выпадающие списки дополняют основные пункты меню.

Теперь разберемся, как можно реализовать мобильное меню для сайта на WordPress.

WordPress-плагины для создания мобильного меню

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

Для решения данной задачи можно воспользоваться плагинами: WP Mobile Menu, WP Responsive Menu, либо же Responsive Menu от автора Peter Featherstone. Последний – самый популярный плагин: более 100 000 активных установок, а обновлялся он две недели назад. Рассмотрим его функции и настройки.

Базовый вид адаптивного меню для WordPress с помощью данного плагина можно посмотреть в данном видео:

Это раскрывающееся меню, с выезжающими пунктами и вертикальным отображением. Каждый из основных разделов может также дополнительно раскрываться.

Теперь рассмотрим особенности настройки. После активации, значок плагина появится в админ-панели слева. Нажимаем и переходим в меню плагина Responsive Menu.

Во вкладке Settings можно выбрать использование shortcode:

В разделе Look & Feel задаем название (Click Button Title) и вид кнопки меню, ее расположение (Click Button Location Settings), можно определить для нее картинку (Click Button Image). Также здесь задаются параметры для отображения уже раскрывшегося меню (Menu Settings). Тут можно указать сторону, с которой оно будет выезжать (Slide Side), изображение рядом с текстом (Menu Image). В разделе Main Menu можно указать фон, цвет текста и ссылок при нажатии и т.п. (Text Colour).

Во вкладке Advanced Settings задают размер экрана, для которого применяется созданное плагином мобильное меню на WordPress-блоге. По умолчанию стоит значение 800 пикселей. В пункте CSS of Menu To Hide можно указать класс основного меню, которое будет исчезать в мобильной версии. Для определения класса нужно просмотреть исходный код элементов и выбрать тот, который отвечает за главное меню (см. пример ниже).

В пункте Menu Depth задается глубина раскрытия элементов. Т.е., к примеру, если на вашем сайте есть разделы с 4 или 5 уровнем вложенности, для мобильного меню вы можете задать максимальную глубину – 2-го уровня вложенности. Соответственно для настольной версии будет отображаться полное разветвление структуры, а в мобильной – укороченное.

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

Адаптивное меню для сайта: JQuery, Html и CSS

Мы рассмотрим способ создания адаптивного меню для сайта на WordPress с помощью кода. Создавать будем подобное тому, что делает плагин Responsive Menu. Т.е. выдвигающееся меню после нажатия на кнопку. Перед любыми манипуляциями в первую очередь сделайте бэкап сайта, а эксперименты проводите в дочерней теме.

Первое, что нам нужно, это создать файл в Notepad с таким кодом:

В данном коде заменяем ваш_домен на название вашего сайта, и «ваша_тема» – соответственно. Сохраняем файл на рабочий стол, назовем его slidepanel.js.

Затем с помощью ftp-клиента загружаем js файл в папку /wp-content/ваша_тема/js/. Если такой папки в вашей теме нет, нужно ее создать. Файл menu.png отправляем сюда: /wp-content/themes/ваша_тема/images/.

После этого необходимо проверить, загрузился ли Javascript-файл в вашу тему. Для этого запускаем slidepanel.js.

Далее подключаем Javascript-файл в functions.php:

Теперь нам нужно найти код в header.php, который отвечает за расположение меню на экране. Выглядеть он должен подобным образом:

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

Обратите внимание, что изначальный код расположения меню остается без изменений.

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

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

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

Вот так выглядит мобильное меню на WordPress-сайте, созданное подобным образом:

Надеюсь, данная статья была полезной для вас. Оставляйте комментарии и делитесь своим опытом.

Источник

WordPress.org

Русский

WP Mobile Menu — The Mobile-Friendly Responsive Menu

Описание

Нужна помощь в создании мобильного сайта? Нужен плагин для мобильного меню, который будет привлекать ваших мобильных посетителей?

WP Mobile Menu is the best WordPress responsive mobile menu. Provide to your mobile visitor an easy access to your site content using any device smartphone/tablet/desktop.

Se below the lisf of features of what our WordPress Responsive Menu can do for you.

No coding knowledge is required. Works with all WordPress responsive themes.

Links

This are the features that will keep your mobile visitors engaged

Increase your Woocommerce shop website sales conversion

Note: some of the features are Premium. To have access to those features you will need WP Mobile Menu Premium. You can get WP Mobile Menu Premium here!

Related Plugins

Menu Image: Easily add an image or icon in a menu item. Creating a better website menu.

Pay With Stripe: Sell your products on your WordPress website without any other complex e-commerce plugin.

I need help or I have a doubt, check our Support

Great Support, our free support is above the average. Only the Premium support is better and faster.

Bug reports for WP Mobile Menu are welcomed on GitHub. Please note GitHub is not a support forum, and issues that aren’t properly qualified as bugs will be closed.

Скриншоты

Установка

Часто задаваемые вопросы

Where can I find WP Mobile Menu documentation?

For help setting up and configuring WP Mobile Menu check our documentation

Will WP Mobile Menu work with my theme?

Yes! WP Mobile Menu will work with any theme, but may require our help to hide the theme menu. Please see our documentation.

how to install WP Mobile Menu?

Check this article in the following link

Problems after updating the plugin. The update messed the site?

Check this article in the following link

Can’t load WP Mobile Menu using HTTPS

Check this article in the following link

How to add a Phone Call Button in the header?

Check this article in the following link

Where can I request new features and add-ons?

You can send us an email using the contact form available on the following link

Is WP Mobile Menu Free?

There are two versions of WP Mobile Menu. One is free and another is Premium. Only being able to monetize the plugin is possible to provide constant updates and a good support on the Free version.
The Premium versions have some more advanced features in general and for Ecommerce websites that are not available in the free version.

Отзывы

Super nice support of the author of WP Mobile Menu

Vraiment bien

Excellent plugin and great support

bara bra! Very good plugin and Support

Great plugin & Best customer support

Words are not enough…

Участники и разработчики

«WP Mobile Menu — The Mobile-Friendly Responsive Menu» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

«WP Mobile Menu — The Mobile-Friendly Responsive Menu» переведён на 4 языка. Благодарим переводчиков за их работу.

Заинтересованы в разработке?

Журнал изменений

2.8.1.8.1

2.8.1.6.1

2.7.4.3.1

Fix! — Retina logo bug

New! — 2 Menu locations for the left/right menu (useful for translation plugins)

Источник

Разное обычное и мобильное меню в WordPress, функция wp_is_mobile, плагин WP Responsive Menu

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

Одним из выходов из ситуации есть создание альтернативного мобильного меню в WordPress, которое бы имело упрощенный вид и содержало лишь ссылки на основные разделы. Это можно сделать с помощью некоторых модулей или функции wp_is_mobile. Рассмотрим все варианты:

Функция wp_is_mobile

Данный условный оператор проверяет посещает ли человек ваш сайт с мобильного устройства, возвращает значение True или False. Синтаксис его следующий:

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

Внимание! В функции есть 2 нюанса:

И если первая ситуация возникает достаточно редко, то с кэшированием получается не совсем хорошо (в посещаемых сайтах без него не обойтись).

Алгоритм создания альтернативного мобильного меню

1. Первым делом заходим в раздел админки «Внешний вид» — «Меню». Здесь нужно создать два меню разные для каждой из версий, например:

2. Далее в файле дочерней темы используемого шаблона, отвечающем за вывод шапки (header.php или др.), вставляете вместо вывода меню конструкцию:

В вашем макете код может немного отличаться за счет дополнительных параметров функции wp_nav_menu. Суть метода в том, чтобы в качестве мобильного меню WordPress выводить вариант top-mobile-menu, для обычного — top-pc-menu (если надо, подставляйте свои названия).

После внедрения проверяете работу навигации на смартфонах/планшетах. Как я уже сказал выше, функия wp_is_mobile определяет именно User Agent, поэтому желательно заходить на сайт с телефона, вариант с панелью разработчика Ctrl+Shift+I может глючить.

Плагин WP Responsive Menu

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

Скачивайте WP Responsive Menu в репозитории отсюда или устанавливайте плагин из админки. Данное решение позволяет вам без труда создать простое и полностью настраиваемое выезжающее меню для смартфонов, планшетов и т.п. Вот как приблизительно будет выглядеть итоговый результат (цвета настраиваются, есть блок поиска):

WP Responsive Menu весьма популярен — 70тыс. загрузок и 4,5 баллов оценки. За основу взят sidr jquery menu plugin. Не смотря на то, что последний апдейт был год назад, работа над багами (судя по статистике) активно ведется.

После установки модуля все настройки найдете в разделе «WPR Menu», они разделены на 2 вкладки — General (основные) и Appearance (внешний вид).

Дабы решить поставленную перед нами задачу, мы должны:

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

Просмотрите остальные параметры плагина и отметьте их по желанию: свайп, зум, блок поиска, отображение логотипа, сторона появления элемента и разрешение экрана, при котором оно срабатывает. Также во вкладке «Menu Appearance» требуется изменить цвета фона и убрать рамки при необходимости.

В целом работать с WP Responsive Menu достаточно просто. Хотя и функция wp_is_mobile не вызывает каких-либо чрезмерных сложностей. Я тестировал оба варианта, и они неплохо себя проявили. Однако следует помнить, что условный оператор wp_is_mobile становится бесполезным при включении кэширования. Учитывая настройки плагина с размерами экрана, там нет привязки к User Agent, а значит подобные ограничения ему не страшны.

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

Источник

Плагины мобильного адаптивного меню для WordPress

Мобилгеддон мог быть и ушел. Однако, даже если ваш веб-сайт не пострадал от последнего обновления Google, вы всегда можете сделать больше, чтобы посетители с мобильных устройств чувствовали себя на вашем веб-сайте как дома.

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

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

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

Отказ от ответственности: TechBlogSD является партнером одного или нескольких продуктов, перечисленных ниже. Если вы перейдете по ссылке и совершите покупку, мы сможем получить комиссию.

Советы по созданию меню сайта, удобного для мобильных устройств

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

Еще в 2012 году 55% ​​респондентов в опросе Google заявили, что плохое восприятие веб-сайта на мобильном устройстве повредит их восприятию бренда ; Так что, если вы не делаете все, что можете, в 2015 году сделать свой сайт привлекательным для мобильных пользователей, и кто знает, какой ущерб вы можете нанести сегодня.

Лучшие плагины WordPress для мобильного адаптивного меню

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

Используя один из этих бесплатных или дополнительных плагинов, вы можете сделать систему навигации своего сайта более удобной и простой в использовании.

Бесплатный плагин для WordPress с адаптивным меню

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

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

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

WP Responsive Menu Бесплатный плагин WordPress

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

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

Плагин WordPress для мобильного меню UberMenu Premium

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

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

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

Хотя меню UberMenu по умолчанию адаптивны и оптимизированы для мобильных устройств, вы получаете дополнительный контроль над тем, как пользователи смартфонов и планшетов будут воспринимать ваши навигационные системы. Сюда входят настраиваемые точки останова, расширенная поддержка сенсорного ввода для пользователей Android, iOS и Windows 8, а также скрытие элементов в зависимости от размера экрана.

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

Заключение

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

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

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

Что вас больше всего раздражает в использовании меню веб-сайтов на смартфоне или планшете? Какие функции вы хотели бы видеть в плагине мобильного меню? Поделитесь своими мыслями в комментариях ниже.

Источник