Как настроить и оптимизировать меню WordPress

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

В этой статье подробно рассмотрим, как настроить и оптимизировать меню WordPress.

Варианты настройки меню WordPress

Существует 2 основных типа тем ВордПресс:

• Классические темы, в которые встроен кастомайзер, позволяющий вносить целый ряд изменений в сайт (включая создание меню).
• Шаблоны на основе блоков. Они появились позже и с помощью них вы можете кастомизировать свой сайт за счет редактора.

В этом руководстве я покажу 2 способа создания меню в WP.

Вариант 1: Классический метод

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

Однако, если перейдете в «Внешний вид» > «Кастомизация», то увидите инструмент персонализации сайта, который содержит пункт «Меню».

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

Инструмент кастомизации доступен в классических темах ВордПресс, таких как знаменитая Astra (которую я буду использовать в этом уроке).

Вариант 2: Блок «Навигация»

С выходом версии WordPress 5.9 появился еще один тип тем: блочные. Они являются результатом проекта под названием Full Site Editing (впоследствии переименованного в редактор сайта).

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

При использовании такого типа темы вы можете перейти в редактор через «Внешний вид» > «Редактор» (в этом случае опции инструмента кастомизации будут скрыты).

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

Но сначала рассмотрим лучшие практики при создании меню.

Характеристики хорошего меню WordPress

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

Для этого меню должно обладать 3 характеристиками:

1. Ограниченное количество пунктов.
2. Лаконичные и понятные заголовки.
3. Минимальное количество подменю (если они вообще нужны).

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

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

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

Какие элементы можно добавить в меню

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

Как добавить ссылки в меню

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

Для этого добавьте кастомную ссылку и вставьте символ # в поле URL. После добавления элемента удалите #, чтобы не навредить SEO.

Как добавить записи в меню

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

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

Вы можете добавлять категории в меню. Это очень полезно для блогов.

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

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

А теперь приступим к делу и посмотрим, как создать собственное меню WordPress.

Создание меню WordPress с помощью блочной темы

Перейдите в редактор сайта WordPress, в меню «Внешний вид» > «Редактор». Затем нажмите «Навигация» в меню слева на экране.

Нажмите на правой стороне экрана (на вашем сайте). Баннер сообщит, что для изменения этого блока необходимо отредактировать шаблон, поэтому кликните «Редактировать шаблон».

Затем нажмите на значок «Настройки» в правом верхнем углу экрана, а затем на ваше меню.

В этом интерфейсе вы можете:

• Редактировать существующее меню, нажав на него.
• Создать новое меню, кликнув на 3 вертикальные точки в меню справа, а затем на «Создать новое меню».

Как структурировать меню WordPress

Ваше меню представлено в блоке «Навигация». Можете добавлять, удалять и кастомизировать свои меню так же, как и любой другой блок WP («Заголовок», «Абзац», «Изображение» и т. д.).

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

• Изменять порядок пунктов.
• Добавлять ссылки на подменю.
• Удалять или добавлять пункты с помощью значка «+».

Обратите внимание, что в меню можно добавлять целый ряд блоков:

• Ссылку на страницу.
• Кастомный линк.
• Панель поиска.
• Значки социальных сетей.
• Ссылку на категорию или тег: полезно, если у вас есть блог.
• Линк для входа/выхода.

Как кастомизировать меню

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

На вкладке «Настройки» можете:

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

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

Вкладка «Стили» позволяет редактировать:

• Цвета меню (текст, фон, подменю и т. д.).
• Типографику (размер и семейство шрифтов, оформление текста и т. д.).
• Расстояние между пунктами меню и ширину контента.

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

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

До сих пор я редактировал главное меню, уже присутствующее в шапке сайта.

Что делать, если хотите создать новое в другом месте на вашем проекте?

Благодаря редактору сайтов ВордПресс это очень просто. Перейдите в «Внешний вид» > «Редактор». Выберите шаблон или элемент темплейта, в котором хотите отобразить меню.

Где бы вы ни хотели, чтобы появилось меню, добавьте блок «Навигация».

Создание меню WordPress с помощью классической темы

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

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

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

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

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

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

Как добавить страницы в меню WordPress

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

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

Чтобы добавить страницу в меню, нажмите на значок «+» перед ее названием.

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

Как добавить ссылки в меню

Чтобы добавить кастомную ссылку в меню, введите нужный URL в поле «URL», а затем текст линка (анкор) в «Текст ссылки».

Далее кликните «Добавить в меню», чтобы включить ссылку.

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

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

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

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

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

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

Как упорядочить пункты меню WordPress

Изменение порядка элементов

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

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

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

Создание подменю (раскрывающееся меню)

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

В приведенном примере категории «Закуски», «Основные блюда» и «Десерты» являются подменю страницы «Рецепты».

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

Как изменить пункты меню

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

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

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

Для удаления пункта из меню используется ссылка «Удалить».

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

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

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

Если установить флажки, в элементах меню появятся новые поля.

Давайте посмотрим, что означают эти опции:

• «Цель ссылки»: позволяет отобразить окно, открывающее лендинг в новой вкладке. В случае внешней ссылки установка этого флажка позволит удержать пользователей на сайте дольше.
• Атрибут title: эта опция используется для отображения описания пункта меню при наведении курсора на него. Поэтому ее польза снижена, и сейчас она используется очень редко.
• Классы CSS: если хотите кастомизировать внешний вид пункта меню с помощью CSS, введите нужные классы в это поле.
• Связь ссылки (XFN): если ссылаетесь на сайт и хотите указать связь между вами, можете использовать свойства XFN. На практике я никогда этим не пользовался. Скорее всего, это не понадобится.
• Описание: некоторые темы позволяют отображать описание под названием пункта меню, но такие темы встречаются довольно редко.

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

Как настроить меню

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

Здесь есть несколько флажков на выбор:

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

Доступные места для меню будут иметь разные названия в зависимости от темы. Обычно вы найдете поле для главного меню (основного меню).

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

Как управлять расположением меню

Теперь давайте посмотрим, что находится на второй вкладке страницы управления меню WP, называемой «Управление расположением».

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

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

Список меню на этой вкладке будет отличаться в зависимости от темы.

Нажатие на «Редактировать» перенесет вас на страницу редактирования соответствующего меню.

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

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

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

Для этого создайте новое меню и не назначайте ему место.

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

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

Как создать удобное мобильное меню в любой теме через WPBar

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

Что такое WPBar

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

Как установить WPBar

Плагин отсутствует в репозитории WordPress, поэтому его установка проводится путем прямой загрузки на сайт. Для этого:

1. Перейдите на WPShop и приобретите расширение на нужное количество доменов.

2. Из личного кабинета скачайте ZIP-архив с модулем.
3. В настройках нужного сайта перейдите «Плагины» — «Добавить плагин». Откроется страница, где необходимо нажать «Загрузить плагин».

4. Далее остается добавить выгруженный ранее ZIP-архив, установить его и активировать.

После установки расширения в левом меню WordPress появится пункт «WPBar».

Создание мобильного меню

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

Процесс создания меню состоит из 4 этапов:

• Выбор активных элементов. Подробнее про доступные в расширении компоненты я рассказал ниже.

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

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

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

Список доступных элементов для меню

В WPBar имеется свыше 10 элементов, которые одним кликом добавляются в меню:

• Главная. Быстрый выход на главную страницу. Пункт будет подсвечен, если пользователь уже на ней находится.
• Ссылка. Переход на любую страницу на сайте или вне сайта. Можно указать, чтобы линк открывался в новом окне.
• Поделиться страницей. Шаринг в один клик ссылки на текущую страницу. Используются встроенные функции браузера. Если они недоступны, то линк просто будет скопирован в буфер обмена.
• Меню. Во всплывающем окне отображает элементы выбранного меню сайта, стандартно заданного в параметрах WordPress.
• Контентный блок. Элемент, куда можно добавить любой контент в формате HTML-кода, и он будет обработан.
• Поиск. Есть 3 варианта — по записям, по товарам, по произвольным типам контента.
• Содержание. Автоматически формирует оглавление страницы по заголовкам.
• Свой элемент. Можно через HTML задать, что будет отображаться на месте данного пункта меню, например, логотип.
• JavaScript onClick. При нажатии исполняется любое JS действие, определенное вебмастером. Например, можно запускать различные маркетинговые активности, вроде «колеса фортуны» или опросов.
• Корзина WooCommerce. Иконка для быстрого перехода в корзину. Она является динамической, и на ней отображается число добавленных в корзину товаров.
• Личный кабинет WooCommerce. Возможность для покупателя зайти в свой личный кабинет.

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

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

WPBar со скидкой

Заключение

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