Хотите создать отзывчивое меню WordPress для мобильных устройств? Мобильные пользователи превзошли пользователей настольных компьютеров на многих сайтах. Добавление настраиваемого мобильного меню позволяет пользователям легко перемещаться по сайту. В этой статье мы покажем вам, как легко создать адаптивное меню WordPress для мобильных устройств.
Это подробный урок. Мы покажем вам метод добавления для начинающих (без кодирования) и метод кодирования для более продвинутых пользователей.
В конце этого урока вы узнаете, как создать скользящее всплывающее меню, выпадающее меню и альтернативное всплывающее меню.
Готов? Начнем.
Видеоурок
Зарегистрируйтесь в WPBeginner
Если вам не нравится видео или вам нужны дополнительные инструкции, читайте дальше.
Способ 1: добавить адаптивное меню в WordPress с помощью плагина
Этот метод проще и рекомендуется для начинающих, так как не требует пользовательского кодирования.
В этом методе мы создадим меню гамбургера, которое скользит на экране мобильного телефона.
Первое, что нужно сделать, это установить и активировать плагин адаптивного меню. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress.
После активации плагин добавит новый пункт меню под названием «Отзывчивое меню» в админ-панель WordPress. Нажав на нее, вы попадете на страницу конфигурации плагина.
Сначала необходимо ввести ширину экрана, когда плагин начнет отображать отзывчивое меню. По умолчанию 800 пикселей, что должно работать для большинства сайтов.
После этого вам нужно выбрать меню, которое вы хотите использовать для адаптивного меню. Если вы еще не создали меню, вы можете создать его, посетив Внешний вид »Меню, Смотрите наше руководство о том, как добавить меню навигации в WordPress для получения подробных инструкций.
Последний вариант на экране – предоставить класс CSS для вашего меню без текущего ответа. Это позволит плагину скрывать свое неотвечающее меню на маленьких экранах.
Не забудьте нажать «Обновить параметры», чтобы сохранить настройки.
Теперь вы можете посетить веб-сайт и изменить размер экрана браузера, чтобы увидеть адаптивное меню в действии.
Плагин адаптивного меню поставляется с множеством других опций, которые позволяют вам изменить поведение и внешний вид вашего адаптивного меню. Вы можете изучить эти параметры на странице конфигурации плагина и настроить их по мере необходимости.
Способ 2: добавить выпадающее меню выбора с помощью плагина
Еще один способ добавить адаптивное меню – добавить выпадающее меню. Этот метод не требует навыков программирования, поэтому рекомендуется для начинающих.
Первое, что вы должны сделать, это установить и активировать плагин разумного выбора меню. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress.
После активации необходимо посетить Внешний вид »Отзывчивый отбор настроить параметры плагина.
Вам нужно прокрутить вниз до раздела «Включить расположение темы». По умолчанию плагин включен во всех местах темы. Вы можете изменить это, выборочно активируя это для определенных тематических местоположений.
Не забудьте нажать кнопку «Сохранить все настройки», чтобы сохранить изменения.
Теперь вы можете посетить веб-сайт и изменить размер экрана браузера, чтобы увидеть адаптивное меню выбора в действии.
Способ 3. Создание адаптивного меню для мобильных устройств с эффектом переключения
Одним из наиболее часто используемых способов отображения меню на экранах мобильных устройств является использование эффекта переключения.
Этот метод требует, чтобы вы добавили пользовательский код в ваши файлы WordPress. Если вы этого еще не сделали, ознакомьтесь с нашим руководством по вставке фрагментов веб-страниц в WordPress.
Сначала вы должны открыть текстовый редактор, например блокнот, и вставить этот код.
(function () {
var nav = document.getElementById (‘навигация по сайту’), кнопка, меню;
if (! nav) {
Возвращает;
}
button = nav.getElementsByTagName (‘button’) (0);
menu = nav.getElementsByTagName (‘ul’) (0);
если (кнопка!) {
Возвращает;
}
// Скрыть кнопку, если меню отсутствует или пусто.
if (! menu ||! menu.childNodes.length) {
button.style.display = ‘нет’;
Возвращает;
}
button.onclick = function () {
Что если (-1 === menu.className.indexOf (‘меню навигации’)) {
menu.className = ‘меню навигации’;
}
Что если (-1! == button.className.indexOf (‘alternate’)) {
button.className = button.className.replace (‘alternated’, ”);
menu.className = menu.className.replace (‘alternated’, ”);
} Другой {
button.className + = ‘alternative’;
menu.className + = ‘альтернатива’;
}
};
}) (jQuery);
Теперь вам нужно сохранить этот файл как navigation.js на рабочем столе.
Затем вам нужно открыть FTP-клиент для загрузки этого файла в папку / wp-content / themes / your-theme-dir / js / на вашем сайте WordPress.
Замените каталог темы на текущий каталог темы. Если в папке темы нет папки js, вам нужно ее создать.
После загрузки файла JavaScript следующий шаг – убедиться, что ваш сайт WordPress загружает этот JavaScript. Вам нужно будет добавить следующий код в файл functions.php вашей темы.
wp_enqueue_script (‘wpb_togglemenu’, get_template_directory_uri (). ‘/js/navigation.js’, array (‘jquery’), ‘20160909’, true);
Теперь нам нужно добавить меню навигации в нашу тему WordPress. Обычно меню навигации добавляется в файл header.php темы.
