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

Ключевые моменты

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

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

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

Давайте начнем процесс создания эффективного и эстетически приятного навигационного меню для вашего сайта на WordPress.

Что такое навигационное меню WordPress?

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

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

Как создать свое первое пользовательское навигационное меню?

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

Шаг 1: Доступ к панели управления WordPress 

Войдите в административную область WordPress, перейдя по адресу вашсайт.com/wp-admin и введя свои учетные данные.

Шаг 2: Перейдите в раздел «Меню» 

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

Шаг 3: Создайте новое меню 

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

Шаг 4: Добавьте элементы в меню 

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

Шаг 5: Организуйте элементы меню 

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

Шаг 6: Установите место отображения 

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

Шаг 7: Сохраните меню 

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

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

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

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

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

Вот пошаговое руководство о том, как создать выпадающие меню в WordPress:

Шаг 1: Войдите в административную панель WordPress.

Шаг 2: Перейдите в Внешний вид > Меню на левой боковой панели.

Шаг 3: Если вы еще не создали меню, нажмите на ссылку «создать новое меню» и введите имя для вашего меню. Затем нажмите кнопку Создать меню.

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

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

Шаг 6: Чтобы создать выпадающее меню, просто перетащите элемент меню немного вправо, под родительский элемент. Теперь этот элемент с отступом станет подпунктом родительского элемента, создавая выпадающее меню.

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

Шаг 8: После упорядочивания элементов меню и создания выпадающих меню убедитесь, что выбрано желаемое место отображения для меню (например, основное меню или меню нижнего колонтитула) в разделе «Настройки меню».

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

Шаг 10: Посетите свой сайт, чтобы увидеть вновь созданные выпадающие меню в действии.

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

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

Как добавить категории в меню WordPress?

Вот пошаговое руководство о том, как добавить категории в меню WordPress:

Шаг 1: Создайте категорию 

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

Шаг 2: Перейдите на экран «Меню» 

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

Шаг 3: Выберите меню для редактирования 

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

Шаг 4: Добавьте категорию в меню 

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

Шаг 5: Расположите категорию в меню 

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

Шаг 6: Сохранение изменений 

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

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

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

Как добавить пользовательские ссылки в навигационные меню WordPress?

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

Шаг 1: Войдите в консоль WordPress 

Получите доступ к админ-панели WordPress, войдя со своими учетными данными.

Шаг 2: Перейдите в раздел «Меню» 

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

Шаг 3: Выберите меню для редактирования 

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

Шаг 4: Добавьте пользовательскую ссылку 

В левой части страницы «Меню» найдите раздел Добавить элементы меню . Нажмите Пользовательские ссылки. Вы увидите два поля для ввода — «URL» и «Текст ссылки».

Шаг 5: Введите URL и текст ссылки 

В поле «URL» введите полный веб-адрес (включая https://) внешнего сайта или конкретной страницы на вашем сайте, на которую хотите сослаться. В поле «Текст ссылки» введите текст, который будет отображаться как пункт меню.

Шаг 6: Добавьте пользовательскую ссылку в меню 

Нажмите кнопку Добавить в меню, чтобы вставить пользовательскую ссылку в ваше навигационное меню WordPress. Теперь вы увидите пользовательскую ссылку в разделе «Структура меню» в правой части страницы.

Шаг 7: Упорядочьте пункты меню 

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

Шаг 8: Сохраните изменения 

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

Бонус: Если вы добавляете пользовательские ссылки, Bluehost включает бесплатный домен и SSL-сертификат в хостинг, обеспечивая безопасность и профессиональный вид всех ссылок в меню.

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

Как редактировать или удалить пункт меню в навигационных меню WordPress?

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

Шаг 1: Войдите в консоль WordPress 

Получите доступ к админ-панели WordPress, введя свои учетные данные.

Шаг 2: Перейдите в «Внешний вид» > «Меню» 

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

Шаг 3: Выберите меню для редактирования 

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

Шаг 4: Найдите пункт меню 

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

Шаг 5: Отредактируйте пункт меню 

Чтобы отредактировать пункт меню, нажмите на стрелку вниз справа от названия пункта. Это раскроет его параметры. Здесь вы можете изменить «Метку навигации» (текст, отображаемый в меню) и «Атрибут title» (текст всплывающей подсказки при наведении). После внесения изменений нажмите кнопку Сохранить меню.

Шаг 6: Удалите пункт меню

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

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

Как добавить навигационные меню в Редакторе всего сайта (FSE)?

Редактор всего сайта (FSE) — это недавняя функция, представленная в WordPress в рамках проекта Gutenberg. Она позволяет пользователям создавать и редактировать весь сайт, включая заголовки, подвалы и боковые панели, с помощью блочного редактирования. Следуйте шагам ниже, чтобы добавить навигационные меню в FSE.

Шаг 1: Откройте Редактор всего сайта 

Для начала перейдите в консоль WordPress и нажмите Внешний вид > Редактор (бета), чтобы открыть Редактор всего сайта.

Шаг 2: Выберите подходящий шаблон 

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

Шаг 3: Добавьте блок «Навигация» 

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

Шаг 4: Создайте или выберите меню 

После добавления блока «Навигация» у вас есть два варианта:

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

Шаг 5: Добавьте пункты меню 

Чтобы добавить элементы в меню, нажмите кнопку + внутри блока «Навигация». Вы можете добавлять различные типы элементов: Страницы, Записи, Категории и Пользовательские ссылки. Просто найдите нужный блок (например, «Ссылка на страницу») и нажмите на него, чтобы добавить в меню.

Шаг 6: Настройте пункты меню 

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

Шаг 7: Упорядочьте пункты меню 

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

Шаг 8: Стилизуйте и оформите меню 

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

Шаг 9: Сохраните изменения 

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

Бонус: С WonderBlocks и WonderThemes, включенными в хостинг Bluehost для WordPress, вы можете создавать заголовки, нижние колонтитулы и меню прямо в редакторе всего сайта без необходимости в дополнительных плагинах.

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

Как добавить меню WordPress в боковые панели и нижние колонтитулы?

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

Шаг 1: Создайте пользовательское меню

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

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

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

Шаг 3: Сохраните меню

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

Шаг 4: Добавьте меню в боковую панель или нижний колонтитул

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

Шаг 5: Добавьте виджет «Навигационное меню» в нужную область

Перетащите виджет «Навигационное меню» в область виджетов боковой панели или нижнего колонтитула, где должно появиться меню. После размещения виджета вы можете дать ему заголовок (опционально) и выбрать созданное ранее пользовательское меню из выпадающего списка.

Шаг 6: Сохраните настройки виджета

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

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

Различные способы отображения меню WordPress

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

Для большей гибкости современные блочные темы позволяют использовать блок «Навигация» для размещения меню в любом месте вашего макета, освобождаясь от предопределенных слотов. Хотя опытные пользователи могут использовать шорткоды для уникальных пользовательских отображений, стандартных инструментов обычно достаточно для новичков. Независимо от того, где вы размещаете свои меню, важно тестировать их на мобильных устройствах, чтобы убедиться, что они остаются удобными для пользователей. С хостингом Bluehost для WordPress ваш сайт получает преимущества оптимизации производительности, которая гарантирует, что ваши навигационные меню — будь то простые заголовки или сложные структуры нижних колонтитулов — загружаются мгновенно для бесшовного взаимодействия с посетителями.

Как Bluehost может помочь улучшить вашу навигацию в WordPress?

Создание интуитивно понятных меню — это только первый шаг к улучшению пользовательского опыта на вашем сайте. С Bluehost вы можете вывести свою навигацию и весь сайт на новый уровень:

• Используйте конструктор сайтов Bluehost для создания меню перетаскиванием и визуальной настройки вашего сайта.
• Наслаждайтесь оптимизированным хостингом WordPress, чтобы ваши выпадающие меню и рубрики загружались быстро, не замедляя работу сайта.
• Защитите ссылки в меню с помощью бесплатного домена и SSL-сертификата, включенных в каждый тариф хостинга Bluehost.
• Создавайте дизайн с помощью инструментов WonderSuite, таких как WonderBlocks и WonderThemes, чтобы создавать заголовки, нижние колонтитулы и меню прямо в редакторе всего сайта.
• Положитесь на круглосуточную поддержку WordPress, когда вам понадобится экспертная помощь в настройке или кастомизации.

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

Готовы создать бесшовную навигацию с хостингом Bluehost для WordPress?

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

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

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

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

Часто задаваемые вопросы