Июл
10
6

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

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

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

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

Отображение мобильного меню в WordPress

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

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

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

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

Настройки модуля WP Responsive Menu

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

  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, пишите в комментариях. По модулям, думаю, будет отдельный обзор.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 4, средний балл: 7,00 из 7)
Загрузка...

категория Категории: Возможности; Плагины;
теги Теги: , , , , .

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

  • Yaroslav.CH   18.07.2017

    Я чаще использую https://wordpress.org/plugins/responsive-menu/ — в т.ч. и платную версию. Гибкий в настройках, работает адекватно. Но это именно мобильное меню.

  • Tod   18.07.2017

    Yaroslav.CH, видел такой, многие о нем пишут хорошие отзывы.

  • Димон   04.09.2017

    Потестировал WP Responsive Menu для своего сайта, вроде бы все отлично сработало, спасибо за обзор!

  • Antey   25.10.2018

    Подскажите, можно ли с помощью этого плагина сделать так, чтоб лого хедера отображалось только на главной странице сайта?

  • Tod   25.10.2018

    Antey, вам пригодится статья про вывод только на главной — тут придется править код макета, предположительно файл header.php.

  • Anton   12.08.2019

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

Оставить комментарий


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

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости