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

Содержание

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

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

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

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

Лучшие плагины для меню навигации WordPress

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

Бесплатное видео-руководство по WordPress

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

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс

Создайте как минимум одно стандартное меню WordPress

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

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

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

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

Преобразуйте меню WordPress в выпадающее меню

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

Например, на следующем снимке раздел «Settings» является родительским, а «Password Reset» и «Logout» — дочерними.

Это дает следующий выпадающий список:

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс

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

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

Управление местоположениями: Отображение вашего меню

Теперь нам нужно разместить это выпадающее меню на веб-сайте, поэтому нажмите на вкладку «Управление местоположениями».

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

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

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

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

Нажмите кнопку «Управление с предварительным просмотров». Вы будете перенаправлены в область Кастомизатора темы, где сможете создать стандартное меню WordPress, нажав кнопку «Создать новое меню». Задайте меню имя и нажмите «Далее».

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

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

Укажите, где должно отображаться новое раскрывающееся меню, установив один из флажков «Расположение меню». Обратите внимание, что доступные параметры будут отличаться в зависимости от используемой вами темы WordPress. Когда вы будете довольны настройкой выпадающего меню, нажмите «Опубликовать». Новое выпадающее меню должно появиться на сайте.

Вывод

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

Автор: Jessica Thornsby

Источник: //webdesign.tutsplus.com

Редакция: Команда webformyself.

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс

Основы создания тем WordPress

Научитесь создавать мультиязычные темы с нестандартной структурой страниц

Смотреть

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

👍 Научим создавать сайты на WordPress бесплатно за 11 уроков. Подробнее →

Хотите добавить выпадающее меню на сайт WordPress, чтобы пользователи могли ориентироваться и легко находить информацию? Мы покажем, как это сделать.

Зачем нужны выпадающие меню?

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

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

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

Посмотрим, что для этого нужно, и как это сделать на своем ВП-сайте.

Тема с поддержкой выпадающего меню

Отображение выпадающих элементов в ВордПресс полностью зависит от темы. Большинство поддерживает эту функцию. Но все равно вы должны в этом убедиться.

Как проверить?

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

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

  1. Astra – бесплатный многоцелевой WordPress-шаблон с несколькими готовыми демо-сайтами.
  2. Reboot – современная и быстрая премиальная блоговая/новостная тема со встроенным конструктором главной.
  3. Journal X – платная красивая журнальная WP-тема с бесконечной подгрузкой контента.

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

Шаг 1. Создаем меню

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

Сделаем простое меню.

В админке перейдите Внешний вид > Меню и нажмите создайте новое меню.

Дайте имя новому меню и кликните Создать меню.

В блоке слева отметьте нужные пункты и нажмите Добавить в меню, а затем Сохранить меню.

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

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

Для примера создадим выпадающее меню из категорий постов.

Добавим их.

Если перейти на сайт, то навигация будет выглядеть:

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

После того, как сохраните изменения, на сайте появится выпадающий список:

Выпадающее меню через плагин

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

В каталоге есть несколько решений. Один из популярных – плагин Max Mega Menu. С ним вы создадите структуру меню любой сложности, сможете добавить эффекты при наведении и нажатии и другие полезности.

Установку и работу с ним мы рассматривали в одной из прошлых статей.

Заключение

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

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

Мне нравится5Не нравится1

Если Вам понравилась статья — поделитесь с друзьями

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

9774 Посещений

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

Сегодня, мы рассмотрим настройку меню которая актуальна для версии WordPress 4.4.  Итого, перейдя на страницу меню, выберите первую вкладку «Редактировать меню», дайте название будущему меню и сохраните его.

Далее, в зависимости от темы которая задана на сайте, в структуре меню, которую вам нужно задать ниже, вы указываете Области темы, а также Автоматическое добавление страниц.

Чтобы внести в меню нужные пункты,  в колонке слева, вам нужно отметить нужные разделы. У нас это рубрики.

После добавления их в меню, они отразятся справа, в разделе «Структура меню».

На этом процесс настройки закончен, не забывайте сохранять изменения. Чтобы добавить созданное меню на сайт, перейдите во вкладку «Управление областями». Здесь будет подсказка о том, что добавление определенного количества меню предусмотрено активной темой оформления на сайте. В нашем случае можно добавить 2 меню. Мы выбрали одно, основное, которое мы создали и назвали Меню сайта. 

Обязательно сохраняем изменения и смотрим результат на главной странице сайта.

Для того, чтобы создать выпадающее меню на сайте нам понадобиться установить плагин JQuery Vertical Mega Menu Widget. Это бесплатный плагин для добавления вертикального меню,  в котором вы можете настроить второй или третий под уровни, так называемое «выпадание» слева или справа в зависимости от выбранной позиции.

Изначально нужно установить этот плагин. Идем в раздел Плагины/Добавить Новый и в поисковой строке вбиваем  JQuery Vertical Mega Menu Widget. После нажимает Установить и Активировать для запуска плагина в работу.

Переходим дальше, где мы разберем создание выпадающего или под уровневого меню на собственном примере, используя рубрики. У нас тестовый сайт, на котором не так много заметок, поэтому мы заходим в раздел Записи/Рубрики для того, чтобы создать дополнительные, дочерние рубрики. Как видно, на изображении, мы создаем дочернюю рубрику под названием Тест в родительской рубрике Cool. Таких тестовых версий мы создадим несколько и в разных родительских рубриках. 

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

Теперь, мы переходим в раздел Рубрики которые отображены слева. Открываем вкладку все и отмечаем галочками те пункты меню, которые должны в итоге появится на сайте. Отметили и нажимаем «Добавить в меню».

После чего, все добавленные пункты отобразятся справа. 

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

На этом робота с меню закончена, для того, чтобы меню отобразилось на сайте, нам остался один этап. С помощью ранее установленного плагина, мы настроим отображение меню в желаемом для нас виде. Переходим в раздел Внешний вид/Виджеты. Слева в доступных виджетах, мы находим JQuery Vertical Mega Menu Widget и перетаскиваем его в правую верхнюю часть под Боковую колонку. В открывшихся настройках указываем желанные данные. Цвет, название, вид анимации и не забываем сохранить. 

После чего, вы можете просмотреть готовый результат уже на своем сайте.

 

руководство для начинающих — WordPressify

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

В этом руководстве для начинающих подробно изложено, как создать выпадающее меню на сайте 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 создаст для вас новое пустое меню.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Понравилось это:

Нравится Загрузка…

Похожее

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

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

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

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

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

  • Astra.
  • Темы StudioPress.
  • OceanWP.
  • Ultra.
  • Divi.

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

Далее введите название меню навигации.

Затем нажмите кнопку «Создать меню». После этого WordPress создаст новое пустое меню.

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

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

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

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

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

Темы оформления WordPress могут отображать меню в разных местах. Каждая тема оформления поддерживает определенные области для размещения меню. Они перечислены в разделе «Настройки меню». Выберите вариант рядом с параметром «Область отображения» и нажмите кнопку «Сохранить меню».

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

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

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

Используемая тема оформления автоматически отобразит подпункты в виде подменю внутри выпадающего меню.

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

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

Затем перейдите на вкладку «Меню» и выберите необходимое меню навигации. После этого вы увидите визуальный редактор с областью предварительного просмотра сайта.

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

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

Данная публикация является переводом статьи «How to Create a Dropdown Menu in WordPress (Beginners Guide)» , подготовленная редакцией проекта.

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

Приветствую вас на сайте Impuls-Web!

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

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

Навигация по статье:

Для WordPress выпадающее меню нам поможет сделать плагин Mega Main Menu. Это очень мощный плагин, с помощью которого вы можете создать выпадающее горизонтальное и вертикальное меню абсолютно в любой части вашего сайта.

Установка и настройка плагина выпадающего меню WordPress

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

  1. 1.Заходим в админку WordPress и переходим в раздел «Плагины» => «Добавить новый».
  2. 2.В строку поиска вставляем название, ждем, пока пройдет поиск, в результатах поиска выбираем нужный нам плагин и жмем на кнопку «Установить», а затем «Активировать».
  3. 3.Далее, нам нужно перейти в раздел «Внешний вид» => «Меню» и здесь создать новое, или выбрать уже существующее меню, которое мы хотим сделать выпадающим. Для наглядности и экономии времени я заранее сделала заготовку, которое имеет в разделе «Каталог» два уровня вложенности.
  4. 4.Для начала работы с плагином нам нужно включить его в левой панели управления, в разделе «Настройка Max Mega Menu»
  5. 5.Здесь же мы можем в графе «Событие» выбрать, при каких действиях пользователя будет открываться пункты меню.

    Доступно для выбора три варианта:

    Hover intent – тоже самое, что и «Наведение мышки»

    Наведение мышки — открывается при наведении указателя мышки на пункте

    Клик мышки – открывается при клике указателем мышки по пункту

  6. 6.В графе «Эффект» мы можем выбрать эффект при открытии выпадающего меню WordPress

    И скорость, с которой оно будет открываться:

  7. 7.Далее, при наведении указателя мышки на пункт меню, возле его названия появляется синяя кнопка «Мега Меню», нажав на которую мы откроем окно настроек для данного пункта.
  8. 8.Во вкладке открывшегося окна «Мега Меню» мы можем:
  9. 9.На вкладке «Settings» вы можете скрыть надпись или стрелку, отключить ссылку, отключить отображение элемента на мобильных устройствах или компьютерах, задать настройки выравнивания для самого элемента, иконки и подменю, а так же можно отключить отображение подменю на мобильных устройствах.
  10. 10. На следующей вкладке мы можем задать иконку для пункта меню.

    В бесплатной версии плагина доступны для использования только стандартные иконки. Иконки Font Awesome, Genericons и возможность добавления своих иконок доступна только для Pro-версии.

  11. 11.Далее нам нужно перейти в раздел «Мега Меню» на главной странице WordPress. Здесь нам нужны две вкладки: «Темы меню» и «Локации меню»
  12. 12. На вкладке «Темы меню» нам нужно задать тему цветового оформления для нашего выпадающего меню WordPress, так как в этом плагине нет стандартных заготовок.

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

Добавление выпадающего меню WordPress на сайт

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

Для добавления выпадающего меню WordPress в область виджетов нам нужно:

  1. 1.Переходим в раздел «Внешний вид» => «Виджеты»
  2. 2.Выбираем виджет «Max Mega Menu» и добавляем его в сайдбар. Это можно сделать или путем перетаскивания виджета в нужную область, или выбрав виджет и кликнув на кнопку «Добавить виджет».
  3. 3.А дальше нам нужно стилями привести наше меню к нужному виду, так как по умолчанию оно отображается как горизонтальное.

Если же вам нужно сделать дублирующее выпадающее меню WordPress в футере сайта, то для этого нужно:

  1. 1.Переходим на вкладку «Локации меню» в настройках плагина и копируем php-функцию:
  2. 2.Далее, при помощи текстового редактора Notepad++ подключаемся к нашему сайту по FTP и открываем файл footer.php, который находится в корне темы оформления вашего сайта.
  3. 3.Далее, в соответствующем месте шаблона с новой строки вставляем скопированную функцию:

    Обратите внимание! Так как вёрстка у разных шаблонов разная, то определить блок в который нужно вставить код меню вам нужно будет самостоятельно.
    В этом вам может помочь следующая статья:
    «Изменение темы WordPress. Определение Class и ID»

  4. 4.После чего сохраняем файл и выгружаем его на хостинг, нажив на дискетку или сочетанием клавиш CTRL+S.

Вот что у нас получилось:

Теперь у нас главное меню сайта продублировано в футере. Осталось его немного подправить css-стилями.

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

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

До встречи в следующих статьях!

С уважением Юлия Гусарь

Меню в WordPress: меняем вид меню и делаем выпадающее меню


Ромчик

10

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

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

Выпадающее меню в WordPress создается в админке. Для этого переходим в «Внешний вид»-> «Меню»

Если при переходе в пункт «Меню» у Вас появляется надпись «Текущая тема не поддерживает создания меню…», то не расстраивайтесь. Как включить поддержку меню в  теме Вы можете прочитать у меня в статье «Добавление поддержки собственного меню в тему для WordPress»

После перехода в пункт меню мы видим окно редактирования меню:

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

Теперь добавим пункт меню. Например страницу «Главная». Выбираем ее в левой части и жмем «Добавить в меню». Дальше в правой части жмем «Сохранить меню». Все пункт меню добавлен.

Мы можем его подредактировать. Для этого нажмите на стрелочку рядом с надписью «Страница». Мы можем изменить текст ссылки. Для этого в поле «Текст ссылки» укажите необходимый текст. В поле «Атрибут title» мы можем указать title ссылки. Мы можем удалить данный пункт меню, нажав на ссылку «Удалить» или отменить все изменения, нажав по ссылке «Отмена». После внесения всех изменений необходимо нажать «Сохранить меню».

Аналогичным образом создадим еще несколько пунктов меню.

Если мы хотим поменять порядок пунктов, то просто перетащите необходимый пункт на необходимую позицию. Так, например, я захотел, чтобы пункт «Без рубрики» стоял после пункта «Главная».

Теперь мы хотим, чтобы пункт «Без рубрики» стал подпунктом пункта «Главная». Для этого просто перетащите пункт «Без рубрики вправо».

После всех изменений не забывайте сохранять меню.

Мы с вами создали меню, создали пункты меню и создали подпункты меню. Теперь самое интересное – будем делать выпадающее меню.

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

Давайте посмотрим как выглядит наше меню. Для этого перейдем на наш сайт:

Теперь наведем курсор мыши на пункт «Главная»

Как видим появился выпадающий подпункт «Без рубоики».

Теперь давайте рассмотрим подробнее html код нашего меню:

  • Все меню по умолчанию заключено в div с классом menu-menu-container.
  • Дальше идет список ul с классом menu.
  • Каждый пункт меню заключен в li со многими классами, но нам интересны два класса menu-item и current-menu-item (этот класс только у текущего пункта меню)
  • Подпункты определенного пункта заключены в список ul с классом sub-menu.
  • Каждый подпункт заключен в li с теми же классами, что и пункты родительского меню.

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

В данной статье мы с Вами рассмотрели как создать меню в WordPress, как создать пункты и подпункты меню в WordPress. А также затронули основные CSS-классы меню WordPress

Понравилась статья? Поделись с друзьями.

Как создать [для начинающих]

Хотите узнать, как настроить раскрывающееся меню WordPress?

В этой статье мы шаг за шагом проведем вас через создание раскрывающегося меню со скриншотами!

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

Как создать раскрывающееся меню WordPress с основными функциями

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

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

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

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

Для начала перейдите в панель управления WordPress и нажмите Внешний вид> Меню.

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

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

.

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

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

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

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

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

Когда вы будете довольны организацией, нажмите Меню сохранения .

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

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

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

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

Как только вы сохраните изменения, все готово!

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

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

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

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

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

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

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

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

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

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

Заключительные мысли

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

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

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

Бесплатный гид

5 основных советов по ускорению работы вашего сайта на WordPress

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

, просто следуя простым советам.

Как создать раскрывающееся меню в WordPress (за 5 шагов)

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

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

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

Давайте нырнем!

Введение в навигацию и раскрывающиеся меню WordPress

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

Главное меню навигации веб-сайта Kinsta

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

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

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

По этой причине ваше меню WordPress может принимать самые разные формы. Самым привычным является стандартное меню заголовка:

Пример типичного меню заголовка

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

Пример нижнего колонтитула

Другой стиль — это наложение меню, которое пользователи могут открывать и закрывать по своему желанию:

Пример оверлейного меню

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

Пример меню боковой панели

Или вы можете включить раскрывающееся меню, также иногда называемое «вложенным» меню:

Пример выпадающего меню

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

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

Как создать раскрывающееся меню в WordPress (за 5 шагов)

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

Шаг 1. Создание пунктов меню

Первый шаг к созданию меню — решить, что в него включить. Начните с перехода к Внешний вид> Меню на панели инструментов WordPress:

Доступ к редактору меню на панели инструментов WordPress

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

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

Ссылка на создание нового меню в верхней части редактора меню WordPress.

В этом примере мы выберем последний вариант и создадим новое меню.Это включает в себя добавление заголовка и последующее нажатие на кнопку Create Menu :

Присвоение имени и создание нового меню

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

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

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

Добавление страниц в меню

На боковой панели редактора меню просто установите флажки для каждой страницы или сообщения, которое вы хотите включить, и нажмите кнопку Добавить в меню :

Ваш следующий вариант — включить Custom Links . Это включает в себя предоставление URL-адреса страницы, на которую вы хотите направить пользователей, а затем создание для нее короткого, но описательного ярлыка.После этого вы можете снова нажать Добавить в меню :

Добавление кастомной ссылки в меню

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

Блоги и другие сайты с большим количеством контента могут найти эту функцию особенно полезной:

Добавление категорий в меню

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

Шаг 2. Организуйте свое меню WordPress

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

Раздел «Структура меню» редактора меню

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

Есть несколько способов добавить выпадающие списки в меню WordPress.

Самый простой — продолжить перетаскивание, но начать вкладывать одни пункты меню в другие:

Вложенность категорий на странице блога

Например, на изображении выше мы переместили три категории сообщений, которые мы добавили в меню, в Blog , сделав их «подпунктами». На веб-интерфейсе это создаст выпадающее меню, которое выглядит следующим образом:

Пример выпадающего меню в WordPress

Если вы хотите добавить раскрывающееся меню, которое включает все категории на вашем сайте, вы можете сделать это, добавив настраиваемую ссылку в свое меню.Используйте «#» в качестве URL-адреса и «Категории» или что-то подобное для ярлыка:

Создание метки категорий для меню

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

.

Раскрывающееся меню Категории

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

Добавьте еще одну настраиваемую ссылку, используя «#» в качестве URL-адреса и «Меню» в качестве метки.Затем вложите все остальные пункты меню под этим:

Размещение всех навигационных ссылок под одной меткой меню

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

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

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили наш трафик более чем на 1000%?

Присоединяйтесь к 20 000+ других, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress!

Подпишитесь сейчас

Настоящее раскрывающееся меню навигации WordPress

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

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

Шаг 3. Добавьте изображения в меню WordPress

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

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

Можно добавлять изображения с помощью настраиваемого CSS, о котором мы вскоре поговорим. Однако мы рекомендуем использовать плагин, например Menu Image, Icons Made Easy:

Выпадающее меню WordPress с изображениями

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

Просто установите плагин и затем вернитесь в Внешний вид> Меню :

Раздел «Изображение меню» в редакторе меню

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

Шаг 4. Добавьте собственный CSS в раскрывающееся меню

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

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

В редакторе меню щелкните Параметры экрана в правом верхнем углу:

Вкладка «Параметры экрана» в редакторе меню

Затем установите флажок CSS-классы :

Флажок «Классы CSS» на вкладке «Параметры экрана»

Это добавит поле CSS Classes на каждую страницу в вашем меню:

Поле CSS Classes в редакторе меню

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

Теперь вы можете перейти к своей таблице стилей или Настройщику и приступить к работе над своим индивидуальным стилем.

Шаг 5: опубликуйте свое меню в лучших местах

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

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

В редакторе меню прокрутите вниз до раздела Настройки меню :

Раздел «Настройки меню» в редакторе

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

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

Тема Twenty Twenty включает в себя различные области меню: Горизонтальное меню рабочего стола , Расширенное меню рабочего стола , Мобильное меню , Нижнее меню , Социальное меню .

В данном случае созданное нами меню лучше всего подходит для горизонтального меню Desktop , которое находится в заголовке сайта:

Горизонтальное меню рабочего стола для темы Twenty Twenty

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

Вкладка «Управление местоположениями»

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

Управление с возможностью предварительного просмотра

Нажмите кнопку Manage with Live Preview , чтобы увидеть, как ваше меню будет отображаться в выбранном вами месте, с помощью настройщика WordPress:

Предварительный просмотр меню WordPress в настройщике

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

Плагины

WordPress для улучшения раскрывающихся меню

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

Nested Pages — это эффективный способ для блогов с большим объемом контента создавать раскрывающиеся меню.Хотя он в основном используется для организации сообщений и страниц, этот плагин также автоматически создает меню, которое отражает структуру вашего контента:

Плагин WordPress для вложенных страниц

Хотя включать большое количество пунктов в меню не обязательно, иногда это неизбежно.

Если это так с вашим сайтом, Max Mega Menu может помочь вам объединить существующие меню WordPress в одно «мегаменю»:

Max Mega Menu WordPress плагин

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

WP Mobile Menu сочетается с любой адаптивной темой, чтобы помочь вам создать систему навигации для пользователей вашего сайта, которые находятся в пути:

Плагин WP Mobile Menus для WordPress

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

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

Устранение неполадок раскрывающегося меню WordPress

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

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

Часто неисправное меню является результатом конфликта кода между вашим пользовательским меню и вашей темой. Первое, что вам следует сделать, если ваше меню не работает, — это переключиться на тему по умолчанию, например Twenty Twenty. Если ваше меню снова заработает, значит, проблема связана с вашей темой. Затем вы можете связаться с разработчиком вашей темы, чтобы найти решение.

Несколько других возможных причин включают:

  • Ошибочный код: Дважды проверьте правильность добавленных вами настраиваемых CSS-классов и что вы используете классы CSS, как описано в шаге 4.
  • Несовместимость подключаемых модулей: Попробуйте отключить все установленные подключаемые модули, относящиеся к меню, и посмотрите, решит ли это проблему.
  • Устаревший jQuery: Обновите jQuery до последней версии и попробуйте снова открыть раскрывающееся меню.

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

Меню навигации — ключ к UX вашего сайта. Но что, если у вас есть много пунктов меню, которые вам нужно показать? Выпадающее меню — это название игры! Узнайте, как легко создать его, с помощью этого руководства 📑🗃️Нажмите, чтобы твитнуть

Сводка

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

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

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

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

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

В этой статье мы рассмотрим, как создать раскрывающееся меню в WordPress. Давайте начнем!

Как добавить раскрывающееся меню: шаг за шагом

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

Пожалуй, наиболее распространенным типом является меню заголовка:

Однако боковые меню также очень заметны:

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

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

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

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

Шаг 1. Создание пунктов меню

Для начала перейдите к Внешний вид> Меню на панели инструментов WordPress.Доступные здесь параметры будут частично определяться вашей текущей темой.

Перейдите на вкладку Edit Menus , где вы можете создать новое меню:

Введите имя в поле ввода под разделом «Структура меню » , а затем щелкните « Создать меню» :

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

Теперь вы можете начать добавлять элементы в свое меню.Вы можете включать страницы, сообщения и настраиваемые URL-адреса. Например, чтобы добавить страницу, установите флажки рядом с контентом, который вы хотите добавить, в разделе Страницы справа, а затем выберите Добавить в меню :

Тот же процесс применяется к сообщениям. Если вы хотите добавить ссылку в свое меню, разверните раздел Пользовательские ссылки и введите URL-адрес, а также пользовательский текст:

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

Шаг 2. Настройте структуру меню

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

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

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

Затем вы можете проверить свой сайт во внешнем интерфейсе, чтобы увидеть меню в действии. Любые подпункты будут отображаться в раскрывающемся меню:

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

Шаг 3. Добавьте CSS в свое меню

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

Установите флажок CSS Classes :

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

Шаг 4. Предварительный просмотр меню

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

Нажмите Управление с предварительным просмотром в реальном времени , чтобы войти в интерактивный редактор:

При необходимости вы можете внести здесь дополнительные изменения, например добавить, удалить или изменить порядок пунктов меню:

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

Шаг 5. Опубликуйте свое меню

Когда вы будете готовы, вы можете оживить новое меню одним щелчком мыши. Просто нажмите кнопку Опубликовать :

Это сделает меню живым на вашем сайте и позволит посетителям начать им пользоваться.

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

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

Плагины раскрывающегося меню

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

  1. Max Mega Menu : Бесплатный плагин, который добавляет множество опций в существующий редактор меню.
  2. Меню героя : Инструмент с широкими возможностями настройки с упором на скорость отклика.
  3. UberMenu : Решение, которое дает вам максимальный контроль над стилем и функциональностью ваших меню.

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

Настройте свой сайт с помощью WP Engine

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

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

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

Что, если бы вы могли упростить пользователям навигацию по вашему веб-сайту?

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

В этой статье мы покажем вам, как это сделать.

Что такое раскрывающееся меню?

Меню по умолчанию, используемое в Интернете, — это стандартное меню.Это простой дизайн, в котором каждый пункт меню отображается рядом друг с другом по горизонтали (иногда по вертикали). Дизайн не содержит вложенных элементов, что придает ему истинный вид: «что видишь, то и получаешь».

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

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

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

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

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

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

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

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

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

WordPress называет эти «подпункты», но вы также можете называть их дочерними элементами. Вы даже можете создать внуков, вложив дополнительные элементы в дочерние элементы.

Вот пример этого простого меню в действии:

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

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

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

Если вы хотите добавить родительский пункт меню, который действует как заголовок, а не как фактическая ссылка, вставьте символ решетки # в поле URL и свой заголовок в поле Текст ссылки.Например, если вы продаете продукты в нескольких магазинах с большими коробками, вы можете создать родительский пункт меню под названием «Где купить» и связать каждый магазин как дочерний элемент.

Не стесняйтесь добавлять собственные ссылки в любом месте вашего меню.

Редактирование меню

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

Обязательно сохраните свое меню перед следующей частью.

Если вы хотите видеть изменения, которые вы вносите в свое меню, в реальном времени, перейдите в интерактивный настройщик, откройте раздел «Меню» и откройте раскрывающееся меню. Интерфейс похож на страницу меню в серверной части WordPress, поэтому вы сможете редактировать свое меню отсюда.

Вы даже можете удалить свое меню отсюда, как и на странице меню серверной части.

Мегаменю: альтернатива выпадающему меню

Выпадающее меню

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

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

Их невероятно легко создать, если использовать специальные плагины мегаменю, особенно такие, как UberMenu и Mega Menu Pro.

раскрывающихся меню WordPress в двух словах. Советы по укладке прилагаются.

раскрывающихся меню WordPress в сегодняшнем меню!

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

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

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

А теперь давайте посмотрим, как мы можем его построить.

Как создать раскрывающееся меню в классическом редакторе WordPress за 3 шага

Шаг 1. Создание простого меню WordPress

Перейдите на панель управления WordPress и выберите «Меню» под «Внешний вид»

Далее выберите «создать новое меню».

Теперь дайте ему имя и выберите «Создать меню».

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

Шаг 2: Добавьте элементы в раскрывающееся меню WordPress

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

Вы можете добавить в свое меню:

  • Страниц
  • Посты
  • Пользовательские ссылки
  • Категории блога

Нужно больше страниц? Перейдите в Pages -> Add new.

Но как получить раскрывающийся список?

Легко, просто перетащите нужную страницу под страницу, к которой она будет принадлежать, как показано ниже:

В приведенном ниже примере я добавил категории блога как подпункты блога.

На нашем веб-сайте Colibri мы использовали подход с настраиваемым меню ссылок.

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

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

Вы можете использовать настраиваемые страницы, если хотите ссылаться на внешние страницы или даже на свои профили в социальных сетях.

Шаг 3: Выберите расположение меню

Довольны вашим меню?

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

Это ваши варианты:

  • Основная навигация
  • Главное меню
  • Главное меню
  • Меню нижнего колонтитула

В разделе «Настройки меню» вы можете выбрать место для своего меню.

Затем просто нажмите «Сохранить меню», и все готово!

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

Как оформить раскрывающиеся меню WordPress

Вы хотите вывести раскрывающееся меню WordPress на совершенно новый уровень с помощью стиля?

У нас есть для вас 2 метода.

1. Создание выпадающих меню WordPress с помощью плагинов

Если вы не фанат CSS, то это для вас. Вам не нужно писать ни строчки кода.

CSS Hero — один из самых популярных плагинов WordPress, который позволяет стилизовать без кода.

Вот как вы можете установить и активировать плагины WordPress.

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

Еще одна интересная особенность CSS Hero — возможность отмены и доступа к изменениям истории.

2. Пользовательский стиль CSS для раскрывающихся меню WordPress

Этот раздел требует более глубоких знаний CSS.

Есть несколько классов WordPress по умолчанию, с которыми вы можете работать.

Меню навигации WordPress отображаются в виде маркированного или неупорядоченного списка (