Как исправить блок навигации в WordPress (редактор сайта)?

Вопрос или проблема

Новый стиль WordPress включает в себя блок навигации. У меня есть тема, которая использует его в частях шаблона для заголовка, как и шаблоны из каталога шаблонов WordPress. В этом блоке навигации есть настройка для включения или отключения мобильного режима наложения меню. Если включено, оно становится адаптивным. Но – эффект непригоден для использования (ладно, возможно, это вопрос мнения). Оно накладывает весь контент страницы белым блоком, и вы видите только меню. Вы можете выбрать из него, и оно работает. Но для меня этот эффект абсолютно «клинический». Я просто хочу стандартную навигацию – которая является адаптивной (с небольшой кнопкой меню на мобильных устройствах), но которая при раскрытии немного сдвигает контент страницы вниз, чтобы показать меню. Так работает компонент Nav в Bootstrap.

Могу ли я изменить навигацию WordPress – или есть альтернативный блок? Как другие люди решают эту проблему? (Не могу поверить, что многие люди используют этот ужасный навигационный блок с его модальным отображением на мобильных устройствах).

Спасибо

Ответ или решение

Введение и теория:

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

Пример и анализ:

Для решения данной задачи воспользуемся следующими рекомендациями.

Кастомизация навигационного блока:
- Кастомные стили: Добавление кастомных CSS может помочь изменить визуальное восприятие элементов навигации. В частности, можно изменить поведение мобильного накладывающегося меню.
- Изменение настроек темы: Некоторые темы WordPress предоставляют дополнительные настройки для навигационных блоков, позволяющие отключить или изменить режим накладки меню.
Использование плагинов: Существует множество плагинов, предлагающих улучшенные функции навигации. Вы можете рассмотреть такие плагины, как Max Mega Menu или Responsive Menu, которые предоставляют более гибкие настройки для мобильных устройств.
Альтернативные блоки и шаблоны:
- Блоки кастомных меню: Некоторыми альтернативными блоками можно настроить поведение меню под ваши нужды. Пример — использование HTML-блоков с кастомным JavaScript или CSS.
- Шаблоны на основе Bootstrap: Если вы предпочитаете Bootstrap-стиль меню, рассмотрите возможность интеграции шаблонов, стилизованных под этот фреймворк.

Применение:

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

Редактирование с помощью CSS:
- В админ-панели WordPress перейдите к разделу "Внешний вид" > "Кастомизовать" и найдите секцию "Произвольные стили CSS".
- Используйте следующий пример кода, чтобы изменить стиль мобильного меню:
```
.wp-block-navigation.is-overlay {
position: relative;
background-color: transparent;
}

.wp-block-navigation__responsive-container {
position: static;
background-color: inherit;
}
```
  Это позволит меню "раскрываться", не закрывая весь экран белым фоном.
Установка и настройка плагинов:
- Перейдите в раздел "Плагины" > "Добавить новый" и найдите "Max Mega Menu" или "Responsive Menu".
- Установите и активируйте плагин, после чего перейдите к его настройкам. Здесь вы найдете множество параметров для изменения внешнего вида и поведения меню.

Создание нового шаблона навигации:

Если вы довольно опытный пользователь, вы можете создать собственный навигационный блок, используя HTML и CSS с интеграцией Bootstrap.

Создайте новый файл шаблона в вашей теме и вставьте код для меню с необходимым вам поведением:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
 <ul class="navbar-nav">
   <li class="nav-item active">
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
   </li>
   <li class="nav-item">
     <a class="nav-link" href="#">Features</a>
   </li>
   <li class="nav-item">
     <a class="nav-link" href="#">Pricing</a>
   </li>
 </ul>
</div>
</nav>

Данный подход требует понимания работы с шаблонами WordPress и может быть более сложным для новичков.

Заключение:

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