Как создать многоуровневое/иерархическое меню в WordPress
В WordPress вы можете создать многоуровневое / иерархическое меню с помощью Система меню WordPress (администратор WordPress -> Внешний вид -> Меню), а также с помощью Theme Customizer (администратор WordPress -> Внешний вид -> Настроить).
В этой документации мы рассмотрим шаги по созданию многоуровневого/иерархического меню.
Мы начнем с просмотра Система меню WordPress .
Система меню WordPress
Вы можете получить доступ к системе меню WordPress, войдя в свою панель управления WordPress и перейдя к Внешний вид -> Меню .
Установить параметры экрана
В правом верхнем углу экрана находится вкладка параметров экрана.
- Нажмите на него, чтобы открыть раскрывающийся список и показать все доступные типы и свойства.
- Установите все доступные флажки, кроме флажка Описание.
- Тема Customizr и Customizr Pro, не поддерживает описание меню. Поэтому вы должны оставить флажок «Описание» не отмеченным.
Создать меню
- Нажмите на ссылку , чтобы создать новое меню .
- Введите новое имя меню. В этой документации мы назовем его Sample Menu .
- Нажмите кнопку Создать меню .
Назначить расположение меню
Далее нам нужно привязать меню к его местоположению.
- Назначьте Образец меню в Главное меню (Тематические локации), установив флажок.
- Нажмите кнопку Меню сохранения .
Доступные типы пунктов меню
В Customizr и Customizr Pro Theme доступно 6 типов пунктов меню.
- Страницы — Это страницы, которые вы создали.
- Сообщений — это записи в блоге, которые вы создали.
- Пользовательские ссылки . Вы можете использовать это для создания пункта меню, который ссылается на любой URL-адрес.
- Категории — Доступные категории.
- Теги — Это ваши доступные теги.
- Формат — это ваши доступные форматы сообщений.
Создание пункта меню (элемент родительского меню)
- В этом примере мы назначим страницу с именем Образец страницы в меню в качестве элемента родительского меню.
- Установите флажок Sample Page и нажмите кнопку Add to Menu .
- Вы увидите, что он автоматически добавляется на правую панель как пункт меню.
- Примечание: Это не обязательно. Обычно вам не нужно использовать эти шаги.
- Вы можете изменить свойства пункта меню Sample Page , щелкнув крошечную стрелку справа.
- Он расширится и покажет вам несколько текстовых вводов.
- Вы можете ввести атрибут заголовка, он будет виден только в интерфейсе, когда вы наведете указатель мыши на пункт меню и останетесь там.
- Флажок Открыть ссылку в новом окне/вкладке. Вы можете установить этот флажок, если хотите, чтобы страница открывалась в новой вкладке или окне.
- Вы можете ввести классы CSS, чтобы включить особый стиль этого пункта меню с помощью пользовательского CSS.
- Отношение ссылки ( XFN ) предназначено для добавления атрибута rel к ссылке меню. Вы можете обратиться к этой документации ( Определение отношений с XFN ) для получения дополнительной информации об использовании XFN.
- Вы можете изменить свойства пункта меню Sample Page , щелкнув крошечную стрелку справа.
Нажмите кнопку Save Menu , чтобы сохранить все изменения.
Повторите шаги с 1 по 3, чтобы назначить страницы, записи и т. д. меню в качестве элемента родительского меню.
- Важные примечания:
- Старайтесь, чтобы ваше меню было как можно короче.
- Из личного опыта. Иногда пункты меню теряются, когда вы пытаетесь сохранить очень большое меню. Это происходит потому, что ваши размещенные данные слишком велики для вашего сервера.
- Краткое и упорядоченное меню легко доступно на мобильных устройствах. Длинное меню труднодоступно на мобильных устройствах, потому что оно требует прокрутки и неудобно для пользователя.
- Обычно мы назначаем только страницы меню, потому что они недоступны, пока мы не пометим их тегом меню.
- Мы не помещаем сообщения в меню, потому что они доступны через вашу домашнюю страницу или страницу сообщений.
- Старайтесь, чтобы ваше меню было как можно короче.
К настоящему времени у вас должно быть несколько пунктов родительского меню.
Создание пунктов подменю
Теперь мы можем приступить к созданию пунктов подменю. Глядя на предыдущий снимок экрана, вы можете видеть, что есть страница с именем Уровень 1. Мы добавим к ней несколько пунктов подменю.
- Выберите страницы, которые вы хотите использовать в качестве элемента подменю, и добавьте их в область меню.
- В этом примере мы добавим страницы уровня 2a, 2b и уровня 3a, 3b.
- Установите их флажок и нажмите Добавить в меню 9кнопка 0005.
- Вы увидите, что они добавлены в структуру меню справа.
- Система меню WordPress поддерживает перетаскивание. Таким образом, вы можете щелкнуть и удерживать элемент меню, перетащить его в новое положение, прежде чем отпустить кнопку мыши, чтобы оставить его на месте.
- Вы можете начать перетаскивать страницы подуровня на их место.
- Перетащите уровень 2a и поместите его под уровень 1 и немного правее, это будет означать, что это элемент подменю уровня 1.
- Перетащите уровень 2b непосредственно под уровень 2а, это будет означать, что это элемент подменю уровня 1, но на том же уровне, что и уровень 2а.
- Теперь мы можем создать третий уровень, перетащив уровень 3a и поместив его под уровень 2b и немного правее, это будет означать, что это элемент подменю уровня 2b.
- Перетащите уровень 3b непосредственно под уровень 3a, это будет означать, что это элемент подменю уровня 2b, но на том же уровне, что и уровень 3a.
- Посмотрите на следующий снимок экрана, чтобы лучше понять.
- Нажмите Меню сохранения , чтобы сохранить настройки.
- Это все, что касается использования системы меню WordPress для настройки вашего меню.
Настройщик темы
Далее мы рассмотрим, как использовать настройщик тем WordPress для настройки структуры меню.
Войдите в свою панель управления WordPress и перейдите в панель администратора WordPress -> Внешний вид -> Настройка -> Меню .
Создать меню
- Нажмите кнопку + Добавить меню .
- Введите название меню, в этом примере мы назовем наше меню Sample Menu 2
Нажмите кнопку Create Menu , и вы увидите следующий снимок экрана.
Установите флажок Main Menu , чтобы назначить Sample Menu 2 главному меню, затем нажмите
+ кнопка Добавить товары . Раздел для выбора пункта меню выдвинется.
Добавить пункты меню
Нажмите на страницу , появится раскрывающийся список, позволяющий выбрать страницы, которые вы хотите добавить в структуру меню.
Нажмите на страницы, которые вы хотите добавить в свое меню, они будут автоматически добавлены в структуру меню слева.
Расположение пунктов меню
- Теперь мы можем начать упорядочивать пункты меню в несколько уровней.
- Нажмите на слово Изменить порядок, появится элементов управления, чтобы вы могли их переупорядочить.
Щелкайте по стрелкам вверх, вниз, влево, вправо для каждого пункта меню, чтобы расположить их на нескольких уровнях.
Теперь мы закончили. Нажмите кнопку Сохранить и опубликовать .
- Вы можете приступить к управлению меню заголовков.
Внешние ресурсы
- Руководство пользователя меню WordPress
Вы получили ответ на свой вопрос?
Спасибо за ответ Не удалось отправить отзыв. Пожалуйста, повторите попытку позже.
Как создать выпадающее меню в WordPress (Руководство для начинающих)
Хотите создать выпадающее меню в WordPress?
Выпадающее меню показывает список ссылок, когда вы наводите указатель мыши на элемент меню. Это отличный способ показать множество вариантов меню на небольшом пространстве и помочь посетителям найти то, что они ищут, организовав ваш контент по категориям и подкатегориям.
В этом руководстве для начинающих мы покажем вам, как создать выпадающее меню в WordPress.
Зачем использовать выпадающие меню в WordPress?
WordPress поставляется со встроенной системой управления меню, которая позволяет легко добавлять навигационные меню на ваш сайт WordPress.
Навигационные меню — это ссылки на наиболее важные страницы вашего веб-сайта, которые обычно располагаются рядом с логотипом вашего веб-сайта.
Если вы начинаете блог WordPress или создаете веб-сайт всего с несколькими страницами, возможно, имеет смысл добавить ваши страницы в одну строку. Это позволяет посетителям сразу увидеть все важные страницы.
Однако, если вы управляете интернет-магазином или большим веб-сайтом, вам может понадобиться добавить множество ссылок в меню навигации. Это может быть ошеломляющим для посетителей и может сделать ваш сайт запутанным и сложным.
Выпадающие меню решают эту проблему, отображая ссылки меню только тогда, когда посетитель наводит указатель мыши на родительский элемент.
Они также позволяют упорядочивать контент по темам, категориям или группам. Это может помочь посетителям быстро найти то, что они ищут, даже если на вашем сайте сотни или даже тысячи страниц.
И, наконец, они тоже очень мило выглядят.
При этом давайте посмотрим, как можно легко создавать выпадающие меню WordPress и добавлять их на свой веб-сайт.
Видеоруководство
Подпишитесь на WPBeginner
Если вам не нравится видео или вам нужны дополнительные инструкции, продолжайте читать.
Шаг 1. Выбор темы с поддержкой выпадающего меню
WordPress поставляется со встроенной системой управления меню, но внешний вид этих меню зависит от вашей темы WordPress.
Почти все темы WordPress по умолчанию поддерживают выпадающие меню. Однако некоторые темы могут не иметь надлежащей поддержки раскрывающегося списка.
Для начала вам нужно убедиться, что вы используете тему, которая поддерживает выпадающие меню.
Как узнать, поддерживает ли ваша тема раскрывающуюся навигацию?
Если вы загрузили тему из официального репозитория WordPress, просто зайдите на страницу этой темы и нажмите кнопку «Предварительный просмотр», чтобы увидеть живую демонстрацию.
Затем вы можете проверить, показывает ли демо выпадающее меню в меню навигации.
Если вы используете премиальную тему WordPress, разработчик может иметь демо-версию на своем веб-сайте.
Вы также можете проверить документацию темы для получения дополнительной информации.
Если вы все еще не уверены, вы всегда можете обратиться за помощью к разработчику. Чтобы узнать больше по этой теме, ознакомьтесь с нашим руководством о том, как правильно запросить поддержку WordPress и получить ее.
Если ваша тема WordPress не поддерживает выпадающие меню, вам нужно найти тему, которая их поддерживает. Чтобы получить множество советов, ознакомьтесь с нашим руководством о том, как выбрать идеальную тему WordPress.
Чтобы помочь вам, вот несколько отличных тем, которые поддерживают раскрывающиеся списки.
- Astra — многоцелевая тема WordPress с несколькими начальными сайтами и множеством функций.
- Темы StudioPress. Эти профессиональные темы, созданные на основе структуры тем Genesis, оптимизированы для повышения производительности.
- OceanWP — популярная тема WordPress, подходящая для всех типов веб-сайтов.
- Ultra — эта тема WordPress с функцией перетаскивания, созданная на основе конструктора Themify, поставляется с красивыми шаблонами и гибкими параметрами темы.
- Divi — популярная тема от Elegant Themes, которая использует конструктор страниц Divi и имеет множество функций перетаскивания, включая раскрывающиеся меню.
При этом давайте посмотрим, как создать выпадающее меню WordPress.
Шаг 1. Создание навигационного меню в WordPress
Если вы уже настроили навигационное меню на своем веб-сайте, вы можете перейти к следующему шагу.
Сначала создадим простое меню.
Перейдите к Внешний вид »Меню на панели управления WordPress и нажмите ссылку «Создать новое меню» вверху.
Далее вам нужно ввести название меню навигации.
Это просто для справки, чтобы вы могли использовать все, что поможет вам идентифицировать меню в области администрирования WordPress.
После ввода заголовка в поле «Имя меню» нажмите «Создать меню». Теперь WordPress создаст для вас новое пустое меню.
Начнем с добавления верхних ссылок в меню навигации. Эти элементы появятся в верхней строке выпадающего меню.
В левом столбце просто установите флажок рядом с каждой страницей, которую вы хотите добавить. Затем нажмите на кнопку «Добавить в меню».
Эти страницы теперь будут отображаться в правом столбце в разделе «Структура меню».
Вы также можете выбирать записи блога, категории или добавлять пользовательские ссылки. Более подробные инструкции можно найти в нашем руководстве о том, как добавить меню навигации в WordPress.
Шаг 2. Добавление подпунктов в меню
Далее нам нужно добавить подпункты, которые появятся в выпадающем меню. Вы можете добавить подпункт под любой из существующих пунктов меню.
В этом руководстве мы покажем вам, как добавлять тематические категории в пункт меню «Блог».
В левом столбце просто выберите все страницы, которые вы хотите добавить в качестве подпунктов, а затем нажмите кнопку «Добавить в меню». Ваши предметы теперь появятся в правой колонке.
Однако по умолчанию все эти ссылки отображаются как обычные пункты меню, что означает, что они будут добавлены в верхнюю строку раскрывающегося меню.
Вместо этого нам нужно сделать их подэлементами родителя.
Для этого перетащите элемент меню и поместите его под нужный родитель. Затем просто переместите его немного вправо, и он станет подпунктом.
Теперь просто повторите этот процесс для каждого подэлемента, который вы хотите отобразить в раскрывающемся списке.
Когда вы довольны настройкой меню, не забудьте нажать кнопку «Сохранить меню», чтобы сохранить изменения.
Шаг 3. Опубликуйте раскрывающееся меню
Если вы редактируете меню, которое уже размещено на вашем веб-сайте, посетители сразу увидят ваши изменения.
Однако, если вы создаете новое меню, вам нужно выбрать место для этого меню.
Каждая тема WordPress определяет свое собственное расположение меню, которое вы увидите в правом столбце в разделе «Настройки меню». Просто установите флажок рядом с расположением, которое вы хотите использовать, а затем нажмите «Сохранить меню». ‘
Теперь вы можете посетить свой веб-сайт, чтобы увидеть раскрывающееся меню в действии.
Советы по созданию интерактивных выпадающих меню
Навигационные меню важны, потому что это первое место, где посетители будут искать интересный контент или конкретную информацию.
Правильное их использование поможет посетителям ориентироваться на вашем сайте. Это также поможет вам получить больше конверсий и продаж, а также увеличить количество просмотров страниц и снизить показатель отказов.
Имея это в виду, вот несколько советов по созданию полезных и удобных выпадающих меню.
1. Создание многоуровневых выпадающих меню
В этом руководстве мы показали, как создать верхнюю строку и один набор подэлементов. Однако вы также можете добавить подпункт под другим подпунктом, чтобы создать многоуровневое раскрывающееся меню.
Это может быть полезно для сайтов с большим количеством контента или большим количеством категорий контента.
Например, если вы используете плагин, такой как WooCommerce, для продажи товаров в Интернете, у вас может быть категория «Электроника» и подкатегория «Ноутбук». Однако у вас также могут быть дополнительные подкатегории, такие как «Ноутбуки Apple» или «Сумки и чехлы для ноутбуков».
В этом случае имеет смысл создать многоуровневый раскрывающийся список. Для этого просто перетащите любую страницу под подпункт и немного сдвиньте ее вправо.
2. Создайте несколько раскрывающихся меню
Вы можете создать раскрывающийся список под любой верхней ссылкой в вашем меню. Вы даже можете добавить несколько выпадающих меню в главное меню навигации.
Просто перетащите подэлементы под различными родительскими элементами, чтобы создать несколько раскрывающихся меню.
Это отличный способ показать большое количество контента на небольшом пространстве.
3. Создание меню с предварительным просмотром в реальном времени
Если создание выпадающего меню на панели управления становится слишком сложным, вы можете переключиться на настройщик WordPress. Просто перейдите к Внешний вид » Настройте , чтобы запустить настройщик живой темы.
Отсюда нажмите на вкладку «Меню», а затем выберите меню навигации. Теперь вы увидите редактор перетаскивания в левом столбце с предварительным просмотром вашего сайта в режиме реального времени на правой панели.
Теперь вы можете продолжить работу над своим меню, и любые сделанные вами изменения будут отображаться в предварительном просмотре.
4. Создание большого мегаменю в виде выпадающего меню в WordPress
Если у вас много контента, вы не сможете аккуратно организовать его в стандартное выпадающее меню.
Вместо этого вы можете отобразить полную структуру вашего веб-сайта в виде мегаменю, которое появляется только при наведении курсора на главное меню.
Мегаменю отображаются в виде выпадающего меню, но они могут отображать гораздо больше ссылок, подменю и многое другое. Подробные инструкции см. в нашем пошаговом руководстве о том, как создать мегаменю в WordPress.
Мы надеемся, что эта статья помогла вам научиться легко создавать выпадающее меню в WordPress.