Содержание
Как сделать выпадающее меню в 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
9543 Посещений
Сегодня, мы с вами поговорим об одном из элементов навигации на сайте 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.Заходим в админку WordPress и переходим в раздел «Плагины» => «Добавить новый».
- 2.В строку поиска вставляем название, ждем, пока пройдет поиск, в результатах поиска выбираем нужный нам плагин и жмем на кнопку «Установить», а затем «Активировать».
- 3.Далее, нам нужно перейти в раздел «Внешний вид» => «Меню» и здесь создать новое, или выбрать уже существующее меню, которое мы хотим сделать выпадающим. Для наглядности и экономии времени я заранее сделала заготовку, которое имеет в разделе «Каталог» два уровня вложенности.
- 4.Для начала работы с плагином нам нужно включить его в левой панели управления, в разделе «Настройка Max Mega Menu»
- 5.Здесь же мы можем в графе «Событие» выбрать, при каких действиях пользователя будет открываться пункты меню.
Доступно для выбора три варианта:
Hover intent – тоже самое, что и «Наведение мышки»
Наведение мышки — открывается при наведении указателя мышки на пункте
Клик мышки – открывается при клике указателем мышки по пункту
- 6.В графе «Эффект» мы можем выбрать эффект при открытии выпадающего меню WordPress
И скорость, с которой оно будет открываться:
- 7.Далее, при наведении указателя мышки на пункт меню, возле его названия появляется синяя кнопка «Мега Меню», нажав на которую мы откроем окно настроек для данного пункта.
- 8.Во вкладке открывшегося окна «Мега Меню» мы можем:
- 9.На вкладке «Settings» вы можете скрыть надпись или стрелку, отключить ссылку, отключить отображение элемента на мобильных устройствах или компьютерах, задать настройки выравнивания для самого элемента, иконки и подменю, а так же можно отключить отображение подменю на мобильных устройствах.
- 10. На следующей вкладке мы можем задать иконку для пункта меню.
В бесплатной версии плагина доступны для использования только стандартные иконки. Иконки Font Awesome, Genericons и возможность добавления своих иконок доступна только для Pro-версии.
- 11.Далее нам нужно перейти в раздел «Мега Меню» на главной странице WordPress. Здесь нам нужны две вкладки: «Темы меню» и «Локации меню»
- 12. На вкладке «Темы меню» нам нужно задать тему цветового оформления для нашего выпадающего меню WordPress, так как в этом плагине нет стандартных заготовок.
Переключаясь по вкладкам раздела вам нужно задать настройки цвета, отступы, высоту, шрифты, рамки, тени и другие визуальные настройки в соответствии с цветовым оформлением вашего сайта. После того, как вы зададите все настройки, не забудьте нажать на кнопку «Сохранить изменения».
Добавление выпадающего меню WordPress на сайт
После того как мы закончили настройку выпадающего меню WordPress, нам нужно его как-то добавить на сайт. В случае, если мы используем данное меню в качестве главного, то здесь все просто, ничего менять или добавлять не нужно, все настройки применяются по умолчанию.
Для добавления выпадающего меню WordPress в область виджетов нам нужно:
- 1.Переходим в раздел «Внешний вид» => «Виджеты»
- 2.Выбираем виджет «Max Mega Menu» и добавляем его в сайдбар. Это можно сделать или путем перетаскивания виджета в нужную область, или выбрав виджет и кликнув на кнопку «Добавить виджет».
- 3.А дальше нам нужно стилями привести наше меню к нужному виду, так как по умолчанию оно отображается как горизонтальное.
Если же вам нужно сделать дублирующее выпадающее меню WordPress в футере сайта, то для этого нужно:
- 1.Переходим на вкладку «Локации меню» в настройках плагина и копируем php-функцию:
- 2.Далее, при помощи текстового редактора Notepad++ подключаемся к нашему сайту по FTP и открываем файл footer.php, который находится в корне темы оформления вашего сайта.
- 3.Далее, в соответствующем месте шаблона с новой строки вставляем скопированную функцию:
Обратите внимание! Так как вёрстка у разных шаблонов разная, то определить блок в который нужно вставить код меню вам нужно будет самостоятельно.
В этом вам может помочь следующая статья:
«Изменение темы WordPress. Определение Class и ID» - 4.После чего сохраняем файл и выгружаем его на хостинг, нажив на дискетку или сочетанием клавиш CTRL+S.
Вот что у нас получилось:
Теперь у нас главное меню сайта продублировано в футере. Осталось его немного подправить css-стилями.
Как я уже говорила, плагин Max Mega Menu дает огромные возможности, и с его помощью вы можете создать для WordPress выпадающее меню любой сложности, хоть горизонтально, хоть вертикальное, и вставить его в любом месте на своем сайте. Но, к сожалению, у этого плагина есть и недостатки, основным из которых является необходимость дописывать стили для нормального вывода в виджетах.
На этом я закончу эту статью. В одной из следующих я расскажу, как сделать выпадающее меню WordPress без использования плагинов. Если вам эта тема интересна, пожалуйста, оставляйте комментарии под статьей, и делитесь ею в социальных сетях.
До встречи в следующих статьях!
С уважением Юлия Гусарь
Горизонтальное выпадающее меню Супер плагин WordPress – info-effect.ru
На чтение 8 мин. Опубликовано
Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress! Сегодня вы узнаете о супер полезном плагине, который позволит вам создать горизонтальное выпадающее меню. Вы сможете вставлять в выпадающее меню любые виджеты, текст, редактор, фото, видео, формы, html код.
Вы сможете полностью настроить внешний вид меню и настроить выпадающее меню. Можно добавить в горизонтальное выпадающее меню до 8 восьми колонок. Можно отключить выпадающее меню для мобильных устройств. Очень гибкий плагин, вы сможете сделать Супер меню!
Установить Супер плагин Max Mega Menu вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
Далее, после установки и активации плагина, перейдите на страницу: Mega Menu. Здесь вы сможете настроить основные настройки плагина.
General Settings.
– Click Event Behaviour, поведение при клике. Здесь у вас на выбор два варианта:
- First click will open a sub menu, second click will close the sub menu, первый клик открывает подменю, второе нажатие закрывает подменю;
- First click will open a sub menu, second click will follow the link, первый клик открывает подменю, второй клик по ссылке.
- Оставьте по умолчанию, ничего не меняйте.
– Mobile Menu Behaviour, поведение на мобильном меню,
- Standard – Open sub menus will remain open until closed by the user, Стандарт – открытое подменю будет оставаться открытым, пока его не закроет пользователь.
- Accordion – Open sub menus will automatically close when another one is opened, Аккордеон – открытые подменю будет автоматически закрываться, когда другое открыто.
– CSS Output, оставьте по умолчанию, ничего не надо менять здесь.
– Menu Item Descriptions, включить или отключить описание для пунктов меню.
– Active Menu Instances, Некоторые темы будут выводить расположение меню несколько раз на одной странице. Например, ваша тема может выводить расположение меню после главного меню, затем снова для мобильного меню. Этот параметр можно использовать, чтобы убедиться, что меню Max Mega Menu применяется только к одному из этих экземпляров.
– Сохраните сделанные изменения.
Menu Themes.
– Select theme to edit, здесь указано меню, которое вы будете редактировать. Можно создать и выбрать другое меню.
– Theme Title, заголовок темы меню, оставьте по умолчанию.
– Arrow, можно выбрать стрелку, которая отображается в пункте меню с выпадающим меню.
– Line Height, линия высоты.
– Z Index, показатель Z Index, можно оставить по умолчанию.
– Shadow, можно настроить тень меню.
– Hover Transitions, включить переходы при наведении на пункты меню.
– Reset Widget Styling, отключить стили виджетов Mega Menu.
Menu Bar.
– Menu Height, высота меню.
– Menu Background, цвет фона меню.
– Menu Padding, обивка меню.
– Menu Border Radius, радиус границы меню.
– Menu Items Align, расположение пунктов меню.
– Menu Item Background, цвет фона пунктов меню.
– Menu Item Background (Hover), цвет фона пункта меню при наведении.
– Menu Item Spacing, интервал пунктов меню.
– Font, параметры шрифта, цвет, размер, расположение, семейство и т.д.
– Font (Hover), параметры шрифта при наведении.
– Menu Item Padding, обивка пунктов меню.
– Menu Item Border, параметры границы пункта меню.
– Menu Item Border (Hover), параметры границы пункта меню при наведении.
– Menu Item Border Radius, параметры радиуса границы пункта меню.
– Menu Item Divider, разделитель меню.
– Highlight Current Item, выделять текущий пункт меню.
Mega Menus.
– Panel Background, цвет фона выпадающего меню.
– Panel Width, ширина окна выпадающего меню.
– Panel Padding, обивка.
– Panel Border, цвет и размер границ.
– Panel Border Radius, радиус границы.
– Item Padding, обивка пункта меню в выпадающем меню.
Widgets.
– Heading Font, параметры шрифта заголовка виджета в выпадающем меню.
– Heading Padding, обивка заголовка.
– Heading Margin, отступы от границ заголовка виджета.
– Header Border, параметры границы бордюра.
– Content Font, шрифт в содержании виджета.
Second Level Menu Items.
– Font, шрифт пунктов меню второго уровня.
– Font (Hover), шрифт при наведении.
– Background (Hover), цвет фона при наведении.
– Padding, обивка.
– Margin, отступ.
– Border, бордюр, граница.
Third Level Menu Items. Те же настройки, только для пунктов меню третьего уровня.
Flyout Menus.
– Menu Background, цвет фона выпадающего меню второго или третьего уровня.
– Menu Width, ширина меню.
– Menu Padding, обивка.
– Menu Border, граница.
– Menu Border Radius, радиус границы.
– Item Background, цвет фона пункта меню.
– Item Background (Hover), цвет фона пункта при наведении.
– Item Height, высота пункта меню.
– Item Padding, обивка пункта.
– Item Font, шрифт текста в пункте меню.
– Item Font (Hover), шрифт при наведении.
– Item Divider, разделитель элемента.
Mobile menu.
– Toggle Bar Designer, здесь показано как выглядит меню на мобильных устройствах.
– Responsive Breakpoint, ширина для перехода в мобильное меню.
– Toggle Bar Background, цвет фона кнопки открытия мобильного меню.
– Disable Mobile Toggle, можно отключить переключатель меню.
– Toggle Bar Height, высота переключателя мобильного меню.
– Mega Menu Columns, сколько колонок в выпадающем меню на мобильном сайте.
– Menu Background, цвет фона мобильного меню.
– Menu Item Height, высота пункта меню.
Custom Styling. Здесь можно добавить свои CSS стили для меню.
– Сохраните сделанные изменения.
Menu Locations.
– Registered Menu Locations, здесь вы сможете создавать области меню, в которые потом сможете добавлять меню. Чтобы создать область для меню, нажмите на кнопку – Add another menu location.
Область меню вы сможете добавлять на сайт, с помощью шорткода или php кода.
На странице: Внешний вид – Меню – Управление областями, вы сможете добавить меню для области.
Tools.
– Cache, здесь можно очистить кэш CSS, не обязательно, кэш автоматически очищается при каждом сохранении меню.
– Plugin Data, удалить все данные плагина, сохранённые в базе данных WordPress. Только в случае удаления плагина!
– Export Theme, можно экспортировать тему мега меню в формате JSON или PHP.
– Import Theme, можно импортировать тему мега меню.
Далее, чтобы создать горизонтальное выпадающее меню, перейдите на страницу: Внешний вид – Меню. Слева у вас появится виджет “Max Mega Menu Settings”.
– Enable, поставьте здесь галочку, чтобы включить мега меню.
– Event, здесь можно выбрать как будет открываться выпадающее меню.
– Effect, можно выбрать эффект для выпадающего меню.
– Theme, тема меню, по умолчанию.
После включения мега меню, в каждом виджете страницы, при наведении, появится кнопка – Mega Menu. Нажмите на данную кнопку, чтобы настроить выпадающее меню для данного пункта меню.
Далее, у вас откроется окно. Вверху справа нажмите по широкому полю, чтобы выбрать виджет и добавить его в меню. Вверху справа вы можете выбрать сколько будет колонок в выпадающем меню. Виджеты можно распределять по выпадающей панели, можно указать какую часть виджет будет занимать, пример 1/2 или 1/3. Жмите по стрелкам вправо и влево, чтобы указать какую часть будет занимать виджет.
Чтобы открыть и настроить виджет, добавить в него какое-либо содержание и т.д., справа в виджете нажмите на значок ключа. Настройте виджет и сохраните его.
Далее, слева перейдите на вкладку – Settings. Здесь можно настроить дополнительные параметры:
– Hide Text, скрыть текст из пункта меню.
– Hide Arrow, скрыть стрелку.
– Disable Link, отключить ссылку.
– Hide item on Mobile, скрыть пункт меню на мобильных устройствах.
– Hide item on Desktop, скрыть пункт меню на компьютерах.
– Menu item Align, расположение пункта меню.
– Sub Menu Align, расположение меню второго уровня.
– Hide sub menu on Mobile, скрыть меню второго уровня на мобильных устройствах.
– Сохраните изменения.
Далее, слева перейдите на вкладку – Icon. Здесь можно выбрать иконку, которая будет отображаться рядом с пунктом меню.
Всё готово! Сохраните меню, перейдите на сайт и наслаждайтесь результатом!
Внимание! После включение мега меню, стиль вашего меню по умолчанию будет полностью изменён. Вам нужно будет настраивать стиль меню в настройках, на вкладке “Menu Themes”.
Остались вопросы? Напиши комментарий! Удачи!
Как сделать выпадающее меню в WordPress
Как вы передвигаетесь на автомобиле в незнакомом городе? Ориентируетесь по направляющим знакам, чтобы доехать до пункта назначения. Они расставлены в нужных местах, указывают, куда повернуть и какое расстояние проехать. Ситуация с навигацией на сайте обстоит аналогичным образом.
Необходимо показать подробный путь посетителю до той страницы, которая ему требуется. С вами Андрей Зенков, автор блога Start Luck. Сегодня мы поговорим, как сделать выпадающее меню в WordPress.
Чтобы повысить собственную продуктивность, нужно знать о выражении Ларри Пейджа (сооснователь Google): «Всегда делайте больше, чем от вас ожидают». Тут всё просто: если от вас ждут одного сделанного сайта, сделайте два. Если от вас ждут 5 продаж, сделайте 10. Следуя этому правилу, можно добиться невероятных высот!
Почему я рассматриваю вариант с выпадающей навигацией? С помощью такой можно указывать разделы и подразделы в неограниченном количестве. Простенький пример многоуровневого меню:
- Главная страница
- Автозапчасти
1. ВАЗ
1.1 2112
1.1.1 Двигатель
1.1.1.1 Прокладки для клапанов
Допустим, человеку нужны прокладки для клапанов на свой автомобиль — ВАЗ 2112. Благодаря вышеуказанному образцу он моментально находит то, что ему требуется, проходя путь от главной страницы. Ваша задача, уважаемые читатели, на первом этапе разработать хорошую структуру, а затем реализовать её в техническом плане, то есть сделать навигацию. Как это сделать, я вам расскажу прямо сейчас.
Плагины навигации для WordPress
Что же такое плагин в нашем случае? Это то, в чём уже содержится готовое решение, то есть наша менюшка. От вас потребуется лишь внести простые настройки внешнего вида и наслаждаться полученным результатом. Это то же самое, что использоваться математические формулы. Даётся каркас с переменными, вы просто указываете свои значения и получаете результат, который является решением задачи.
Нельзя забывать о том, что мы сейчас живём в эпоху мобильного трафика. Огромное количество людей заходят на сайты через свои смартфоны и планшеты. Поэтому важно адаптировать дизайн ресурса под таких пользователей. Я расскажу о нескольких плагинах, которые адаптированы под мобильные устройства.
Это самый простой вариант, с помощью которого можно быстро сделать боковое вертикальное меню. Распространяется на бесплатной основе.
Главная особенность — множество параметров внешнего вида. Вы сможете настроить по собственным вкусам анимацию появления выпадающих подразделов, перехода между разделами и многое другое. На выходе получается интересный вариант в стиле accordion (такая навигация, когда один блок с подразделами автоматически закрывается при наведении курсора на другой блок, сравнение идёт от растяжки мехов гармошки).
Покопавшись в настройках, можно прийти к оптимальному результату, который вписывается в общее оформление вашего проекта. Чтобы вам было проще разобраться во всех конфигурациях, я нашёл хорошее видео:
Единственный минус — маленькое количество готовых скинов. Вам доступно несколько тем с разной расцветкой. Чтобы меню отображалось посетителям, не забудьте его активировать в разделе «Внешний вид» и установить в нужной части сайта.
Ещё одно простое решение, похожее на предыдущий вариант, с помощью которого можно создать симпатичную навигацию за 10-15 минут. Этот плагин нравится мне возможностью делать не только вертикальное меню, но и горизонтальное.
Работает на WordPress 3.5+. Устанавливается в любые темы. Для настройки не понадобится разбираться со сложными кодами. Все конфигурации расположены в удобной таблице. Найти Admin Menus Fixed можно в разделе «Плагины» в панели управления вашего проекта.
Одна из самых любимых моих разработок. Если вам нужна МЕГА навигация с красивым оформлением, то это именно то, что вы ищите. Горизонтальное, вертикальное, фиксированное — любое меню, какое вы только пожелаете.
Тут у нас появилось новое понятие — меню с фиксацией. Это удобный вариант для контентных проектов с большими статьями. Изначально оно располагается в привычном месте, но как только пользователь начинает листать страницу вниз, менюшка фиксируется в самом верху окна. Какие преимущества? Человеку, дочитавшему статью, не потребуется листать вверх до начала страницы, ведь меню уже здесь, рядом с ним! Пример — Смотреть.
Этот плагин обладает множеством настроек внешнего вида и анимаций. Внимательно изучив их, вы сможете создать красивую навигацию с разнообразными эффектами. Доступно шесть скинов, для которых можно выбрать одну из шестнадцати цветовых палитр. Блоки можно снабдить различными иконами.
Набор JQuery Mega Menu Widget включает в себя более 430 картинок. Функционал позволяет создать меню для размещения в футере. Такую возможность трудно найти в существующих плагинах. Обзор всех возможностей можете посмотреть в коротком видео:
Готовое решение для творческих личностей. Включает в себя огромное количество стилевых решений, возможность добавление иконок, многочисленные настройки анимаций и многое другое. С настройками можно просидеть несколько часов не потому, что они трудные (всё наоборот, они очень простые), а потому, что здесь открывается большой простор для воображения.
С UberMenu можно настроить внешний вид многоуровневой навигации под свой шаблон. Благодаря интуитивно понятному интерфейсу вы быстро разберётесь со всеми конфигурациями.
Плагин очень похож на предыдущий вариант. В распоряжении пользователя — пять готовых скинов, которые можно настроить под свои нужды. Присутствует поддержка иконок, существует возможность настройки анимации и многое другое. Опять же, интерфейс сделан так, чтобы любой начинающий пользователь разобрался в параметрах. Поэтому с конфигурациями у вас проблем не возникнет. Демонстрационные варианты можете посмотреть на странице — nextendweb.com.
Какие можно сделать выводы?
Что же мы имеем по факту? Наша любимая WordPress, как и всегда, предлагает нам массу готовых решений, которые избавляют нас от рутинной работы. На разработку уникального меню при помощи кода может уйти несколько дней (это не считая долгих месяцев, потраченных на изучение основных программных языков). Вам же нужно просто создать структуру, выбрать внешний вид и настроить анимации.
Если же вас интересует изучение программных языков, можете ознакомиться с курсом Михаила Русакова по последним версиям HTML и CSS. После прохождения всех уроков, вы сможете создавать не только простенькие горизонтальные менюшки, но и другие элементы, а также небольшие сайты.
Не забывайте, что от хорошей навигации во многом зависит успешность проекта. Например, в случае интернет-магазина качество структуры и меню влияет на конверсию и конечную прибыль. В контентом проекте влияет на поведенческие факторы.
После моего сегодняшнего рассказа вы сможете сделать собственное красивое меню за 10-15 минут. А на этом мой рассказ заканчивается. Не забудьте подписаться на мой блог, чтобы быть в курсе новых публикаций.
С вами был Андрей Зенков, увидимся уже совсем скоро!
Как создать раскрывающееся меню в WordPress (Руководство для начинающих)
Вы хотите создать раскрывающееся меню и добавить его на свой веб-сайт WordPress?
В раскрывающемся меню отображается список ссылок при наведении указателя мыши на элемент в меню.
Мы используем раскрывающееся меню на WPBeginner, продолжайте и наведите указатель мыши на меню навигации вверху.
В этом руководстве для начинающих мы покажем вам, как легко создать раскрывающееся меню в WordPress с пошаговыми инструкциями.
Зачем нужны раскрывающиеся меню в WordPress?
WordPress поставляется со встроенной системой управления меню, которая позволяет легко добавлять меню навигации на ваш сайт WordPress.
Меню навигации — это ссылки на основные страницы вашего веб-сайта, которые обычно отображаются вверху в виде горизонтальной строки рядом с логотипом веб-сайта.
Если вы начинаете блог или создаете веб-сайт с несколькими страницами, вы можете добавить их в одну строку.
Однако, если у вас есть интернет-магазин или большой веб-сайт, вы можете добавить больше ссылок в меню навигации.
Выпадающие меню помогают решить проблему с ограниченным пространством, показывая ссылки меню только тогда, когда пользователь наводит курсор мыши на родительский элемент. Они также позволяют вам организовать структуру меню по темам или иерархии.
Наконец, они тоже очень красиво выглядят.
При этом, теперь давайте посмотрим, как вы можете легко создавать раскрывающиеся меню WordPress, добавляя их на свой сайт.
Видеоурок
Подписаться на WPBeginner
Если вам не нравится видео или вам нужны дополнительные инструкции, продолжайте читать.
Шаг 1. Выбор темы с помощью раскрывающегося меню
WordPress поставляется со встроенной системой управления меню, но отображение этих меню полностью зависит от вашей темы WordPress.
Почти все темы WordPress по умолчанию поддерживают раскрывающиеся меню.Однако некоторые темы могут не иметь надлежащей поддержки меню.
Убедитесь, что вы используете тему WordPress, которая поддерживает раскрывающиеся меню.
Как узнать, поддерживает ли используемая вами тема раскрывающееся меню?
Вы можете просто посетить веб-сайт темы, где вы найдете ссылку на демонстрацию темы. Оттуда вы можете увидеть, отображается ли демонстрация раскрывающегося меню в меню навигации.
Если это не так, вам нужно найти тему WordPress, которая подходит.
См. Наше руководство о том, как выбрать идеальную тему WordPress для вашего сайта.
Вот несколько отличных тем, которые поддерживают выпадающее меню из коробки.
- Astra — это многоцелевая тема WordPress, которая поставляется с несколькими стартовыми сайтами и множеством функций.
- StudioPress — эти профессиональные темы, созданные на основе структуры тем Genesis, оптимизированы для производительности.
- OceanWP — популярная тема WordPress, подходящая для всех типов веб-сайтов.
- Ultra — Созданная на основе конструктора Themify тема WordPress с перетаскиванием и перетаскиванием поставляется с красивыми шаблонами и гибкими параметрами тем.
- Divi — популярная тема от Elegant Themes, которая использует конструктор страниц Divi и поставляется с множеством функций перетаскивания, включая раскрывающиеся меню.
Темы
При этом давайте посмотрим, как создать раскрывающееся меню WordPress.
Шаг 1. Создание меню навигации в WordPress
Если вы уже настроили меню навигации на своем веб-сайте, вы можете перейти к следующему шагу.
Давайте сначала создадим простое меню.
Перейдите на страницу Внешний вид »Меню и щелкните ссылку« Создать новое меню »вверху.
Затем вам нужно указать имя для вашего меню навигации. Это имя не будет публично отображаться на вашем веб-сайте. Название меню предназначено для того, чтобы помочь вам идентифицировать меню в административной области WordPress.
Введите имя для своего меню и затем нажмите кнопку «Создать меню».
WordPress создаст для вас новое пустое меню.
Давайте добавим верхние ссылки в меню навигации. Эти элементы появятся в верхнем ряду вашего меню.
Просто выберите страницы, которые вы хотите добавить, в левом столбце и нажмите кнопку «Добавить в меню». Вы также можете выбрать записи блога, категории или добавить собственные ссылки.
Теперь вы увидите, что эти страницы появятся в правом столбце вашего нового меню.
Шаг 2. Добавление подпунктов в меню
Подпункты — это элементы, которые появляются внутри раскрывающегося меню.В зависимости от того, как вы хотите организовать свои меню, вы можете добавить их под любой из существующих пунктов.
Для этого урока мы добавим категории по ссылке в блоге.
Просто выберите элементы, которые вы хотите добавить, в левом столбце, а затем нажмите кнопку «Добавить в меню». Теперь ваши товары появятся в правом столбце.
Однако эти ссылки будут отображаться как обычные элементы. Нам нужно сделать их подпунктом родительского меню.
Вы можете просто перетащить элемент меню и поместить его под родительским элементом.Сдвиньте его немного вправо, и он станет подпунктом.
Повторите процесс для всех ссылок, которые вы хотите отображать в раскрывающемся меню.
По завершении не забудьте нажать кнопку «Сохранить меню», чтобы сохранить изменения.
Шаг 3. Опубликуйте раскрывающееся меню
Если вы редактируете меню, которое уже существует на вашем веб-сайте, оно сразу же начнет отображаться на вашем веб-сайте.
Однако, если это новый пункт меню, теперь вам нужно выбрать расположение темы для отображения этого меню.
Темы
WordPress могут отображать меню в разных местах. Каждая тема определяет свое собственное расположение меню, и вы можете выбрать, какое меню вы хотите в нем отображать.
Вы найдете эту опцию в правом столбце в разделе «Настройки меню». Выберите параметр рядом с параметром «Отображать местоположение» и нажмите кнопку «Сохранить меню».
Теперь вы можете посетить свой веб-сайт, чтобы увидеть раскрывающееся меню в действии.
Советы по созданию интерактивных раскрывающихся меню
Меню навигации важны, потому что это первое место, куда пользователи будут смотреть, если хотят увидеть конкретную информацию.
Правильное их использование поможет вашим пользователям ориентироваться на вашем сайте. Это также поможет вам получить больше просмотров страниц, конверсий и продаж на вашем сайте.
Вот несколько советов, как сделать ваши навигационные меню более интерактивными с помощью раскрывающихся меню.
1. Вы можете создавать многоуровневые раскрывающиеся меню
Если сделать ссылку подпунктом другой ссылки, она появится в раскрывающемся меню. Вы также можете добавить подпункт под другим подпунктом, чтобы создать многоуровневые раскрывающиеся меню.
Ваша тема автоматически покажет их в виде подменю в раскрывающемся списке.
2. Вы также можете создать несколько раскрывающихся меню
Вы можете создать раскрывающийся список под любой верхней ссылкой в вашем меню. Вы даже можете добавить несколько раскрывающихся меню в главное меню навигации.
3. Создание меню с предварительным просмотром в реальном времени
Если ваше меню становится слишком сложным, вы можете переключиться на предварительный просмотр.Перейдите в «Внешний вид » »Настройте , чтобы запустить настройщик живой темы.
Оттуда щелкните вкладку «Меню» и выберите меню навигации. Теперь вы увидите редактор меню перетаскивания в левом столбце с предварительным просмотром вашего сайта на правой панели.
4. Создание большого мегаменю в виде выпадающего списка в WordPress
В раскрывающихся меню отображается только одно раскрывающееся меню. Что, если вы хотите показать полную структуру своего веб-сайта в виде мегаменю, которое появляется только при наведении курсора на главное меню?
Мегаменю действительно отображаются в виде раскрывающегося меню, но они могут отображать гораздо больше ссылок, подменю и многое другое.Подробные инструкции см. В нашем пошаговом руководстве о том, как создать мегаменю в WordPress.
Мы надеемся, что эта статья помогла вам научиться легко создавать раскрывающееся меню в WordPress. Вы также можете ознакомиться с нашим руководством, как создать липкое плавающее меню навигации в WordPress и как добавить значки изображений в меню навигации в WordPress.
Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.
Как создать [для начинающих]
Хотите узнать, как настроить раскрывающееся меню WordPress?
В этой статье мы шаг за шагом проведем вас через создание раскрывающегося меню со скриншотами!
Вы можете делать все с помощью основных функций WordPress — нет необходимости в сторонних плагинах. Давайте погрузимся в…
Как создать раскрывающееся меню WordPress с основными функциями
Вашим первым шагом должно быть подтверждение того, что ваша тема поддерживает раскрывающиеся меню.К сожалению, не все темы поддерживают раскрывающееся меню. Например, тема Hestia включает встроенные функции для создания как раскрывающихся, так и мегаменю.
Если вы не уверены, проверьте документацию по вашей теме, чтобы узнать, поддерживаются ли раскрывающиеся меню.
Если это так, то вы можете воспользоваться самым популярным способом создания раскрывающегося меню WordPress (и одним из самых простых).
Еще лучше? Если вы решите создать раскрывающееся меню в WordPress с помощью параметра меню по умолчанию, вам не нужно беспокоиться об исчезновении меню при переключении темы или добавлении новых плагинов!
Для начала зайдите в панель управления WordPress и нажмите Внешний вид> Меню.
Если вы видите подсказку о создании меню, вам нужно, как говорится в подсказке, создать меню, чтобы начать работу. Я покажу вам это на шаге 1. Если, однако, у вас уже есть меню с некоторыми ссылками, вы можете сразу перейти к шагу 2.
Если у вас еще нет меню, введите имя в поле Имя меню , а затем нажмите кнопку Создать меню . Настоящее имя не имеет значения — просто запомните:
.
Шаг 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-адреса и «Меню» в качестве метки.Затем вложите все остальные пункты меню под этим:
Размещение всех навигационных ссылок под одной меткой меню
Результатом будет раскрывающееся меню, которое включает ключевые страницы вашего сайта.
Как вы можете видеть в элементе Categories ниже, любой контент, вложенный в подпункт, будет отображаться в подменю:
Подпишитесь на информационный бюллетень
Хотите узнать, как мы увеличили наш трафик более чем на 1000%?
Присоединяйтесь к 20 000+ других, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress!
Подпишитесь сейчас
Настоящее раскрывающееся меню навигации WordPress
Используя редактор перетаскивания меню таким образом, вы можете создать любой стиль и комбинацию раскрывающихся меню WordPress.Однако помните, что слишком большое количество пунктов меню может сбивать с толку пользователей.
Также лучше ограничить количество включаемых подменю, чтобы не загромождать навигацию.
Шаг 3. Добавьте изображения в меню WordPress
Если к концу шага 2 ваше раскрывающееся меню выглядит точно так, как вы его себе представляли, вы можете перейти к шагу 5, чтобы опубликовать его. Однако есть дополнительные шаги, которые вы можете предпринять, если хотите улучшить свое меню с помощью настроек.
Одна из тактик, которую следует рассмотреть, — это включить в меню визуальные элементы, чтобы обеспечить дальнейшее руководство для посетителей. Хотя описательные метки жизненно важны, иногда изображение или значок могут помочь пользователям быстрее определить, куда ведет конкретная навигационная ссылка.
Можно добавлять изображения с помощью настраиваемого CSS, о котором мы вскоре поговорим. Однако мы рекомендуем использовать плагин, например Menu Image, Icons Made Easy:
Выпадающее меню WordPress с изображениями
Таким образом, вам не нужно беспокоиться о коде, чтобы добавить визуального интереса к вашему раскрывающемуся меню.
Просто установите плагин и затем вернитесь в Внешний вид> Меню :
Раздел «Изображение меню» в редакторе меню
Вы увидите, что теперь есть варианты изображений для каждой страницы, которую вы включили в свое меню. Вы можете выбрать фото, размер и положение каждой страницы. Не забудьте сохранить изменения, когда закончите.
Шаг 4. Добавьте собственный CSS в раскрывающееся меню
Хотя это не рекомендуется для новичков, пользователи среднего и продвинутого уровней могут захотеть включить свой собственный стиль в свои раскрывающиеся меню WordPress.Однако, прежде чем сразу перейти к CSS, вам нужно добавить класс в свое меню.
Если вы пропустите этот шаг, ваш собственный CSS может вызвать проблемы для любых других меню на вашем сайте. Например, вы можете случайно применить стиль к своему нижнему колонтитулу, который вы имели в виду только для своего главного раскрывающегося меню.
В редакторе меню щелкните Параметры экрана в правом верхнем углу:
Вкладка «Параметры экрана» в редакторе меню
Затем установите флажок CSS Classes :
Флажок «Классы CSS» на вкладке «Параметры экрана»
Это добавит поле CSS Classes на каждую страницу в вашем меню:
Поле CSS Classes в редакторе меню
После добавления одного или нескольких классов CSS в элементы меню любой пользовательский код, включенный в таблицу стилей, будет применяться только к элементам в меню с указанным вами классом.
Теперь вы можете перейти к своей таблице стилей или Настройщику и приступить к работе над собственным стилем.
Шаг 5. Опубликуйте свое меню в лучших местах
Как только ваше раскрывающееся меню WordPress будет структурировано в соответствии с вашими потребностями и вы включите все необходимые настройки, вы будете готовы опубликовать его на своем сайте.
Этот процесс будет немного отличаться в зависимости от вашей темы и поддерживаемых ею мест меню. В этом примере мы собираемся использовать тему Twenty Twenty.
В редакторе меню прокрутите вниз до раздела Настройки меню :
Раздел «Настройки меню» в редакторе
Вы можете установить первый флажок, если хотите, чтобы новые страницы автоматически добавлялись в ваше меню. Если вы только начинаете работу со своим сайтом и еще не добавили все ключевые страницы, это может быть полезно. Однако будьте осторожны, чтобы случайно не добавить слишком много пунктов в свое меню.
Под этой опцией вы увидите список флажков, обозначающих различные области вашего сайта, где вы можете отображать свое меню.
Тема Twenty Twenty включает в себя различные области меню: Горизонтальное меню рабочего стола , Расширенное меню рабочего стола , Мобильное меню , нижнее меню , Социальное меню .
В данном случае созданное нами меню лучше всего подходит для горизонтального меню Desktop , которое находится в заголовке сайта:
Горизонтальное меню рабочего стола для темы Twenty Twenty
Вы также можете рассмотреть возможность перехода на вкладку Управление местоположениями в области меню на панели инструментов.Здесь вы можете увидеть все местоположения меню, которые поддерживаются вашей темой, а также то, какое меню вы назначили каждому из них:
Вкладка «Управление местоположениями»
При размещении меню может быть полезно посмотреть, как они будут выглядеть во внешнем интерфейсе.
Управление с возможностью предварительного просмотра
Нажмите кнопку «Управление с предварительным просмотром в реальном времени» , чтобы увидеть, как ваше меню будет отображаться в выбранном вами месте с помощью настройщика 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 в сегодняшнем меню!
Навигация по сайту имеет первостепенное значение при разработке вашего сайта.Это влияет на то, как ваши посетители взаимодействуют с вашим сайтом, продуктами. Их покупательское поведение будет определяться структурой вашего сайта.
Выпадающие меню (также называемые вложенными меню) помогают решить проблему с ограниченным пространством меню. Если у вас есть больше страниц веб-сайта, которые действительно важны и должны принадлежать меню, вам необходимо определить правильную иерархию страниц.
Важно: Перед тем, как начать техническую часть, вы должны выбрать тему, поддерживающую раскрывающиеся меню.Наша собственная тема 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 отображаются в виде маркированного или неупорядоченного списка (