Советы, как скрыть мобильное меню в WordPress

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

Как скрыть мобильное меню в WordPress

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

Чтобы помочь вам изменить способ отображения мобильного меню на вашем веб-сайте, вот два наиболее распространенных способа его заполнения:

• Скрыть мобильное меню в WordPress с помощью плагина
• Скрыть мобильное меню с помощью кода CSS

Как скрыть мобильное меню в WordPress с помощью плагина

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

Создание нового мобильного меню

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

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

Найдите и установите плагин

Следующим шагом будет поиск и установка плагина. Существует множество плагинов, которые могут помочь вам манипулировать и настраивать меню . Одними из самых популярных являются WP Mobile Menu, Max Mega Menu, адаптивное меню и так далее. Для пояснения давайте установим и активируем WP Mobile Menu.

Когда вы закончите, перейдите в «Параметры мобильного меню» на левой боковой панели WordPress. В настройках плагина теперь вы можете выбрать, хотите ли вы отображать новое мобильное меню слева или справа. Выберите ранее созданное меню, а затем прокрутите вниз до «Скрыть оригинальное меню темы» . Там вы можете удалить определенные элементы из исходного меню. Если вы нажмете на поле «Найти элемент», вы получите предварительный просмотр вариантов для выбора. После завершения процесса выбора просто сохраните изменения.

Заменить или скрыть меню

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

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

Как скрыть меню с помощью кода CSS

Другой способ скрыть мобильное меню требует определенного знания кода CSS и практики . Люди, которые часто создают собственные темы WordPress, уже знают, насколько сложной может быть некоторая настройка. И, учитывая эти моменты, это не совсем рекомендуемый метод для начинающих. Тем не менее…

Найдите название своего меню

Первый шаг — найти меню, которое вы хотите отредактировать. Вероятно, самый простой способ — использовать встроенные инструменты разработчика браузера . Перейдите на свой веб-сайт, где вы хотите внести изменения, и откройте инструменты разработчика. Если вы используете Google Chrome, вы можете сделать это с помощью сочетания клавиш Ctrl+Shift+I . В верхней части экрана вы найдете параметр «Переключить панель инструментов устройства», который покажет вам, как ваш сайт выглядит на мобильных устройствах. Вы даже можете изменить различные типы и разрешения.

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

Скройте свое меню с помощью новой строки кода

После того, как вы получили правильное имя, просто перейдите в « Внешний вид»> «Настроить » и выберите «Дополнительный CSS» . Как правило, это обычно внизу левой боковой панели. Нажмите на нее, и вам будет предоставлен следующий экран. Там вы можете щелкнуть в нижней части экрана, чтобы выбрать мобильное представление, а над ним вы введете код, чтобы скрыть меню:

Код: .menu-name {display: none;}

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

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