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

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

выпадающие меню в WordPress

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

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

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

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

выпадающее меню WordPress

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

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

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

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

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

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

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

WordPress поставляется со встроенной системой управления меню, но вывод данных меню в полном объеме зависит от темы WordPress.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Данные страницы появятся в правом столбце под новым меню.

Смотрите также:

Как создать мощное меню при помощи плагина WP Mega Menu.

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

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

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

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

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

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

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

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

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

Не забудьте нажать кнопку «Сохранить меню».

Шаг 4. Публикация выпадающего меню

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

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

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

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

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

Сейчас перейдите на сайт, и посмотрите на выпадающее меню в действии.

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

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

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

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

Пару советов о том, как сделать навигационные меню более интерактивными при помощи выпадающих меню:

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

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

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

Ваша тема автоматом отобразит их в виде подменю внутри выпадающего меню.

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

2. Пару выпадающих меню

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

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

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

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

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

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

4. Большое Мегаменю в виде выпадающего меню в WordPress

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *