Как создать выпадающее меню в WordPress (Руководство для начинающих)

Хотите сделать выпадающее меню и добавить его на свой сайт WordPress?

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

Мы используем выпадающее меню на WPTec, продолжаем и наводим указатель мыши на меню навигации вверху.

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

Зачем использовать выпадающие меню в WordPress?

WordPress поставляется со встроенной системой управления меню, которая позволяет легко добавлять навигационные меню на ваш сайт WordPress.

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

Если вы начинаете блог или создаете веб-сайт с несколькими страницами, вы можете добавить их в один ряд.

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

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

Наконец, они тоже выглядят довольно мило.

При этом давайте теперь посмотрим, как вы можете легко создавать выпадающие меню WordPress и добавлять их на свой веб-сайт.

Шаг 1. Выбор темы с поддержкой выпадающего меню

WordPress поставляется со встроенной системой управления меню, но отображение этих меню полностью зависит от вашей темы WordPress.

Почти все темы WordPress по умолчанию поддерживают выпадающие меню. Однако некоторые темы могут не иметь надлежащей поддержки меню.

Вы должны убедиться, что вы используете тему WordPress, которая поддерживает выпадающие меню.

Как узнать, поддерживает ли используемая вами тема выпадающее меню?

Вы можете просто посетить веб-сайт темы, где вы найдете ссылку на демонстрационную версию темы. Оттуда вы можете увидеть, показывает ли демо выпадающее меню в меню навигации.

Если это не так, то вам нужно найти тему WordPress, которая подходит.

Смотрите наше руководство о том, как выбрать идеальную тему WordPress для вашего сайта.

Вот несколько отличных тем, которые поддерживают выпадающее меню из коробки.

Astra – это многоцелевая тема WordPress, которая поставляется с несколькими начальными сайтами и множеством функций.
Темы StudioPress – эти профессиональные темы, созданные на основе фреймворка Genesis, высоко оптимизированы для повышения производительности.
OceanWP – популярная тема WordPress, которая подходит для любых веб-сайтов.
Ультра-разработанная Themify Builder эта тема WordPress для перетаскивания включает в себя красивые шаблоны и гибкие параметры темы.
Divi – популярная тема от Elegant Themes, которая использует конструктор страниц Divi и поставляется с множеством функций перетаскивания, включая выпадающие меню.
При этом теперь давайте посмотрим, как создать выпадающее меню WordPress.

Шаг 1. Создание меню навигации в WordPress

Если вы уже настроили навигационное меню на своем веб-сайте, вы можете перейти к следующему шагу.

Давайте сначала создадим простое меню.

Перейдите на страницу «Внешний вид» и нажмите кнопку «Создать новое меню» вверху.

Далее вам нужно указать имя для вашего меню навигации. Это имя не будет публично видно на вашем сайте. Назначение названия меню – помочь вам определить меню внутри области администрирования WordPress.

Введите имя для своего меню, а затем нажмите кнопку «Создать меню».

WordPress теперь создаст для вас новое пустое меню.

Давайте добавим верхние ссылки в меню навигации. Эти пункты появятся в верхнем ряду вашего меню.

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

Теперь вы увидите, что эти страницы появляются в правом столбце под вашим новым меню.

Шаг 2. Добавление подпунктов в меню

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

Для этого урока мы будем добавлять категории по ссылке в блоге.

Просто выберите элементы, которые вы хотите добавить, в левом столбце, а затем нажмите кнопку «Добавить в меню». Ваши предметы теперь появятся в правом столбце.

Однако эти ссылки будут отображаться как обычные элементы. Нам нужно сделать их подпунктом родительского меню.

Вы можете просто перетащить элемент меню и поместить его под родительский элемент. Переместите его немного вправо, и он станет подпунктом.

Повторите процесс для всех ссылок, которые вы хотите показать в раскрывающемся меню.

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

Шаг 3. Опубликовать выпадающее меню

Если вы редактируете меню, которое уже есть на вашем сайте, оно сразу же появится на вашем сайте.

Однако, если это новый пункт меню, вам нужно выбрать местоположение темы для отображения этого меню.

Темы WordPress могут отображать меню в разных местах. Каждая тема определяет свои собственные позиции меню, и вы можете выбрать, какое меню вы хотите отобразить там.

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

Теперь вы можете посетить свой веб-сайт, чтобы увидеть выпадающее меню в действии.

Советы по созданию интерактивных выпадающих меню

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

Правильное их использование поможет вашим пользователям обойти ваш сайт. Это также поможет вам получить больше просмотров страниц, конверсий и продаж на вашем сайте.

Вот несколько советов о том, как сделать ваши навигационные меню более интерактивными с помощью выпадающих меню.

1. Вы можете создавать многоуровневые выпадающие меню

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

Ваша тема будет автоматически отображать их в виде подменю внутри выпадающего меню.

2. Вы также можете создать несколько выпадающих меню

Вы можете создать раскрывающийся список под любой верхней ссылкой в ​​вашем меню. Вы даже можете добавить несколько выпадающих меню в главном меню навигации.

3. Создайте меню с живым предварительным просмотром

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

Оттуда, нажмите на вкладку «Меню» и выберите свое меню навигации. Теперь вы увидите редактор перетаскивания в левом столбце с предварительным просмотром вашего сайта в правой панели.

4. Создание большого мегаменю в виде выпадающего меню в WordPress

В раскрывающихся меню отображается только один раскрывающийся список. Что, если вы хотите показать полную структуру вашего сайта в виде мегаменю, которое появляется только тогда, когда пользователи наводят курсор на главное меню?

Мега-меню отображаются в виде выпадающего меню, но они могут отображать гораздо больше ссылок, подменю и многое другое. Подробные инструкции см. В нашем пошаговом руководстве по созданию мегаменю в WordPress.

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