Как сделать в wordpress выпадающее меню: Как сделать выпадающее меню в WordPress

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

Чтобы начать, перейдите на панель инструментов WordPress и нажмите Внешний вид > Меню.

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

Если у вас еще нет меню, введите имя в поле Имя меню и нажмите кнопку Кнопка Создать Меню . Само название не имеет значения — просто запомните его:

Шаг 2: Добавьте ссылки в меню

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

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

Теперь у вас должен быть список всех пунктов меню. Чтобы создать раскрывающееся меню, вы можете использовать перетаскивание для перемещения элементов, которые вы хотите отобразить в раскрывающемся списке. В главном меню появится пункт «Родительский». И пункты меню под родительским элементом появятся в раскрывающемся списке, когда пользователь наведет указатель мыши на родительский элемент:

Если вы довольны организацией, нажмите Сохранить меню .

Как только это будет сделано, вам нужно выяснить, где вы хотите, чтобы ваше меню отображалось на вашем веб-сайте. Заголовок, как правило, лучший выбор (никто не хочет прокручивать главную страницу вниз, чтобы найти страницу «Контакты» или «О нас»!).

Вы можете выбрать место для отображения в Настройки меню области:

Здесь следует отметить две вещи:

1. Вы можете увидеть разные места отображения , потому что фактические имена различаются для каждой темы. Обычно вам нужно выбрать что-то вроде «Верхнее меню», «Основное меню», «Основное» и т. Д., Если вы хотите, чтобы ваше меню отображалось в заголовке.
2. Если вы установите флажок
   Автоматически добавлять новые страницы верхнего уровня в это меню , он добавит в меню все новые страницы, которые вы создаете. Это может быстро запутаться, и это не рекомендуется!

После сохранения изменений все готово!

Более наглядный способ управления выпадающими меню

В качестве альтернативы описанному выше методу вы также можете управлять своими меню с помощью «живого предварительного просмотра».

Нажав эту кнопку, вы перейдете к своему настройщику WordPress.

Хотя интерфейс выглядит немного по-другому, применяются все те же принципы. Вы по-прежнему сможете:

• Перетащите элементы меню для создания раскрывающихся списков
• Изменить местоположение меню
• и т. д.

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

Наверх

Если вы читаете эту часть, значит ваша тема не поддерживает выпадающие меню. Чтобы иметь возможность создавать такое меню, вам нужен сторонний плагин. Мы рекомендуем Max Mega Menu:

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

Далее мы собираемся показать вам, как бесплатно добавить раскрывающийся список в ваши меню с помощью Max Mega Menu (в три шага):

Шаг 1.

В панели инструментов WordPress перейдите к Плагины → Добавить новый . Введите «Max Mega Menu» в строке поиска и нажмите « Установить ». После установки нажмите Активировать . Теперь плагин активен и готов к использованию.

Если вы никогда раньше не устанавливали плагин WordPress, вот полное руководство о том, как это сделать за несколько простых кликов.

Шаг 2. Настройте раскрывающийся список для вашего меню

После установки плагина он появится в меню панели управления. Нажмите на его название, и вы увидите главную страницу плагина.

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

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

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

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

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

Шаг 3. Создайте раскрывающееся меню

После того, как вы установили и настроили раскрывающиеся элементы, вернитесь к Внешний вид → Меню на панели инструментов WordPress. Обязательно выберите основное меню (или меню, для которого вы включили раскрывающийся список) в «Выберите меню для редактирования».

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

Наверх

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

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

• При использовании параметра раскрывающегося меню WordPress по умолчанию вы можете указать, где размещать подменю. Например, если ваше меню называется «Еда» и вы хотите, чтобы «Завтрак» отображался перед «Ужином», просто перетащите завтрак вверх!

• При создании меню называйте их соответствующим образом! Например, если у вас есть меню под названием «О программе», вы бы не хотели, чтобы ваши «Контакты» и «Часто задаваемые вопросы» находились в раскрывающемся меню. В связи с этим мы предлагаем иметь «Контакты», «Часто задаваемые вопросы» и «О программе» в качестве отдельных пунктов меню.
• Как правило, не следует класть все яйца в одну корзину. В этом случае не создавайте одно меню и не бросайте в него все свои подменю.

Пока вы помните об этих 3 советах при создании выпадающих меню WordPress, все будет хорошо!

Наверх

Последние мысли

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

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

У вас есть другие вопросы о том, как создать выпадающее меню WordPress? Оставьте комментарий, и мы постараемся помочь!

Бесплатная направляющая

5 основных советов по ускорению

Сократите время загрузки даже на 50-80%

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

Вордпресс Основы

07 декабря 2022 г.

Джордана А.

5 минут Чтение

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

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

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

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

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

Во-первых, нам нужно создать стандартное меню. Перейдите к Appearance → Menus на панели управления WordPress. На вкладке Edit Menus вы увидите раздел Структура меню , где вы можете создать новое меню.

Имейте в виду, что внешний вид этого раздела будет зависеть от вашей активной темы WordPress.

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

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

Выбранные пункты меню появятся в разделе Структура меню . Просто перетащите элементы и подэлементы в нужном порядке.

Выпадающие меню WordPress настраиваются с помощью CSS. Сначала включите эту функцию, выбрав меню Параметры экрана в правом верхнем углу страницы Меню и установив флажок Классы CSS .

Если вы развернете пункт меню, вы увидите новое текстовое поле с надписью Классы CSS . Здесь вы добавляете классы WordPress CSS для настройки стиля выпадающего меню.

Чтобы изменить местоположение меню, вы можете выбрать одну из доступных опций в разделе Раздел «Настройки меню» или вкладка «Управление местоположениями» . Опять же, выбор будет зависеть от вашей активной темы WordPress.

В этом примере мы поместим меню вверху.

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

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

Мы собираемся показать вам, как создать выпадающее меню с помощью Max Mega Menu:

1. Установите и активируйте плагин.

2. Перейдите к Mega Menu с панели управления WordPress. В разделе Расположение меню щелкните основное меню и установите флажок, чтобы включить функцию раскрывающегося списка. В том же разделе выберите событие, которое запускает анимацию подменю и раскрывающегося меню на рабочем столе и мобильном телефоне, и выберите Сохранить изменения 9.0028 .

3. По умолчанию плагин унаследует стиль вашей темы. Откройте вкладку Темы меню , если вы хотите настроить стиль, анимацию и размер меню. Убедитесь, что параметр Выберите тему для редактирования указывает на ваше главное меню.

4. Перейдите к Внешний вид → Меню и добавьте элементы в меню по умолчанию или основное меню с включенной функцией Max Mega Menu. Нажмите Сохранить меню , как только вы закончите.

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

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

Используйте визуальные эффекты

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

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

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

Добавить пользовательский CSS

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

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

Используйте инструмент проверки элементов в браузере, чтобы найти CSS 9 вашей темы.Селектор 0027 #ID — он понадобится вам, чтобы выбрать конкретный элемент для настройки.

Вот код, который мы использовали для изменения цвета шрифта:

 #top-menu li.menu-item a {
цвет:#0051D7;
} 

Существует множество руководств по CSS и веб-дизайну, которые можно изучить в Интернете. Не стесняйтесь экспериментировать с различными стилями CSS или использовать готовый код, чтобы упростить процесс проектирования.

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

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

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

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

Существует множество плагинов WordPress, которые помогут вам создать собственное мегаменю. Мы разработали приведенный выше пример дизайна мегаменю с помощью плагина Max Mega Menu. Другие известные плагины мегаменю включают WP Mega Menu и Hero Mega Menu.

Включить просмотр в реальном времени

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

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