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

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

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

• Использование wp_is_mobile.
• Алгоритм создания разных меню.
• Плагин WP Responsive Menu. 

Функция wp_is_mobile

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

if ( wp_is_mobile() ) {
     /* Отображается информация для мобильных устройств */
} else {
     /* В противном случае - инфа обычного сайта */
}

Работает функция через определение значение строки User Agent в браузере посетителя — $_SERVER[‘HTTP_USER_AGENT’] (например, Mobile, Kindle, Android, BlackBerry, Opera Mini и т.п.). Однако при этом она не передает данные о размерах экрана или названии устройства — только True / False.

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

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

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

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

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

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

• top-mobile-menu — вариант под моб.устройства;
• top-pc-menu — под десктопную обычную версию.

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

if ( wp_is_mobile() ) {
     wp_nav_menu( array( 'menu' => 'top-mobile-menu' ) );
} else {
     wp_nav_menu( array( 'menu' => 'top-pc-menu' ) );
}

В вашем макете код может немного отличаться за счет дополнительных параметров функции 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. Не смотря на то, что последний апдейт был год назад, работа над багами (судя по статистике) активно ведется.

Основные функции:

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

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

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

1. Установить и активировать модуль WP Responsive Menu.
2. Создать альтернативное мобильное меню в WordPress админке (по аналогии с предыдущим методом в разделе «Внешний вид»).
3. Перейти в пункт «WPR Menu» и во вкладке General поставить галочку напротив опции «Enable Mobile Navigation».
4. Ниже в настройке «Select Menu» выбираете меню, созданное на втором шаге.
5. В следующем поле «Elements to hide in mobile» указываете название class или id, которые отвечают за вывод стандартной навигации, например: .topnav, #main-menu (разделяются запятой, классы с точкой, ID с решеткой).
6. Сохраняем — кнопка «Save Options».

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

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

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

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

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 4, средний балл: 7,00 из 7)

Загрузка...

Категории: Возможности; Плагины;
Теги: вордпресс веб-разработка, меню и навигация, мобильная версия, полезные плагины, функции wordpress.