Как создать выпадающее меню в 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: руководство для начинающих

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. Несколько выпадающих меню

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

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

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

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

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

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

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

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

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

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

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

Источник: hostenko.com/wpcafe

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

%d такие блоггеры, как: