Меню – это не только основа навигации по сайту WordPress. Важнейший элемент интерфейса пользователя напрямую влияет на целый ряд показателей, начиная с юзабилити и конверсии и заканчивая продвижением интернет-ресурса в поисковых системах. Без хорошо структурированного, функционального, красивого и удобного для посетителей меню невозможно сделать успешный сайт на WordPress. Давайте разберемся, как добавить и настроить меню в WordPress, какой должна быть структура этого элемента UI, в каких случаях достаточно типовых инструментов CMS, а когда не обойтись без расширений от сторонних разработчиков.
Структура меню
Во многих случаях структура уже определена спецификой сайта. Каждый типовой пункт меню интернет-магазина обкатан на миллионах торговых площадок и исследован вдоль и поперек программистами, специалистами по SEO и маркетологами. Сходная ситуация и с сайтами строительных компаний или производственных предприятий, бюро переводов или агентства недвижимости.
Чаще всего определиться со структурой можно за считанные минуты. Для этого достаточно посмотреть первые позиции выдачи Google или Яндекс по сайтам сходной тематики. В значительной части оставшихся случаев оптимальной структурой будет перенос в меню элементов иерархической таксономии сайта WordPress – категорий. Пользователю остается только добавить к рубрикам/подрубрикам типовые страницы наподобие «О нас/обо мне» или «Контакты».
Если же специфика вашего сайта не предполагает использования типовой структуры, есть смысл составить план ресурса, выделить наиболее важные страницы и вывести их в меню. Учтите, что внутренние страницы, предполагающие целевое действие со стороны посетителя, должны находиться максимум в одном клике от главной.
Иногда оптимальной будет связка двух меню: родительского и дочернего. В этом случае структура зависимого меню определяется «на лету» в зависимости от выбора пункта главного меню. На практике это может выглядеть так: в главном меню перечислены регионы РФ, а дочерняя структура выводится в зависимости от выбранного региона. То есть если мы выбираем «Москва и МО», в дочерней структуре появятся «Королев», «Химки», «Балашиха» и «Волоколамск». А если «Санкт-Петербург и Ленинградская область» – «Волхов», «Всеволжск», «Гатчина» и «Выборг».
Если страниц на сайте очень много, не обязательно добавлять в меню все. Большое количество пунктов и подпунктов может не упростить навигацию, а еще больше ее запутать. Возможно, какие-то страницы удобно группируются по определенным параметрам. Или есть смысл создать дополнительные страницы. Универсальной структуры не существует. Этот вопрос вам придется решать самостоятельно, руководствуясь логикой и спецификой интернет-ресурса. Когда определитесь со структурой, попытайтесь поставить себя на место посетителя вашего сайта WordPress. Подумайте, легко ли пользователю находить нужные пункты и подпункты, можно ли как-то упростить структуру меню.
Создание и редактирование меню в WordPress
В консоли управления на вкладке «Внешний вид» > «Меню» нужно ввести название нового меню в соответствующее текстовое поле, после чего кликнуть по ссылке «Создать меню». Чтобы отредактировать только что созданный элемент интерфейса, кликните по его названию в выпадающем списке, а затем нажмите кнопку «Выбрать».
Теперь нам нужно выбрать страницы, которые будут отображаться в новом меню в виде пунктов. Для этого отмечаем их галочками в соответствующей вкладке редактора («Самые свежие», «Все»). Выбранные страницы отобразятся в правой части экрана. Пункты меню можно перетаскивать мышкой, тем самым задавая порядок сортировки меню.
Здесь же можно задать иерархическую структуру с любым уровнем вложенности. Например, пункт «CMS» у нас будет родительским по отношению к подпунктам «Drupal», «Joomla», «WordPress». А названия систем управления содержимым будут, соответственно, дочерними элементами по отношению к «CMS». Если мы решим разбить подрубрику «WordPress» на «Уроки WordPress» и «Обучающее видео», у нас появится еще один уровень вложенности. Тогда подрубрика «WordPress» станет родительской для «Уроков…» и «Обучающего видео», но будет дочерней по отношению к пункту «CMS». Однако учтите, что большой уровень вложенности может не облегчить навигацию, а напротив, запутать ее. Чем сложнее иерархическая структура, тем труднее в ней ориентироваться.
Определившись со структурой, активируем только что созданный элемент интерфейса. В верхней части экрана кликаем по «Управлению областями», выбираем в выпадающем списке название нашего меню, после чего нажимаем на кнопку «Сохранить изменения». Создание и редактирование меню в боковой панели производится с помощью соответствующего виджета.
Функция PHP wp_nav_menu()
Настраиваемое меню регистрируется в файле functions.php функцией register_nav_menu(). Если нужно зарегистрировать несколько меню, используется функция register_nav_menus. Например:
register_nav_menus(array(
'top' => 'Меню в хедере',
'bottom' => 'Меню в футере'
));
Мы зарегистрировали два меню, верхнее с идентификатором ‘top’ и нижнее с идентификатором ‘bottom’. Теперь можно зайти в консоль управления и добавлять пункты и подпункты на вкладке «Внешний вид» > «Меню» как описано выше. Чтобы вывести созданные нами меню, нужно добавить их в шаблон функцией wp_nav_menu. В нашем случае элемент интерфейса с идентификатором ‘top’ будет выводиться через header.php, а ‘bottom’ – через footer.php. Функция wp_nav_menu может принимать в качестве аргументов 15 различных параметров. Более подробно об этом можно почитать в официальной документации PHP.
Меню в конструкторах страниц
Конструкторы страниц могут добавлять свои элементы управления меню. В Visual Composer дополнительные элементы находятся в библиотеке Visual Composer Hub. Загрузить их можно кликом по соответствующей иконке навигационной панели во Front-end редакторе. Однажды загруженные элементы автоматически добавляются в коллекцию элементов конструктора.
В конструкторе Elementor добавление настраиваемого меню навигации производится с помощью виджета Elementor Nav. В виджете добавляются эффекты анимации, задаются параметры выравнивания текста, настраивается мобильное меню, задается тип меню (горизонтальное, вертикальное, выпадающее). У каждого конструктора страниц своя специфика. Смотрите документацию к редактору, который используется на вашем сайте WordPress.
Плагины меню
Существует немало плагинов, расширяющих возможности создания меню на сайте WordPress. Например:
- Menu Image: загрузка изображений в меню;
- Max Mega Menu: создание и редактирование мега-меню;
- WooCommerce Menu Extension: вставка ссылок магазина в меню WordPress;
- Superfly Responsive Menu: расширение инструментария навигации WordPress;
- Nextend Accordion Menu: создание и редактирование меню типа «аккордеон»;
- Sticky Menu on Scroll: добавление «липкого» меню.
«Липкое» меню «приклеивается» к верхней части экрана и не уходит из зоны видимости пользователя при прокрутке страницы. «Аккордеон» представляет собой список с раскрывающимся содержимым. С его помощью удобно представлять блоки вопросов и ответов. Max Mega Menu и другие расширения с «Mega Menu» в названии служат для создания и редактирования мега-меню. Этот вариант оптимален при большом количестве категорий и необходимости вставки в меню изображений и иконок.
Superfly Responsive Menu может использоваться и как независимый инструмент, и как расширение стандартного функционала WordPress. Во втором случае вам просто нужно выбрать на странице опций Superfly элементы, ранее созданные на вкладке «Внешний вид» > «Меню» консоли управления. Особенности расширения Superfly Responsive Menu:
- поддержка различных типов меню;
- на 100% респонсивный дизайн;
- добавление кастомного кода HTML, шорткодов, виджетов;
- шрифты Google Fonts, дополнительные настройки параметров текста;
- вставка логотипа, фоновых изображений, иконок;
- расширенные настройки цвета, разделителей, границ;
- интеграция с социальными платформами (Facebook, Instagram, Twitter, Dribbble, Pinterest, Vimeo, YouTube, Skype, email, RSS);
- поддержка до 4 уровней вложенности;
- плавная прокрутка;
- библиотека иконок;
- настройки действий в зависимости от поведения пользователя (по клику, по наведению курсора мыши и так далее);
- расширенная поддержка мобильных платформ;
- красивые эффекты анимации CSS3.
Мы рассмотрели лишь малую часть плагинов, служащих для расширения возможностей создания и редактирования меню на сайте WordPress. Подобных расширений намного больше, описать их все в одной статье не представляется возможным.
Заключение
Вот мы и рассмотрели, как создавать и настраивать меню средствами CMS (административная панель) и с помощью расширений WordPress. Плагины позволяют создавать более сложные конструкции без вмешательства в код. Если вам нужно сделать «липкое» меню, которое всегда будет находиться в видимой части экрана, вставить в меню слайдер, иконки или фоновое изображение, без дополнительных расширений не обойтись. Прежде чем скачивать и устанавливать плагин, есть смысл изучить возможности конструктора. Возможно, в вашем редакторе уже есть необходимые вам функции. Или нужные элементы можно скачать из онлайн-библиотеки, такой как Visual Composer Hub для визуального конструктора страниц Visual Composer.
