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

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

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

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

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

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

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

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

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

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

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

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

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

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

Последняя опция на экране позволяет вам предоставить класс 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.

<nav id = "site-navigation" class = "main-navigation" role = "navigation"> <button class = "menu-toggle"> Меню </ button> <? php wp_nav_menu (array ('theme_location' => ' primary ',' menu_class '=>' nav-menu ')); ?> </ nav>

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

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

/ * Меню навигации * / .main-navigation {margin-top: 24px; на полях: 1.714285714rem; выравнивание текста: по центру; } .main-navigation li {margin-top: 24px; на полях: 1.714285714rem; размер шрифта: 12px; размер шрифта: 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; } .main-navigation 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 # ededed; border-top: 1px solid #ededed; дисплей: встроенный блок! важный; выравнивание текста: слева; ширина: 100%; } .main-navigation ul {margin: 0; текстовый отступ: 0; } .main-navigation li a, .main-navigation li {display: inline-block; текстовое оформление: нет; } .main-navigation li a {border-bottom: 0; цвет: #6a6a6a; высота строки: 3.692307692; преобразование текста: верхний регистр; пустое пространство: nowrap; } .main-navigation li a: hover, .main-navigation li a: focus {color: #000; } .main-navigation li {margin: 0 40px 0 0; поле: 0 2.857142857rem 0 0; положение: относительное; } .main-navigation li ul {margin: 0; обивка: 0; положение: абсолютное; верх: 100%; z-индекс: 1; высота: 1px; ширина: 1px; переполнение: скрытое; клип: прямоугольник (1px, 1px, 1px, 1px); } .main-navigation li ul ul {top: 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 {background: #efefef; border-bottom: 1px solid #ededed; дисплей: блок; размер шрифта: 11px; размер шрифта: 0.785714286rem; высота строки: 2.181818182; отступ: 8px 10px; обивка: 0.571428571rem 0.714285714rem; ширина: 180px; ширина: 12.85714286rem; пустое пространство: нормальное; } .main-navigation li li li: hover, .main-navigation li li li: 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 {цвет: #636363; вес шрифта: полужирный; } .menu-toggle {display: none; }}

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

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

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

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

1. UberMenu

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

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

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

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

2. LMM

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

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

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

3. Меню 8Degree Fly

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

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

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

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

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

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

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

Вывод

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

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

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

...