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 для мобильных устройств.

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

Источник

15 бесплатных WordPress плагинов для мобильного веб-сайта

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

Mobile Smart

Плагин Mobile Smart позволяет вашему WordPress сайту автоматически переключать тему, если пользователь использует мобильное устройство.

WPtouch

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

Any Mobile Theme Switcher

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

WP Mobile Plugin

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

MobilePress

MobilePress — это плагин для WordPress, формирующий удобную мобильную версию вашего WordPress сайта или блога.

Mobile Navigation

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

WordPress Mobile Pack

Целью этого плагина является расширение возможностей блогеров, издателей и других создателей контента. Поддерживается на различных устройствах, таких как iPhone, смартфонах с ОС Android, Windows Phone 8 и др.

Post Script Responsive Images

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

FV WordPress Flowplayer

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

Easy Responsive Shortcodes

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

WP Smart Mobile Theme plugin

WP Smart Mobile Theme plugin формирует мобильную версию вашего WordPress блога, которая автоматически корректируется в зависимости от устройства.

Mobile Previewer

Этот плагин предоставляет зарегистрированным пользователям возможность предварительного адаптивного просмотра.

WP Responsive Menu

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

WP Mobile Detector Mobile Plugin

Плагин WP Mobile Detector Mobile Plugin автоматически определяет, использует ли посетитель сайта обычный мобильный телефон или смартфон, и соответственно загружает совместимую мобильную WordPress тему.

WP Mobile Edition

Плагин представляет собой полный инструментарий для «мобилизации» вашего WordPress сайта. Очень прост в использовании.

Источник

Как создать адаптивное меню под мобильные устройства в WordPress

Опубликовано: ADv Дата 11.12.2016 в рубрике Своя тема Комментировать

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

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

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

Способ 1: Добавляем адаптивное меню в WordPress с помощью плагина

Этот способ достаточно простой и рекомендуется для новичков, т.к. не потребует добавления кода.

Здесь мы будем создавать меню-бутерброд, которое выезжает на мобильных разрешениях экрана.

Первым делом вам потребуется установить и активировать плагин Responsive Menu.

После активации плагин добавит новый элемент меню под названием ‘Responsive Menu’ в админбар. Нажав на него, вы окажетесь на странице настроек плагина.

Для начала потребуется указать ширину экрана, при которой плагин начнет отображать адаптивное меню. Значение по-умолчанию установлено в 800px, и оно подойдет для большинства сайтов.

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

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

Не забудьте нажать на кнопку ‘Update Options’ для того, чтобы сохранить изменения.

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

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

Способ 2: Добавляем меню в виде выпадающего списка с помощью плагина

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

Для начала вам потребуется установить и активировать плагин Responsive Select Menu.

После активации переходим в Внешний вид » Responsive Select для настроки плагина.

Прокручиваем до раздела ‘Activate theme locations’. По-умолчанию, плагин активируется для всех расположений меню в теме. Можно изменить это поведение, оставив его только для нескольких областей.

Не забудьте нажать на кнопку сохранения изменений.

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

Current Version: 1.7

Last Updated: 11.01.2016

Способ 3: Создаем адаптивное мобильное меню с раскрывающимся (toggle) эффектом

Одним из самых часто используемых способов вывода меню на мобильные экраны является использование раскрывающегося эффекта.

Способ предполагает добавление кода в файлы вашей WordPress темы.

Для начала открываем текстовый редактор типа Блокнот и вставляем этот код:

Теперь сохраняем этот файл как navigation.js на своем компьютере.

Далее, открываем FTP-клиент для того, чтобы загрузить этот файл в папку /wp-content/themes/your-theme-dir/js/ вашего сайта.

Замените your-theme-directory на папку вашей текущей теме. Если же в ней нет папки js, то потребуется ее создать.

После загрузки JavaScript файла, нужно будет подключить на сайт. Добавляем код в файл functions.php вашей темы или в плагин для сайта WordPress:

Теперь добавляем меню навигации в свою тему WordPress. Обычно меню навигации добавляется в файл header.php темы.

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

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

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

Возможные проблемы: В зависимости от вашей WordPress темы вам потребуется поправить CSS.

Способ 4: Добавляем выезжающее мобильное меню в WordPress

Еще одной распространенной техникой добавления мобильного меню является использование выезжающей панели меню (как показано в Способе 1).

Способ 4 предполагает добавление кода в файлы вашей темы, и это способ такой же реализации меню как в Способе 1.

Для начала открываем текстовый редактор типа Блокнот и добавляем код в пустой текстовый файл.

Не забудьте заменить example.com на название своего домена, и your-theme на вашу текущую тему. Сохраняем этот файл под именем slidepanel.js на компьютере.

Теперь нам понадобится изображение, которое будет использоваться для иконки меню. Значок гамбургера является наиболее часто используемым для этих целей. Такого рода изображений вы сможете найти на различных сайтах. Мы будем использовать значок для меню из библиотеки Google Material Icons.

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

Далее, открываем FTP-клиент и загружаем файл slidepanel.js в папку /wp-content/your-theme/js/.

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

После этого заливаем файл menu.png в папку /wp-content/themes/your-theme/images/.

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

Добавляем следующий код в файл functions.php темы:

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

Код нужно будет обернуть в HTML код для вывода выезжающего меню на маленьких экранах.

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

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

Ниже приведен пример CSS, который можно использовать для начала:

В зависимости от вашей WordPress темы вам может потребоваться настроить 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.

Отзывы

Vraiment bien

Excellent plugin and great support

bara bra! Very good plugin and Support

Great plugin & Best customer support

Words are not enough…

Make Life Easier 🙂

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

«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: эффективные методы создания

Сегодня поговорим о том, как сделать мобильное меню для своего сайта. Раньше мы рассматривали как создать мобильную версию блога на Вордпресс, говорили о том, как выбрать адаптивную тему для сайта. Но даже в адаптивном шаблоне могут возникнуть трудности с правильным отображением меню. А ведь именно меню в мобильной версии – основной инструмент навигации по сайту. В этой статье мы разберемся, какие есть методы создания адаптивного меню для сайта на 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-сайте, созданное подобным образом:

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

Источник