Выпадающее меню позволяет упростить навигацию и сократить визуальный шум на сайте. В WordPress оно реализуется через встроенный функционал меню, доступный в разделе Внешний вид → Меню. Создание иерархии пунктов меню – ключ к активации выпадающего механизма. Для этого необходимо перетащить один элемент под другой с небольшим отступом – WordPress автоматически распознает это как вложенность.
Для корректной работы выпадающего меню требуется, чтобы активированная тема поддерживала навигационные меню и имела соответствующие стили. Большинство современных тем, включая Astra, OceanWP и GeneratePress, уже включают поддержку многоуровневых меню. Однако при использовании кастомной темы может понадобиться добавить функцию register_nav_menus() в файл functions.php, а также адаптировать CSS для отображения подменю.
При необходимости дополнительной настройки, например добавления анимации или изменения направления раскрытия, можно подключить пользовательские стили или использовать JavaScript. Плагины вроде Max Mega Menu или WP Mega Menu дают возможность управлять визуализацией без редактирования кода, но для легких решений предпочтительнее встроенные возможности WordPress.
Добавление пунктов меню в админ-панели WordPress
Для добавления пользовательских пунктов в административное меню WordPress используется хук admin_menu и функция add_menu_page() или add_submenu_page().
Пример добавления основного меню:
add_action('admin_menu', 'custom_admin_menu');
function custom_admin_menu() {
add_menu_page(
'Название страницы', // Заголовок страницы
'Название меню', // Название в меню
'manage_options', // Права доступа
'custom-slug', // Слаг
'custom_menu_callback', // Функция отображения
'dashicons-admin-generic',// Иконка
6 // Позиция в меню
);
}
function custom_menu_callback() {
echo '<h1>Контент страницы меню</h1>';
}
Для добавления вложенного пункта используйте add_submenu_page():
add_action('admin_menu', 'custom_submenu');
function custom_submenu() {
add_submenu_page(
'custom-slug', // Родительский слаг
'Подстраница', // Заголовок страницы
'Подменю', // Название в подменю
'manage_options', // Права доступа
'custom-sub-slug', // Слаг подменю
'custom_submenu_callback' // Функция отображения
);
}
function custom_submenu_callback() {
echo '<h1>Контент подменю</h1>';
}
Проверьте, чтобы у пользователя были нужные права, например manage_options – для администраторов. Меню автоматически добавляется в нужную секцию панели. Используйте уникальные слаги, чтобы избежать конфликтов с другими плагинами.
Создание вложенных элементов меню для выпадающей структуры
Чтобы добавить выпадающие пункты в меню WordPress, необходимо использовать встроенный функционал структуры меню через админ-панель.
- Перейдите в раздел Внешний вид → Меню.
- Создайте новое меню или выберите существующее.
- Добавьте нужные страницы, записи или произвольные ссылки в меню.
- Перетащите один элемент под другой с небольшим смещением вправо – это создаст вложенность. WordPress отобразит такую структуру как подменю.
Для корректной работы вложенности:
- Проверяйте, чтобы у каждого родительского пункта были дочерние – иначе структура будет некорректной.
- Не добавляйте вложенность более чем в 2–3 уровня – это ухудшает навигацию и может вызвать проблемы с адаптивностью.
- Убедитесь, что в используемой теме включена поддержка вложенных меню. В противном случае потребуется ручное редактирование шаблонов или подключение кастомного Walker-класса.
После сохранения меню откройте сайт и проверьте, отображаются ли выпадающие пункты при наведении. Если нет – проверьте CSS-тему или включение JavaScript-обработчиков, если это предусмотрено темой.
Настройка отображения выпадающего меню в теме
После создания структуры меню в админке WordPress перейдите в раздел Внешний вид → Меню и убедитесь, что выбранный пункт назначен в область отображения, например Основное меню или Header Menu, в зависимости от вашей темы.
Чтобы выпадающее меню корректно отображалось, тема должна поддерживать вложенные уровни. Откройте файл header.php или template-parts/navigation.php и найдите вызов функции wp_nav_menu(). Убедитесь, что в параметре ‘theme_location’ указано корректное местоположение, а аргумент ‘depth’ установлен как минимум в 2.
Пример:
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'nav',
'menu_class' => 'main-menu',
) );
Если меню не раскрывается при наведении, проверьте наличие классов .menu-item-has-children и .sub-menu в HTML-разметке. Они автоматически добавляются WordPress при наличии вложенных пунктов.
Добавьте в style.css вашей темы правила для отображения подменю. Пример минимального стиля:
.main-menu .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
}
.main-menu li:hover > .sub-menu {
display: block;
}
Если используется JavaScript для управления меню, убедитесь, что скрипт подключён и инициализируется после загрузки DOM. Проверьте наличие функций, отслеживающих клики или ховер на элементах с классом .menu-item-has-children.
Некоторые темы используют собственные Walker-классы для генерации меню. В этом случае настройка отображения может зависеть от кастомной логики. Откройте файл class-walker-nav-menu.php (или аналогичный) в папке inc или includes и убедитесь, что метод start_lvl() корректно формирует HTML для вложенного меню.
После внесения изменений очистите кэш, если используете плагин кэширования, и проверьте работу меню на разных устройствах, включая мобильные.
Использование пользовательских ссылок в выпадающем меню
В административной панели WordPress откройте раздел «Внешний вид» → «Меню». Если пользовательские ссылки не отображаются, нажмите «Настройки экрана» в правом верхнем углу и активируйте соответствующую опцию.
Для добавления пользовательской ссылки используйте блок «Пользовательские ссылки». Введите нужный URL, например /#контакты для якоря на странице, и задайте произвольный текст ссылки. Нажмите «Добавить в меню».
Чтобы превратить ссылку в элемент выпадающего списка, перетащите её под родительский пункт и немного сдвиньте вправо. WordPress автоматически создаст вложенность.
Пользовательские ссылки удобны для создания неактивных заголовков. Введите # в поле URL, чтобы элемент служил только триггером выпадающего меню. Для отключения перехода можно также удалить атрибут href через фильтр или JavaScript.
Избегайте пустых ссылок в главном меню на мобильных устройствах, так как пользователи могут ожидать переход. В таких случаях лучше использовать родительский пункт с подменю и дублировать его ссылку первым вложенным элементом.
После настройки нажмите «Сохранить меню» и проверьте отображение на сайте. При необходимости доработайте стили через файл темы или кастомайзер, чтобы обеспечить корректную визуализацию вложенных пунктов.
Активация выпадающего меню через внешний вид → Меню
Откройте админ-панель WordPress и перейдите в Внешний вид → Меню. Убедитесь, что у вас выбрана нужная навигационная область – она обычно называется «Главное меню» или «Primary Menu».
Если меню ещё не создано, введите его название в поле «Имя меню» и нажмите «Создать меню». Далее в левой колонке выберите страницы, записи или произвольные ссылки, которые должны быть в меню, и нажмите «Добавить в меню».
Для создания выпадающего подменю перетащите нужный пункт немного правее под основным пунктом. Он автоматически станет вложенным. Например, чтобы создать подменю под пунктом «Услуги», перетащите под него элемент «Дизайн» с небольшим отступом вправо.
Нажмите «Сохранить меню», чтобы изменения вступили в силу. Если тема поддерживает выпадающие меню, они отобразятся автоматически при наведении курсора на родительский пункт.
Если меню не отображается, проверьте, назначено ли оно в соответствующей области – активируйте опцию «Отобразить в основной навигации» или аналогичную в настройках меню под его структурой.
Проверка работы меню на разных устройствах
Для точной оценки функциональности выпадающего меню необходимо тестировать его на различных устройствах с разными размерами экранов и способами взаимодействия. На десктопах важно проверить, как меню реагирует на наведение курсора, а на мобильных – на касания и жесты.
Обязательна проверка на основных браузерах: Chrome, Firefox, Safari и Edge, так как поддержка CSS и JavaScript может отличаться. Используйте встроенные инструменты разработчика (DevTools) для эмуляции экранов с шириной от 320 до 1920 пикселей, чтобы выявить проблемы адаптивности.
Особое внимание уделяйте задержкам при открытии подменю и корректности кликабельных зон. На мобильных устройствах стоит проверить, не перекрывает ли меню другие элементы страницы и удобно ли оно для навигации пальцем.
Рекомендуется протестировать меню на реальных устройствах с разными операционными системами (iOS, Android, Windows). Для упрощения проверки используйте сервисы BrowserStack или Sauce Labs, которые предоставляют доступ к множеству устройств и браузеров онлайн.
Для анализа производительности меню применяйте инструменты Lighthouse или WebPageTest. Они покажут, насколько быстро загружается и реагирует меню, что особенно важно для мобильных пользователей с медленным интернетом.
Добавление анимации и стилей через CSS
Для улучшения визуального восприятия выпадающего меню необходимо использовать CSS-анимации и стили, которые плавно раскрывают подменю и выделяют активные элементы.
Плавное раскрытие подменю достигается с помощью свойства transition для параметров max-height, opacity и visibility. Например:
.submenu {
max-height: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
}
.menu-item:hover .submenu {
max-height: 500px; /* достаточно для содержимого */
opacity: 1;
visibility: visible;
}
Использование max-height вместо display позволяет анимировать высоту плавно без резких изменений.
Стилизация элементов меню должна учитывать удобство навигации и читаемость. Рекомендуется применять background-color с плавным изменением при наведении, используя transition:
.menu-item {
background-color: #fff;
transition: background-color 0.25s ease;
}
.menu-item:hover {
background-color: #f0f0f0;
}
Активные элементы выделяют цветом текста и добавляют визуальные индикаторы, например, стрелки, которые можно поворачивать при раскрытии:
.menu-item > a::after {
content: '▼';
display: inline-block;
margin-left: 5px;
transition: transform 0.3s ease;
}
.menu-item:hover > a::after {
transform: rotate(180deg);
}
Для обеспечения кроссбраузерной совместимости используйте вендорные префиксы там, где это необходимо, и избегайте использования устаревших свойств.
В итоге комбинация прозрачных переходов и аккуратной цветовой схемы создаст интуитивно понятное и приятное для пользователя меню.
Вопрос-ответ:
Как добавить выпадающее меню в WordPress без плагинов?
В WordPress можно создать выпадающее меню через стандартный функционал темы. Для этого нужно перейти в раздел «Внешний вид» → «Меню», создать главное меню и добавить в него пункты. Чтобы сделать выпадающий элемент, достаточно вложить подменю внутрь родительского пункта, просто перетащив их немного вправо в структуре меню. После сохранения изменений в теме автоматически появится выпадающий список.
Можно ли управлять стилями выпадающего меню через настройки темы?
Да, большинство современных тем предлагают возможность настроить внешний вид меню, включая цвета, шрифты и анимацию раскрытия. Обычно это находится в разделе «Внешний вид» → «Настроить» → «Меню» или «Цвета и шрифты». Если нужных параметров нет, можно добавить свои стили через файл style.css дочерней темы или через встроенный редактор CSS.
Что делать, если выпадающее меню не отображается на мобильных устройствах?
Часто причины связаны с тем, что тема использует отдельный вид меню для мобильных экранов, например, «гамбургер». Нужно проверить, активировано ли мобильное меню в настройках темы. Если проблема остаётся, стоит проверить, не конфликтуют ли сторонние скрипты или стили. Иногда помогает обновление темы или временное отключение плагинов для поиска причины. В некоторых случаях понадобится добавить кастомный код, чтобы меню корректно работало на всех устройствах.
Как создать многоуровневое выпадающее меню в WordPress?
Для многоуровневого меню в админке WordPress нужно создавать несколько уровней вложенности пунктов меню. Это делается путём перетаскивания нужных пунктов под родительский элемент и смещения вправо. Максимальное количество уровней зависит от темы и настроек, обычно 2–3 уровня работают без проблем. При большем количестве могут возникнуть проблемы с отображением, поэтому стоит проверить поддержку в используемой теме.
Можно ли сделать так, чтобы выпадающее меню открывалось по клику, а не по наведению мыши?
Да, такая настройка возможна, но обычно требует небольшого вмешательства в код темы или добавления кастомного скрипта. По умолчанию многие темы открывают подменю при наведении. Чтобы переключить поведение на клик, можно добавить JavaScript, который будет реагировать на нажатие на пункт меню и раскрывать подменю. В некоторых темах такая опция есть в настройках, стоит проверить документацию темы или обратиться к разработчику.
Загрузка...
