Хотите сделать выпадающее меню и добавить его на свой сайт WordPress??
Выпадающее меню показывает список ссылок, когда вы наводите курсор мыши на элемент меню.
Мы используем выпадающее меню на WPBeginner, пройдите вперед и наведите курсор мыши на навигационное меню сверху.
В этом руководстве для начинающих мы покажем вам, как легко создать выпадающее меню в WordPress с помощью пошаговых инструкций.
Зачем использовать выпадающие меню в WordPress?
WordPress поставляется со встроенной системой управления меню, которая позволяет легко добавлять навигационные меню на ваш сайт WordPress.
Навигационное меню — это ссылки на основные страницы вашего сайта, которые обычно отображаются сверху в виде горизонтального ряда рядом с логотипом сайта.
Если вы начинаете блог или создаете сайт, состоящий всего из нескольких страниц, то вы можете добавить их в одну строку.
Однако если у вас интернет-магазин или крупный сайт, то вы можете захотеть добавить больше ссылок в навигационное меню.
Выпадающие меню помогают решить проблему ограниченного пространства, показывая ссылки меню только тогда, когда пользователи наводят курсор мыши на родительский пункт. Они также позволяют организовать структуру меню по темам или иерархии.
Наконец, они тоже выглядят довольно красиво.
Учитывая это, теперь давайте рассмотрим, как вы можете легко создать выпадающие меню WordPress и добавить их на свой сайт.
Если вам не понравилось видео или нужны дополнительные инструкции, то продолжайте читать дальше.
Шаг 1. Выбор темы с поддержкой выпадающих меню
WordPress поставляется со встроенной системой управления меню, но отображение этих меню полностью зависит от вашей темы WordPress.
Почти все темы WordPress поддерживают выпадающие меню по умолчанию. Однако некоторые темы могут не иметь должной поддержки меню.
Вам необходимо убедиться, что вы используете тему WordPress, которая поддерживает выпадающие меню.
Как узнать, поддерживает ли используемая вами тема выпадающее меню?
Вы можете просто посетить сайт темы, где вы найдете ссылку на демо-версию темы. Оттуда вы можете увидеть, отображается ли в демо-версии выпадающее меню в навигационном меню.
Если это не так, то вам нужно найти тему WordPress, которая это делает.
Смотрите наше руководство о том, как выбрать идеальную тему WordPress для вашего сайта.
Вот несколько отличных тем, которые поддерживают выпадающее меню по умолчанию.
- Astra — Это многоцелевая тема WordPress, которая поставляется с несколькими стартовыми сайтами и множеством функций.
- Темы StudioPress — Созданные на основе фреймворка Genesis, эти профессиональные темы высоко оптимизированы для производительности.
- OceanWP — популярная тема WordPress, которая подходит для всех видов сайтов.
- Ultra — Работает на конструкторе Themify, эта тема WordPress с перетаскиванием меню поставляется с красивыми шаблонами и гибкими опциями темы.
- Divi — популярная тема от Elegant Themes, которая использует конструктор страниц Divi и поставляется с множеством функций перетаскивания, включая выпадающие меню.
Итак, давайте рассмотрим, как создать выпадающее меню WordPress.
Шаг 1. Создание навигационного меню в WordPress
Если вы уже настроили навигационное меню на своем сайте, то можете перейти к следующему шагу.
Давайте сначала создадим простое меню.
Перейти к Внешний вид » Меню и нажмите на ссылку «Создать новое меню» в верхней части страницы.
Затем вам нужно указать имя для навигационного меню. Это имя не будет публично отображаться на вашем сайте. Цель названия меню — помочь вам идентифицировать меню в области администратора WordPress.
Введите имя для вашего меню и нажмите на кнопку «Создать меню».
Теперь WordPress создаст для вас новое пустое меню.
Давайте добавим верхние ссылки в навигационное меню. Эти пункты появятся в верхней строке вашего меню.
Просто выберите страницы, которые вы хотите добавить, из левой колонки и нажмите на кнопку «Добавить в меню». Вы также можете выбрать записи блога, категории или добавить пользовательские ссылки.
Теперь вы увидите, как эти страницы появляются в правой колонке под вашим новым меню.
Шаг 2. Добавление подпунктов в меню
Подпункты — это пункты, которые будут появляться внутри выпадающего меню. В зависимости от того, как вы хотите организовать свои меню, вы можете добавить их под любым из существующих пунктов.
В рамках данного руководства мы добавим категории под ссылкой на блог.
Просто выберите элементы, которые вы хотите добавить, из левой колонки и нажмите на кнопку «Добавить в меню». Теперь ваши элементы появятся в правой колонке.
Однако эти ссылки будут отображаться как обычные пункты. Нужно сделать их подпунктом родительского меню.
Вы можете просто перетащить элемент меню и поместить его под родительским элементом. Переместите его немного вправо, и он станет подпунктом.
Повторите этот процесс для всех ссылок, которые вы хотите отобразить в выпадающем меню.
Как только вы закончите, не забудьте нажать на кнопку «Сохранить меню», чтобы сохранить изменения.
Шаг 3. Публикация выпадающего меню
Если вы редактируете меню, которое уже есть на вашем сайте, то оно сразу же начнет отображаться на вашем сайте.
Однако если это новый пункт меню, то теперь вам нужно выбрать место в теме для его отображения.
Темы WordPress могут отображать меню в разных местах. Каждая тема определяет свои собственные места расположения меню, и вы можете выбрать, какое меню вы хотите отображать в ней.
Вы найдете эту опцию в правой колонке в разделе «Настройки меню». Выберите опцию рядом с параметром ‘Display location’ и нажмите на кнопку ‘Save menu’.
Вы можете зайти на свой сайт, чтобы увидеть выпадающее меню в действии.
Советы по созданию интерактивных выпадающих меню
Навигационные меню очень важны, потому что это первое место, куда будут смотреть ваши пользователи, если захотят увидеть конкретную информацию.
Правильное их использование поможет вашим пользователям сориентироваться на вашем сайте. Это также поможет вам получить больше просмотров страниц, конверсий и продаж на вашем сайте.
Вот несколько советов о том, как сделать навигационные меню более интерактивными с помощью выпадающих меню.
1. Вы можете создавать многоуровневые выпадающие меню
Если сделать ссылку подпунктом другой ссылки, она появится в выпадающем меню. Вы также можете добавить подпункт под другим подпунктом для создания многоуровневых выпадающих меню.
Ваша тема автоматически покажет их в виде подменю внутри выпадающего меню.
2. Вы также можете создать несколько выпадающих меню
Вы можете создать выпадающее меню под любой верхней ссылкой в вашем меню. Вы даже можете добавить несколько выпадающих меню в главное навигационное меню.
3. Создание меню с предварительным просмотром в реальном времени
Если ваше меню становится слишком сложным, то вы можете переключиться на визуальный предварительный просмотр. Перейти к Внешний вид » Настроить запуск живого настройщика темы.
Отсюда перейдите на вкладку «Меню», а затем выберите ваше навигационное меню. Теперь вы увидите редактор меню в левой колонке и живой предварительный просмотр вашего сайта в правой панели.
4. Создание большого мегаменю в виде выпадающего меню в WordPress
В выпадающих меню одновременно отображается только один выпадающий элемент. Что если вы хотите показать полную структуру вашего сайта в виде мега-меню, которое появляется только при наведении курсора на главное меню??
Мега-меню выглядит как выпадающее меню, но оно может отображать гораздо больше ссылок, подменю и многое другое. Подробные инструкции смотрите в нашем пошаговом руководстве о том, как создать мега-меню в WordPress.
Надеемся, что эта статья помогла вам узнать, как легко создать выпадающее меню в WordPress. Вы также можете ознакомиться с нашими руководствами о том, как создать липкое плавающее навигационное меню в WordPress и как добавить значки изображений в навигационные меню в WordPress.
Источник: www.wpbeginner.com