Как создать выпадающее меню в WordPress

 
 

Вы хотите сделать выпадающее меню и добавить его на свой сайт WordPress?

Раскрывающееся меню отображает список ссылок при наведении курсора мыши на элемент меню.

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

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

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

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

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

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

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

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

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

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

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

WordPress поставляется со встроенной системой управления меню, но отображение этих меню полностью зависит от вашей темы WordPress.

Почти все темы WordPress по умолчанию поддерживают выпадающие меню. Однако некоторые темы могут не иметь надлежащей поддержки меню.

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

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

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

Если это не так, то вам нужно будет найти тему WordPress, которая это делает.

Смотрите наше руководство о том, как выбрать идеальную тему WordPress для вашего сайта.

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

  • Астра– Это универсальная тема WordPress, которая поставляется с несколькими стартовыми сайтами и множеством функций.
  • Темы StudioPress – Эти профессиональные темы, созданные поверх структуры тем genesis, высоко оптимизированы для производительности.
  • OceanWP – Популярная тема WordPress, которая подходит для всех видов веб-сайтов.
  • Ультра – мощный конструктор Themify эта тема WordPress для перетаскивания поставляется с красивыми шаблонами и гибкими вариантами тем.
  • Divi – популярная тема от элегантных тем, которая использует конструктор страниц Divi и поставляется с множеством функций перетаскивания, включая выпадающие меню.

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

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

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

Давайте сначала создадим простое меню.

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

Затем вам нужно указать имя для вашего навигационного меню. Это имя не будет публично отображаться на вашем веб-сайте. Цель названия меню-помочь вам идентифицировать меню в административной области WordPress.

Введите название вашего меню, а затем нажмите на кнопку "Создать меню".

WordPress теперь создаст для вас новое пустое меню.

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

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

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

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

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

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

Просто выберите элементы, которые вы хотите добавить, в левой колонке, а затем нажмите кнопку "Добавить в меню". Теперь ваши товары будут отображаться в правой колонке.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Все новости


Создание сайта-визитки

Создание корпоративного сайта

Создание интернет-магазина

Создание Landing page

Изготовление сайтов в Москве

Изготовление сайтов в Краснодаре

Разработка сайтов в Санкт-Петербурге

Разработка сайтов в Ростове-на-Дону

IT-компания DonbassWeb предлагает свои услуги не только для Донецка (ДНР) и Луганска (ЛНР), но и для многих городов России: в Москве, Санкт-Петербурге, Новосибирске, Екатеринбурге, Нижнем Новгороде, Казани, Самаре, Челябинске, Омске, Ростове, Уфе, Красноярске, Перми, Волгограде, Воронеже, Саратове, Краснодаре, Тольятти, Тюмени, Ижевске, Барнауле, Ульяновске, Иркутске, Владивостоке, Ярославле, Хабаровске, Махачкале, Оренбурге, Томске, Новокузнецке, Кемерово, Астрахани, Рязани, Набережных Челнах, Пензе, Липецке, Туле, Кирове, Чебоксарах, Калининграде, Брянске, Иваново, Магнитогорске, Твери, Курске, Нижнем Тагиле, Ставрополе, Архангельске, Улан-Удэ, Белгороде, Владимире, Кургане, Сочи, Калуге, Орле, Мурманске, Смоленске, Владикавказе, Волжском, Череповце, Чите, Саранске, Сургуте, Вологде, Тамбове, Костроме, Комсомольске-на-Амуре, Нальчике, Таганроге, Стерлитамаке, Петрозаводске, Братске, Дзержинске, Йошкар-Оле, Шахтах, Орске, Ангарске, Нижневартовске, Якутске, Новороссийске. Кроме того, мы работаем не только в Украине, России, Белоруссии, Казахстане, Болгарии, Румынии, Сербии, Польше, Германии, Италии, Франции, Испании, Португалии, Англии, Шотландии, Уэльсе, Ирландии, США, Австралии, но и по всему миру!

Донецк, ДНР, Луганск, ЛНР

ABC-анализAppStoreCall-центрExperience marketingFMCGGoogleInside salesOpenCartPOS материалPPC-специалистSales promotionSEO-услугиSMMUp-saleWordPressАктивные продажиАкцияАнализ клиентовАнализ конкурентовАнализ продажАнтимерчандайзингАссортиментная политикаБелгородБизнес идеи (стартапы)БрендБукингВендорВирусная рекламаВирусный маркетингВладивостокВнутренние продажиВнутренний маркетингВолгоградВоронежДебиторкаДебиторская задолженностьДезинтермедитацияДивизионная система управленияДизайнДирект-маркетингДисконтДистрибьюторДистрибьюцияЕкатеринбургИжевскКазаньКалининградКопирайтингКраснодарМаркетингМаркетинговая информацияМаркетинговые исследованияМаркетинговый каналМаркетинг услугМаркетологМедиаМенеджментМерчандайзерМерчандайзингМоскваНижний НовгородНишевой маркетингНовосибирскНумерическая дистрибьюцияОмскОтдел маркетингаПартизанский маркетингПравило ПаретоПрогнозирование продажПродвижение сайтов в ДонецкеПромоПромоушнПрямой маркетингРабота для маркетологаРабота для студентаРаспродажаРегиональные продажиРекламаРеклама на асфальтеРемаркетингРетро-бонусРибейтРитейлРостов-на-ДонуСамараСанкт-ПетербургСаратовСейлз промоушнСинергияСколковоСоздание сайтов в ДонецкеСоциальные сетиСочиСтимулирование сбытаТелемаркетингТорговый представительТрейд маркетингТрейд промоушнТюменьХабаровскЦелевая аудиторияЧелябинскЮжно-СахалинскЯндекс