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

/

Вы хотите создать раскрывающееся меню и добавить его на свой сайт WordPress?

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

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

Создание выпадающего меню в 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 могут отображать меню в разных местах. Каждая тема определяет свое собственное расположение меню, и вы можете выбрать, какое меню вы хотите в нем отображать.

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

Выберите расположение темы

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

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

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

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

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

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

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

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

Многоуровневое меню

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

Многоуровневое выпадающее меню

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

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

Несколько раскрывающихся меню в главном меню

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

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

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

Настройте меню WordPress с предварительным просмотром в реальном времени

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

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

Пример мегаменю

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

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

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как сделать ссылку на внешние ссылки из заголовка сообщения в WordPress

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

Как избавиться от / wordpress / с URL вашего сайта WordPress

Вы пытаетесь удалить / wordpress / из URL-адреса вашего веб-сайта? Иногда новички устанавливают WordPress в подкаталог, что приводит к появлению / wordpress / в URL

Как отобразить дату последнего обновления ваших сообщений в WordPress

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

13 способов восстановить продажи брошенных тележек WooCommerce

Вы ищете способы восстановить продажи брошенных тележек WooCommerce? В среднем от 60 до 80% людей, которые «добавляют в корзину», не покупают. Это означает,