WP Responsive Menu
WP Responsive Menu это довольно простой плагин создания адаптивного меню, которое будет появляться у пользователей, которые зашли на ваш сайт через мобильное устройство. Плагин простой, но именно из-за этого я его и выбрал для обзора из всех подобных плагинов. Кроме пары неприятных мелочей плагин практически идеален – он маленький, он легко настраивается, он не конфликтует с шаблонами. Большинство адаптивных шаблонов страдает тем, что на маленьком экране исчезают все управляющие элементы – от главного меню до сайдбара. Эти шаблоны фокусируются на том, чтобы максимально удобно подать пользователям контент, забывая про управляющие элементы сайта. Адаптивное меню дефолтного шаблона Twenty Fourteen это скорее исключение, чем правило. Да и то, это меню далеко от совершенства.
Скачиваем плагин по ссылке в конце страницы и устанавливаем его:
1 Распаковываем архив.
2 Копируем папку wp-responsive-menu в /wp-content/plugins/.
3 Заходим в админку блога на вкладку "Плагины" и активируем плагин.
Настройка плагина находится в "Настройках\WP Responsive Menu". Там вы увидите две вкладки "General" и "Menu Appearance". Первое это настройки плагина, а второе это настройка внешнего вида меню (здесь можно задать цвета адаптивного меню). Внешний вид я рассматривать не буду – подобрать подходящие для вашего шаблона цвета вы сможете и сами. А вот главные настройки плагина я рассмотрю подробно. Первое, что вы там увидите это:
Опция "Enable mobile navigation" всего лишь включает и выключает адаптивное меню плагина. Собственно, деактивация и активация плагина делает тоже самое, так что непонятно зачем вообще эта опция нужна.
Опция "Choose the wordpress menu" позволяет вам выбрать то меню, которое будет выводиться на мобильных устройствах. Неважно, поддерживает ли ваша тема произвольные меню или нет – создать и использовать меню в плагине можно и без поддержки данной функции в шаблоне. Но даже если ваша тема поддерживает меню и у вас на сайте уже есть какие-то меню – не стоит их использовать в плагине. Создайте отдельное уникальное меню "Адаптивное меню", которое и будет выводиться плагином. Туда можно добавить рубрики сайта, его страницы, да что угодно в общем-то.
Опция "Menu symbol position" позволяет вам сменить расположение знака меню. Его можно выводить или слева или справа. Я предпочитаю слева, но это по сути не играет никакой роли – клик на любом месте черной полоски выведет адаптивное меню, поэтому где именно расположен знак вызова меню абсолютно не имеет никакого значения.
Следующая часть настроек:
Опция "Text on menu bar" не нуждается в пояснении – это просто текст, выводимый рядом со значком вызова адаптивного меню.
Опция "Logo for menu bar" позволит вам задать логотип, выводимый рядом со значком вызова меню и надписью. К сожалению, этой опцией воспользоваться сложно, так как автор криво настроил css код, в результате чего меню получается примерно таким:
Как вы сами видите – элементы расположены на разной высоте, что никак не может кого-либо устраивать. Странно, что автор плагина сам не заметил такой косяк, когда добавлял эту функцию в свой плагин. Впрочем, если не задавать опцию "Text on menu bar", то все будет выведено более-менее нормально:
Хотя все равно – только значок меню с текстом "МЕНЮ" выглядит лучше.
Опция "Display menu from width" задает ширину, при которой будет выводиться меню плагина. Причем значение "962" это максимальная ширина, так что про желание выводить адаптивное меню на десктопах можно забыть. К сожалению, не понимаю, зачем автор сделал такое ограничение. Адаптивное меню сегодня используется в дизайне и не для мобильных устройств (к примеру, посмотрите на недавний редизайн сайта habrahabr.ru). Из-за этого ограничения на любом большом планшете вы адаптивное меню не увидите, да и на маленьких 7-дюймовых планшетах в горизонтальном положении меню тоже не будет видно. Так что можно сделать однозначный вывод – плагин нужен для вывода меню на смартфонах. Хотя как именно это работает мне непонятно – проверял работу плагина на смартфоне Samsung Galaxy S4, у которого разрешение экрана 1080x1920 – меню выводится, что при вертикальном просмотре, что при горизонтальном. Я с адаптивной версткой сайтов практически не сталкивался, поэтому судить что к чему мне сложно. Просто приму за факт – на смартфонах меню выводится, а на планшетах и десктопных браузерах нет. Хотя, вывести для тестирования адаптивное меню в десктопном браузере можно – достаточно его лишь ужать по ширине:
Для скриншота я ужал окно браузера до минимума, но значение в 962 пикселя позволяет видеть меню и при более широком окне браузера.
Последняя часть настроек плагина:
Опция "Menu position" определяет, где именно будет выводиться меню. Варианты слева, справа и сверху.
Опция "Hide elements on mobile" позволяет вам скрыть некоторые элементы вашего сайта при просмотре на мобильных устройствах. А точнее – скрыты они будут тогда, когда будет выводиться меню. Если в вашем меню вы дублируете важные управляющие элементы сайта, но в данной опции можно эти самые дублируемые элементы скрыть. Достаточно лишь указать css-селектор скрываемого элемента и он будет полностью скрыт.
Опция "Allow zooming on mobile devices" включает или отключает возможность масштабирования на мобильных устройствах. Включать ее или нет решать вам – все целиком зависит от дизайна вашего сайта. Если он широкий и не адаптивный, то отключение масштабирования будет плохой идеей.
С настройками плагина разобрались. Теперь зайдите во "Внешний вид\Меню" и создайте то меню, которое будет выводиться плагином:
Это меню подходит чуть ли не любому коммерческому сайту. Готовое меню на сайте при этом будет выглядеть так:
Привожу скриншоты с десктопного браузера, но на мобильных устройствах оно будет выглядеть точно также.
Не думайте, что вам это не нужно и что адаптивная верстка, как и подобные меню это всего лишь модная фишка и вам совершенно не нужна. Конечно, обычным сайтам это еще долгое время не понадобится, но вот коммерческие сайты должны подстраиваться под мобильные устройства в обязательном порядке. Терять потенциальных клиентов только потому, что они не смогли кликнуть на своем телефоне на ссылку "Купить" это верх глупости.
Особенно раздражают при мобильном серфинге различные красивости вроде выпадающих меню. Сами понимаете – кликнуть пальцем на выпадающем меню, которое появляется лишь при наведении на него курсора мышки довольно проблематично. При всем этом я лично адаптивные шаблоны не люблю – предпочитаю, чтобы у сайта была своя, отдельная мобильная версия, которая целиком заточена под мобильные устройства. Если желания создавать отдельную мобильную версию сайта нет, то можно воспользоваться плагинами вроде WPtouch iPhone Theme, которые сами создают эту самую мобильную версию сайта. Не идеальный вариант, но хоть что-то.
По статистике li.ru уже около 30% всего трафика в России принадлежит мобильным устройствам. Конечно, большая часть этого трафика приходится на различные социальные сети, но, тем не менее, тенденция на лицо. И игнорировать ее было бы крайне недальновидно для любого вебмастера.
WP Responsive Menu
Автор плагина: MagniGenie
Рассматриваемая версия: 1.0 от 23.04.2014
Текущая версия: 3.1.9.2 от 21.10.2024
Совместимость с версией WordPress: 3.0 и выше
Активных установок плагина: 40 000+
Скачать плагин версии 3.1.9.2 (всего скачено 905 525 раз)
Понравился пост? Подпишись на обновления по RSS или Twitter !
#1,
В плагине нет очень важной вещи, на мой взгляд - поиска. В таком меню поиск должен быть обязательно и в других плагинах он есть.
#2,
согласен с вами, поиск должен быть. хотел уже было сам в плагин добавить такую возможность и описать это в статье, но вовремя заметил на форуме плагина, что автор уже работает над добавлением этой функции в свой плагин. так что можно подождать когда выйдет следующая версия.
#3,
Ерунда это все, для интернет магазинов может и необходимо, а вот для всех остальных на фиг не сдалось. На планшетах прекрасно видно большинство сайтов, причем даже не особо мелко. Ваш, к примеру, блог прекрасно виден на 10-дюймовом планшете. А на телефоне серфить идиотизм, телефоны годятся только для контактика, да твиттера. Ну может еще для игр. Тратить время на поддержку адаптивного дизайна это тратить время впустую.
#4,
ну кто его знает. сейчас может и так, но вот что будет в будущем?
#5,
Автор, а плагин WPtouch iPhone Theme годится для андройд-телефонов или он только для айфонов создает мобильную версию?
#6,
конечно для всех. и для андройда и для остальных мобильных систем. название таким осталось из-за того, что изначально лишь один айфон был - только потом андройд-телефоны его потеснили.
#7,
Скажите, пожалуйста, вы не сталкивались с ситуацией, когда после установки и настройки плагина адаптивное меню появляется при уменьшении экрана десктопа, но при клике на иконку ничего не открывается? Посоветуйте, с чем это может быть связано, а то уже все пересмотрела, не могу понять.
Спасибо.
#8,
да с чем угодно. с выключенными js-скриптами в браузере, например. вы говорите именно об этом плагине?
#9,
ну да, об этом. скрипты не выключены...
#10,
сложно сказать, не видя вашего сайта. может у вас шаблон глючный - скрипты плагинов не подключает, а может конфликт с каким другим плагином. попробуйте отключить все плагины.
#11,
Настроил плагин, а как в шаблон то его вставить???
#12,
никак. он сам в тему подключается.
#13,
Поставил плагин получилось теперь два меню старое которое хотел убрать и новое от плагина Как скрыть старое?
#14,
откуда же мне знать?
зависит от того, как и чем оно в вашей теме выводится.