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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. Создание огромного мегаменю в виде выпадающего перечня в WordPress.

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

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

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

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


Поделись с друзьями:

Оставьте комментарий