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

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

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

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

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

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

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

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

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

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

Итак, давайте посмотрим, как создать кастомное меню навигации в WordPress.

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

Чтобы создать меню навигации, нужно перейти на страницу «Внешний вид» > «Меню» в админ-панели WP.

Если не видите опцию «Внешний вид > «Меню» на своем сайте, а видите только «Внешний вид» > «Редактор», это означает, что в вашей теме включена функция полного редактирования сайта (FSE).

Оказавшись там, введите название для своего меню, например «Верхнее навигационное меню», а затем нажмите кнопку «Создать меню».

Это расширит область меню. Она будет выглядеть следующим образом.

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

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

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

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

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

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

Вот готовое к работе меню на сайте.

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

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

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

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

Вот как выглядит подменю на моем демо-сайте.

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

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

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

Просто выберите те, которые хотите добавить в меню. Затем нажмите кнопку «Добавить в меню».

Затем можете перетащить их в нужное место. Например, я поместил все эти категории под пунктом меню «Блог».

Вот как различные категории отображаются в навигационном меню на моем демо-сайте.

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

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

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

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

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

Затем возможно изменить название пункта меню. Вы также можете нажать «Удалить», чтобы полностью удалить ссылку из меню.

Если сложно работать с интерфейсом перетаскивания, можете перемещать элементы меню, нажав соответствующую ссылку «Переместить».

Добавление меню в полном редакторе сайта (FSE)

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

Чтобы добавить навигационное меню с помощью полного редактора сайта, перейдите в раздел «Внешний вид» > «Редактор» в дашборде WP.

В этом уроке я буду использовать стандартную тему Twenty Twenty-Three.

После входа в редактор перейдите на вкладку «Навигация» и разверните ее.

В левом столбце откроются новые параметры.

Здесь просто нажмите на значок «Редактировать» вверху.

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

Откроется окно. В нем вы можете выбрать один из вариантов в раскрывающемся меню.

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

После добавления элемента перейдите на вкладку «Стили» в колонке справа.

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

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

Добавление меню WordPress в сайдбары и футеры

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

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

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

Когда закончите, просто нажмите кнопку «Обновить».

Вот пример кастомного меню футера WordPress.

Бонус: создание удобного мобильного меню на WPBar

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

Здесь приходит на помощь плагин WPBar, разработанный для добавления на сайт навигационных панелей.

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

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

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

3. После этого определяется внешний вид меню. В плагине предусмотрены несколько пресетов, плюс есть детальные настройки.

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

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

Далее остается опубликовать меню и протестировать его работу на фронтенде. Ниже несколько примеров, как может выглядеть готовое меню на WPBar.

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

WPBar со скидкой

FAQ

Заключение

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