Меню на WordPress: как создать и добавить на сайт
06 февраля 2023 Меню сайта — важнейшая его часть, которая непосредственно влияет на юзабилити, простоту навигации и конверсию сайта. В свою очередь, WordPress (WP) — самая популярная бесплатная CMS в мире, на которой работают миллионы сайтов. Поэтому часто начинающие вебмастера, использующие данную систему управления контентом, задают вопрос: как создать меню в WordPress?
В нашей статье мы дадим подробную инструкцию по созданию меню для сайта на ВордПресс, а также покажем, как в дальнейшем отредактировать это меню и добавить в него выпадающие элементы.
Изображение от Freepik.
Создание меню для сайта на WordPress
Чтобы сделать меню для сайта на WP, необходимо выполнить следующие шаги:
- Входим в панель администратора (админку).
- Переходим на сайт и нажимаем кнопку «Настроить».
- В настройках темы находим раздел «Меню».
- Переходим в этот раздел и нажимаем «Создать новое».
- Придумываем понятное название и выбираем область отображения: мы создаем основное меню, которое будет показываться в шапке сайта, поэтому выбираем соответствующую область.
- Нажимаем «Добавить элементы» и выбираем пункты, которые хотим отобразить. Вы можете добавить произвольную ссылку, страницы, записи, рубрики, метки и форматы. Мы выбрали три рубрики (одежда для детей, женщин и мужчин) и страницу «О компании».
- Нажимаем «Опубликовать», переходим на сайт и убеждаемся, что все готово.
Отлично, теперь вы знаете, как быстро и просто выводить меню в WordPress. Далее разберемся, как его отредактировать и добавить выпадающие элементы.
Как отредактировать меню
Сделать это очень просто — переходим в меню через настройки (как мы показывали ранее). Выбираем созданное ранее меню и нажимаем «Добавить элементы». Здесь можно удалить старые пункты (просто нажмите на красный крестик), добавить новые, а также изменить порядок отображения элементов с помощью мыши.
Области отображения меню
Доступные области отображения зависят от выбранной темы. Мы используем «Twenty Twenty-One» — эта тема может показывать меню в двух местах.
Нажимаем «Посмотреть все места» и выбираем в качестве дополнительного меню то, которое мы создали ранее.
Оно будет отображаться в конце страницы перед футером. Если вы хотите создать дополнительное меню с другими элементами, то создайте новое меню и задайте его в качестве дополнительного.
Как сделать выпадающее меню
Переходим в настройки и добавляем новые пункты — страницы «Производство», «Доставка и оплата» и «Условия возврата». Мы хотим, чтобы они были выпадающими элементами из раздела «О компании». Для этого берем каждый пункт и перетаскиваем его чуть правее с помощью мыши.
Опубликуем изменения и переходим на сайт. Теперь при наведении на страницу «О компании» отображается выпадающее меню.
Заключение
Отлично, теперь вы знаете, как добавлять и настраивать меню на сайте на ВордПресс. В «Евробайт» вы можете установить эту CMS автоматически в несколько кликов прямо из панели управления хостингом, а при необходимости наши специалисты поддержки бесплатно перенесут ваши сайты от других хостинг-провайдеров.
Похожие статьи
Google Search Console: руководство по работе 27 февраля 2023
Просто запустить сайт для продвижения в интернете недостаточно. Чтобы он стал приносить плоды в виде трафика и заказов, его необходимо раскручивать.
Яндекс.Вебмастер — что это и как с ним работать 20 февраля 2023
Поисковые системы являются главными площадками для продвижения сайтов в интернете. Яндексом и Google пользуются все, поскольку это самый удобный способ быстро найти нужную информацию.
Ошибка 404 (Page Not Found) 13 февраля 2023
Каждый пользователь интернета хотя бы раз сталкивался с сообщением «Ошибка 404 (Страница не найдена)». Оно появляется, когда мы пытаемся открыть некорректную ссылку и попасть на страницу, которой не существует на данном сервере.
Как в WordPress создать выпадающее меню (руководство для начинающих)
В этом руководстве для начинающих мы расскажем, как создать выпадающее меню в WordPress.
Зачем использовать выпадающие меню в WordPress?
Навигационные меню содержит ссылки на основные страницы сайта, которые обычно отображаются сверху в виде горизонтальной строки.
Выпадающие меню решают проблему ограниченного пространства. Они отображают ссылки меню только тогда, когда пользователи наводят указатель мыши на родительский элемент. А также позволяют организовать структуру меню по темам или иерархии.
Выбор темы оформления с поддержкой выпадающего меню
Почти все темы оформления WordPress по умолчанию поддерживают выпадающие меню. Но не все. Поэтому нужно убедиться, что используется тема, которая поддерживает выпадающие меню. Вот несколько из них:
Создание выпадающего меню в WordPress
Шаг 1. Создание меню навигации в WordPress
Перейдите в меню « Внешний вид» — «Меню» и нажмите кнопку « Создать новое меню» .
Далее введите название меню навигации.
Затем нажмите кнопку « Создать меню» . После этого WordPress создаст новое пустое меню.
Чтобы добавить в меню навигации ссылки верхнего уровня, выберите страницы, которые вы хотите добавить в меню. Это можно сделать в левом столбце. Затем нажмите кнопку « Добавить в меню» .
После этого выбранные вами ссылки появляются в правом столбце и созданном меню.
Шаг 2. Добавление подпунктов в меню
В рамках этого руководства мы добавим в подпункты категории материалов блога. Для этого выберите в левом столбце элементы, которые вы хотите добавить в меню и нажмите « Добавить в меню» .
Но пока эти ссылки будут отображаться как обычные пункты меню. Их нужно сделать подпунктами путем перетаскивания под родительский элемент.
Повторите этот процесс для всех ссылок раскрывающегося меню. Когда вы закончите, не забудьте нажать кнопку « Сохранить меню» .
Шаг 3. Опубликуйте выпадающее меню
Темы оформления WordPress могут отображать меню в разных местах. Каждая тема оформления поддерживает определенные области для размещения меню. Они перечислены в разделе « Настройки меню» . Выберите вариант рядом с параметром « Область отображения» и нажмите кнопку « Сохранить меню» .
Теперь посетите сайт, чтобы увидеть выпадающее меню в действии.
Советы по созданию интерактивных выпадающих меню
Вот несколько советов о том, как сделать навигацию более интерактивной с помощью выпадающих меню.
1. Используйте многоуровневые выпадающие меню
Можно добавить подпункт ниже другого подпункта, чтобы создать многоуровневое выпадающее меню.
Используемая тема оформления автоматически отобразит подпункты в виде подменю внутри выпадающего меню.
2. Создайте несколько выпадающих меню
Вы можете создать выпадающий список для любого пункта меню верхнего уровня. А также добавить сразу несколько выпадающих меню в главное меню навигации.
3. Создавайте меню с помощью предварительного просмотра
Если меню становится слишком сложным, можно переключиться на визуальный предварительный просмотр. Для этого перейдите в меню « Внешний вид» – «Настроить» .
Затем перейдите на вкладку « Меню» и выберите необходимое меню навигации. После этого вы увидите визуальный редактор с областью предварительного просмотра сайта.
4. Создание большой навигации в виде выпадающего меню WordPress
Мегаменю отображаются в виде выпадающего меню. Но они могут отображать гораздо больше ссылок, подменю и многое другое.
Мы надеемся, что эта статья помогла вам понять, как создать выпадающее меню в WordPress.
Вадим Дворников автор-переводчик статьи « How to Create a Dropdown Menu in WordPress (Beginners Guide) »
Создание простого и выпадающего меню на WordPress
Сегодня, мы с вами поговорим об одном из элементов навигации на сайте WordPress, а именно меню сайта, а точнее его создание и настройка. Начнем пожалуй с настройки обычного меню сайта, внешний вид которого определяется заданной темой на WordPress. Иногда, это может быть не самый лучший и привлекательный вид меню, иногда же наоборот. И так, чтобы настроить обычное меню, перейдите в административную панель сайта и выберите раздел Внешний вид/Меню.
Сегодня, мы рассмотрим настройку меню которая актуальна для версии WordPress 4.4. Итого, перейдя на страницу меню, выберите первую вкладку «Редактировать меню», дайте название будущему меню и сохраните его.
Далее, в зависимости от темы которая задана на сайте, в структуре меню, которую вам нужно задать ниже, вы указываете Области темы, а также Автоматическое добавление страниц.
Чтобы внести в меню нужные пункты, в колонке слева, вам нужно отметить нужные разделы. У нас это рубрики.
После добавления их в меню, они отразятся справа, в разделе «Структура меню».
На этом процесс настройки закончен, не забывайте сохранять изменения. Чтобы добавить созданное меню на сайт, перейдите во вкладку «Управление областями». Здесь будет подсказка о том, что добавление определенного количества меню предусмотрено активной темой оформления на сайте. В нашем случае можно добавить 2 меню. Мы выбрали одно, основное, которое мы создали и назвали Меню сайта.
Обязательно сохраняем изменения и смотрим результат на главной странице сайта.
Для того, чтобы создать выпадающее меню на сайте нам понадобиться установить плагин JQuery Vertical Mega Menu Widget. Это бесплатный плагин для добавления вертикального меню, в котором вы можете настроить второй или третий под уровни, так называемое «выпадание» слева или справа в зависимости от выбранной позиции.
Изначально нужно установить этот плагин. Идем в раздел Плагины/Добавить Новый и в поисковой строке вбиваем JQuery Vertical Mega Menu Widget. После нажимает Установить и Активировать для запуска плагина в работу.
Переходим дальше, где мы разберем создание выпадающего или под уровневого меню на собственном примере, используя рубрики. У нас тестовый сайт, на котором не так много заметок, поэтому мы заходим в раздел Записи/Рубрики для того, чтобы создать дополнительные, дочерние рубрики. Как видно, на изображении, мы создаем дочернюю рубрику под названием Тест в родительской рубрике Cool. Таких тестовых версий мы создадим несколько и в разных родительских рубриках.
После, выбираем раздел меню Внешний Вид/Меню. Где справа, в появившемся окне прописываем название будущего меню и можем указать области темы в настройках. В конце обязательно сохраняем изменения.
Теперь, мы переходим в раздел Рубрики которые отображены слева. Открываем вкладку все и отмечаем галочками те пункты меню, которые должны в итоге появится на сайте. Отметили и нажимаем «Добавить в меню».
После чего, все добавленные пункты отобразятся справа.
Но как вы могли заметить, все рубрики и под рубрики отображены на одном уровне. Нам же нужно, чтобы в некоторых рубриках отображались именно под рубрики. Для этого, мы перетаскиваем мышкой под рубрики, смещая их при этом немного вправо.
На этом робота с меню закончена, для того, чтобы меню отобразилось на сайте, нам остался один этап. С помощью ранее установленного плагина, мы настроим отображение меню в желаемом для нас виде. Переходим в раздел Внешний вид/Виджеты. Слева в доступных виджетах, мы находим JQuery Vertical Mega Menu Widget и перетаскиваем его в правую верхнюю часть под Боковую колонку. В открывшихся настройках указываем желанные данные. Цвет, название, вид анимации и не забываем сохранить.
После чего, вы можете просмотреть готовый результат уже на своем сайте.
Редактируем меню сайта
Меню является важнейшей составляющей любого сайта. Оно должно быть удобным и иметь простую навигацию, чтобы пользователи могли без труда находить нужные им разделы сайта. Достигается это благодаря созданию правильной структуры разделов и выпадающего меню.
Чтобы отредактировать нужное вам меню, сначала нужно перейти в административуню часть сайта нажав на соответствующую иконку в верхней панели управления.
Далее необходимо перейти в панель управления меню, находящуюся во вкладке Внешний вид > Меню в панели управления справа.
В верхней части открывшейся панели редактирования меню, выберите название меню которые вам нужно отредактировать и нажмите кнопку Выбрать.
Следующий этап — это добавление нужных вам страниц. Ставим галочку напротив пунктов которые нужно добавить и нажимаем кнопку Добавить в меню.
Пункты меню по умолчанию добавляются в конец списка. Чтобы поменять их порядок, перетащите их, зажав левой кнопкой мыши, вверх или вниз.
Чтобы сделать выпадающее меню, необходимо зажать левой кнопкой мыши на нужном пункте и перетянуть его левее под пункт меню, из которого будет выпадать ваше подменю.
Важно: не на всех сайтах меню рассчитано на вложенность.
Когда вы добавите и упорядочите все нужные вашему меню страницы, записи и рубрики не забудьте все сохранить, нажав Сохранить меню.
Другие статьи:
- Работа со сниппетами
- Редактирование мета-тегов