Как создать адаптивное меню для мобильного 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, который поможет вам понять ваше длинное описание в удобной для пользователя форме .В этом редакторе вы также можете использовать шорткоды.
Легко создайте свой интернет-магазин
Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]
скачать | Демонстрация | веб-хостинг
Другие рекомендуемые ресурсы
Мы также приглашаем вас ознакомиться с указанными ниже ресурсами, чтобы получить дополнительную информацию о вашем веб-сайте и блоге.
- Как создать всплывающее меню на WordPress
- 8 WordPress плагины для создания мегаменю в вашем блоге
- Некоторые советы по созданию современного меню для вашего блога
- 6 WordPress плагины для управления категориями и подкатегориями в вашем блоге
Заключение
Вот и все! Вот и все для этого урока, я надеюсь, что это позволит вам создать меню для мобильных пользователей. не стесняйтесь поделитесь советом с друзьями в социальных сетях.
Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.
А пока расскажите о своем Комментарии и предложения в специальном разделе.
...
Bonjour
благодарю вас за информацию
Кажется, я не могу найти «класс CSS для вашего меню». Я нашел таблицу стилей css, но не знаю, что копировать и вставлять
Заранее спасибо за вашу помощь
хорошие выходные
Мишель
Привет,
У тебя есть скриншот?