Чтобы сделать на Вашей странице меню, корректно отображающееся на мобильном устройстве, можно использовать WP Responsive Menu. Плагин небольшой, прост в настройке и совместим с большим количеством шаблонов. Многие адаптивные шаблоны при отображении мобильной версии сайта скрывают все управляющие элементы, делая акцент на содержимом сайта, что не всегда удобно.
После активации плагин создаст раздел в настройках. В пункте «Общие» Вы увидите основные настройки плагина, а в пункте «Появление меню» — настройки тем меню.
Вид пункта «Общие»:
«Menu symbol position» задает расположение значка вызова меню. Стоит заметить, что вне зависимости от того, расположен значок слева или справа клик по черной полосе приведет к отображению меню.
«Choose the wordpress menu» — здесь можно выбрать какое меню будет отображаться в мобильной версии сайта. Вне зависимости от того, поддерживает ли Ваш шаблон создание пользовательских меню, лучше создавать меню в самом плагине. Возможности для этого у него достаточно широкие — добавить можно практически любой элемент сайта.
Далее:
«Text on menu bar» — текст, отображаемый возле кнопки вызова меню.
«Logo for menu bar» служит для выбора логотипа, который должен отображаться возле кнопки вызова меню. Однако проблемы с настройкой CSS приводят к следующему результату:
Однако, если текст на полосе вызова меню не задавать — результат будет вполне приемлем:
В пункте «Display menu from width» можно задать при каком значении ширины экрана будет выведено адаптивное меню. Максимально возможное значение — 962. Это, в частности, означает, что адаптивное меню будет отображаться только на смартфонах. На десктопах и планшетах плагин работать не будет. Хотя в целях тестирования можно сжать окно браузера на десктопе и тогда меню отобразится:
Оставшиеся настройки:
Настраивается также отображение меню – вверху либо сбоку. Также можно выбрать какие элементы в мобильной версии сайта будут скрываться при отображении меню. Это сделано для предотвращения повторения элементов сайта. Возможность масштабировать сайт также можно отключить. Однако, если сайт на адаптивный, то этого лучше не делать. Вот и все с настройками плагина.
Осталось создать само меню. Переходим на вкладку «Внешний вид» :
Данное меню будет актуально для большей части сайтов, связанных с продажами. Финальный вид будет таким:
Адаптивный дизайн в последнее время стал жизненно необходим для всех сайтов, связанных с продажей товаров или услуг. Ведь доля мобильного трафика неуклонно растет. По последним данным, она составляет уже больше 30 %. И если потенциальный клиент не сможет воспользоваться Вашими услугами из-за проблем с интерфейсом при просмотре с мобильного устройства — будет обидно, согласитесь. В идеале сайт должен иметь отдельную мобильную версию. Однако, если возможности создать ее нет, стоит воспользоваться плагинами, создающими мобильную версию на основе Вашего сайта. Это может быть, к примеру, WPtouch iPhone Theme или его аналоги. Не слишком изящное решение, но и оно может Вам помочь.