Как создать адаптивное меню для мобильного WordPress

Хотели бы вы создать адаптивное мобильное меню в своем блоге на WordPress?

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

В этом уроке мы покажем вам, как легко создать адаптивное меню на WordPress.

Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге 

Тогда вернемся к тому, почему мы здесь.

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

Первый способ: создать мобильное меню с плагином WordPress

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

В этом методе мы создадим меню (со значком гамбургера), который скользит по экрану мобильного телефона.

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

После активации плагина плагин добавит в меню новый пункт под названием « Отзывчивый Меню ". Нажав на нее, вы попадете на страницу настроек плагина WordPress.

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

После этого вам нужно выбрать меню, которое вы хотите использовать на мобильном телефоне.

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

Не забудьте нажать на « параметры обновления Чтобы сохранить ваши настройки.

Мы также предлагаем вам ознакомиться с нашими 10 WordPress плагины для создания меню в вашем блоге

Теперь вы можете посетить свой веб-сайт и изменить размер экрана браузера, чтобы увидеть адаптивное меню в действии.

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

Метод 2: Как добавить мобильное меню вручную

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

Этот метод требует, чтобы вы добавили пользовательский код в ваши файлы WordPress.

В одном из наших предыдущих уроков мы покажем вам как создать плагин WordPress.

Сначала вам нужно открыть текстовый редактор, например Блокнот, и вставить этот код.

(function () {nav var = document.getElementById ('site-navigation'), кнопка, меню; if (! nav) {return;} button = nav.getElementsByTagName ('button') [0]; menu = nav. getElementsByTagName ('ul') [0]; if (! button) {return;} // Скрыть кнопку, если меню отсутствует или пусто, если (! menu ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = function () {if (-1 === menu.className.indexOf ('nav-menu')) {menu.className = 'nav-menu';} if (- 1! == button.className.indexOf ('toggled-on')) {button.className = button.className.replace ('toggled-on', ''); menu.className = menu.className.replace ('toggled -on ',' ');} else {button.className + =' toggled-on '; menu.className + =' toggled-on ';}};}) (jQuery);

Теперь вы должны сохранить этот файл с именем " navigation.js На вашем столе.

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

Заменить выражение " ваш-тема С именем вашей текущей папки темы WordPress. Если в каталоге вашей темы нет папки js, вам необходимо ее создать.

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

Откройте для себя что-нибудь еще Что вы можете сделать с файлом functions.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '' /js/navigation.js, массив (»JQuery '), 20160909', верно.);

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

Меню 'primary', 'menu_class' => 'nav-menu')); ?>

Мы предполагаем, что расположение меню, определенное вашей темой WordPress, называется " первичный ". В противном случае используйте местоположение, определенное вашей темой WordPress.

Откройте для себя также наш 5 плагинов WordPress для создания форм подписки

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

/ * Меню навигации * / .main-navigation {margin-top: 24px; верхняя маржа: 1.714285714rem; выравнивание текста: центр; }. основная навигация li {маржа-верх: 24px; верхняя маржа: 1.714285714rem; размер шрифта: 12 пикселей; font-size: 0.857142857rem; высота строки: 1.42857143; } .main-navigation a {color: # 5e5e5e; } .main-navigation a: hover, .main-navigation a: focus {color: # 21759b; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {display: none; }. основная навигация ul.nav-menu.toggled-on, .menu-toggle {display: inline-block; } // CSS для использования на мобильных устройствах @media screen и (min-width: 600px) {.main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {border-bottom: 1px solid # эдедед; граница сверху: сплошной 1px #ededed; дисплей: встроенный блок! важно; выравнивание текста: слева; ширина: 100%; } .main-navigation ul {маржа: 0; текстовый отступ: 0; } .main-navigation li a, .main-navigation li {display: inline-block; текстовое оформление: нет; } .main-navigation li a {border-bottom: 0; цвет: # 6a6a6a; line-height: 3.692307692; преобразование текста: прописные буквы; белое пространство: nowrap; } .main-navigation li a: hover, .main-navigation li a: focus {color: # 000; } .main-navigation li {маржа: 0 40px 0 0; маржа: 0 2.857142857rem 0 0; положение: относительное; } .main-navigation li ul {маржа: 0; отступ: 0; позиция: абсолютная; верх: 100%; z-индекс: 1; высота: 1 пикс; ширина: 1 пикс; переполнение: скрыто; клип: rect (1px, 1px, 1px, 1px); }. главная навигация li ul ul {верх: 0; осталось: 100%; } .main-navigation ul li: hover> ul, .main-navigation ul li: focus> ul, .main-navigation .focus> ul {border-left: 0; клип: наследование; переполнение: наследование; рост: наследовать; ширина: наследовать; }. main-navigation li ul li a {background: #efefef; нижняя граница: сплошной 1px #ededed; дисплей: блок; размер шрифта: 11 пикселей; font-size: 0.785714286rem; line-height: 2.181818182; отступ: 8 пикселей 10 пикселей; заполнение: 0.571428571рем 0.714285714рем; ширина: 180 пикселей; ширина: 12.85714286rem; белое пространство: нормально; } .main-navigation li ul li a: hover, .main-navigation li ul li a: focus {background: # e3e3e3; цвет: # 444; } .main-navigation .current-menu-item> a, .main-navigation .current-menu-ancestor> a, .main-navigation .current_page_item> a, .main-navigation .current_page_ancestor> a {color: # 636363; font-weight: жирный; } .menu-toggle {дисплей: нет; }}

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

Откройте для себя также несколько премиальных плагинов WordPress  

Вы можете использовать другие плагины WordPress, чтобы придать современный вид и оптимизировать управление вашим блогом или веб-сайтом.

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. UberMenu

UberMenu - это плагин WordPress, предназначенный для создания настраиваемого, адаптивного и доступного для пользователей мегамену. Он работает после установки и не требует специальной настройки.

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

Смотрите также наш 9 плагинов WordPress для создания ценовых сеток в блоге

Среди прочего вы найдете: 3 шаблона меню, полностью адаптивный макет, совместимость с мобильными устройствами (iPhone, iPad, Android), поддержку сенсорного ввода и т. Д.

скачать | Демонстрация | веб-хостинг

2. LMM

Liquida Mega Menu, также называемый LMM, - это плагин WordPress, разработанный для пользователей и разработчиков. Он имеет простой и интуитивно понятный интерфейс, интегрированный с приборной панелью WP, что позволяет создавать и настраивать неограниченное количество мегаменю без каких-либо навыков программирования.

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

скачать | Демонстрация | веб-хостинг

3. Меню 8Degree Fly

8Degree Fly Menu - это плагин премиум-класса для WordPress, который позволяет вам добавить холст-меню на ваш веб-сайт, чтобы придать ему вид, который легко выделяет вашу информацию. Он использует функцию меню WordPress по умолчанию для создания своих меню.

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

Читайте также: 10 плагинов WordPress для оптимизации боковых панелей и липких заголовков

Он также поставляется с редактором WYSIWYG, который поможет вам понять ваше длинное описание в удобной для пользователя форме .В этом редакторе вы также можете использовать шорткоды.

скачать | Демонстрация | веб-хостинг

Другие рекомендуемые ресурсы

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

• Как создать всплывающее меню на WordPress
• 8 WordPress плагины для создания мегаменю в вашем блоге
• Некоторые советы по созданию современного меню для вашего блога
• 6 WordPress плагины для управления категориями и подкатегориями в вашем блоге

Заключение

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

Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

А пока расскажите о своем Комментарии и предложения в специальном разделе.

...