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

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

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

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

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

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

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

Выбор темы оформления с поддержкой выпадающего меню

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

  • Astra.
  • Темы StudioPress.
  • OceanWP.
  • Ultra.
  • Divi.

Создание выпадающего меню в WordPress 

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

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

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

Далее введите название меню навигации.

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

Затем нажмите кнопку «Создать меню». После этого WordPress создаст новое пустое меню.

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

После этого выбранные вами ссылки появляются в правом столбце и созданном меню.

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

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

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

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

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

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

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

Темы оформления WordPress могут отображать меню в разных местах. Каждая тема оформления поддерживает определенные области для размещения меню. Они перечислены в разделе «Настройки меню». Выберите вариант рядом с параметром «Область отображения» и нажмите кнопку «Сохранить меню».

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

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

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

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

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

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

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

Используйте многоуровневые выпадающие меню

Используемая тема оформления автоматически отобразит подпункты в виде подменю внутри выпадающего меню.

Используйте многоуровневые выпадающие меню - 2

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

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

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

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

Если меню становится слишком сложным, можно переключиться на визуальный предварительный просмотр. Для этого перейдите в меню «Внешний вид» – «Настроить».

Затем перейдите на вкладку «Меню» и выберите необходимое меню навигации. После этого вы увидите визуальный редактор с областью предварительного просмотра сайта.

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

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

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

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

Мы надеемся, что эта статья помогла вам понять, как создать выпадающее меню в WordPress.

Пожалуйста, оставьте свои отзывы по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, дизлайки, подписки, лайки, отклики!

Вадим Дворниковавтор-переводчик статьи «How to Create a Dropdown Menu in WordPress (Beginners Guide)»