Создать удобную навигацию — одна из первых задач при разработке сайта на WordPress. От того, насколько быстро посетитель сможет найти нужную страницу или раздел, зависит не только удобство использования сайта, но и вероятность того, что он останется на нем дольше.
Содержание
Что такое плавающее меню на сайте
Плавающее (фиксированное) меню — это элемент навигации, который остается на экране во время прокрутки страницы. Пользователю не нужно возвращаться к началу сайта, чтобы открыть другой раздел — меню всегда находится под рукой.
Такой подход особенно полезен для интернет-магазинов, корпоративных сайтов, блогов и лендингов с длинными страницами. Постоянный доступ к навигации делает взаимодействие с сайтом быстрее и удобнее.
В WordPress создать плавающее меню можно несколькими способами: с помощью возможностей темы, собственного кода или специальных плагинов. Последний вариант считается наиболее простым и универсальным, поскольку не требует навыков программирования и предлагает гибкие настройки.
В этой статье мы покажем, как создать меню в WordPress на примере плагина WPBar — новой разработки WPShop. Команда WPShop уже 10 лет создает темы и плагины для WordPress, поэтому при разработке особое внимание уделяется стабильности работы, производительности и удобству настройки.
На примере WPBar разберем процесс создания меню, а заодно посмотрим, какие дополнительные возможности может дать современная навигационная панель.
Почему именно WPBar
В отличие от большинства плагинов, предназначенных исключительно для создания меню, WPBar представляет собой универсальную плавающую панель, которую можно адаптировать практически под любой тип сайта.
Например:
- Для интернет-магазина — разместить быстрые ссылки на каталог, корзину, избранное, уведомления или личный кабинет.
- Для корпоративного сайта — добавить кнопки звонка, контактов, формы обратной связи или популярных услуг.
- Для блога или информационного проекта — вывести ссылки на основные разделы, социальные сети, форму подписки или содержание статьи для удобной навигации по длинным публикациям.
Одним из главных преимуществ WPBar является гибкая адаптация под различные устройства. Можно создать отдельные панели для мобильных устройств, планшетов и компьютеров либо использовать одну панель, автоматически изменяя количество отображаемых элементов в зависимости от ширины экрана.
Благодаря такой гибкости плагин подходит практически для любого сайта на WordPress.
-10% на покупку WPBar
Как создать меню в WordPress
После установки и активации WPBar в админке панели WordPress появится новый раздел WPBar.
Перейдите в него и нажмите «Добавить новую панель».
Блок «Элементы»
Создание панели начинается с добавления ее элементов.
Нажмите кнопку «Добавить элемент» и заполните основные параметры:
- укажите название элемента — именно оно будет отображаться в панели;
- выберите источник иконки;
- при необходимости загрузите собственное изображение (хотя встроенной библиотеки обычно более чем достаточно);
- задайте URL страницы, на которую будет вести элемент;
- при необходимости включите открытие ссылки в новой вкладке.
Таким образом можно быстро собрать любую структуру меню буквально за несколько минут.
Каждый элемент панели имеет дополнительные параметры настройки.
Здесь можно:
- добавить собственные CSS-классы;
- изменить ширину элемента;
- выбрать расположение текста относительно иконки (вертикально или горизонтально);
- настроить отображение элемента на разных устройствах.
Например, отдельные кнопки можно показывать только на мобильных устройствах или наоборот — скрывать их на смартфонах и оставлять только на десктопной версии сайта.
Такой подход позволяет создавать действительно адаптивные панели без написания дополнительного кода.
После добавления всех элементов получаем полноценную панель навигации.
В нашем примере используется меню интернет-магазина, состоящее из четырех кнопок:
- Меню;
- Корзина;
- Уведомления;
- Аккаунт.
Даже такой простой набор уже значительно упрощает навигацию для пользователей.
Блок «Внешний вид»
После списка элементов расположен большой блок внешнего вида меню, позволяющий практически полностью изменить оформление панели без использования CSS.
Готовые пресеты. Если нет желания самостоятельно подбирать оформление, можно воспользоваться готовыми пресетами.
Достаточно выбрать понравившийся вариант — все основные параметры панели будут применены автоматически.
Раздел «Панель» отвечает за оформление всей навигационной панели.
Здесь доступны настройки внешних и внутренних отступов, цвета фона и текста, тени панели с возможностью отдельно настраивать смещение по каждой стороне, цвета тени, радиуса скругления, рамки (сплошной, пунктирной или точечной), цвета и толщина рамки, расстояния между элементами, размера шрифта, высоты строки, отображения подписей и порядок наложения (z-index).
Практически любой элемент оформления можно изменить несколькими кликами.
Во вкладке «Элементы» доступны параметры оформления отдельных кнопок панели.
Можно настроить внешние отступы, расстояние между элементами, цвет текста, фон элементов, цвет и фон активного элемента.
Отдельный раздел посвящен иконкам.
Здесь можно изменить размер иконок, основной цвет и цвет активной иконки.
Раздел «Меню» отвечает за отображение подписей.
Доступны настройки размера шрифта, высоты строки, внутренних отступов и верхнего и нижнего внутренних отступов.
Раздел «Счетчик» позволяет оформить элементы с числовыми значениями.
Например, для WooCommerce здесь можно отображать количество товаров в корзине.
Настраивается цвет фона, цвет текста, внутренние отступы, размер и насыщенность шрифта, рамка и радиус скругления.
Если стандартных возможностей оформления недостаточно, можно воспользоваться разделом «Дополнительные стили».
Он представляет собой встроенный CSS-редактор, в котором можно добавлять собственные правила оформления для панели.
Блок «Настройки»
После блока оформления расположен раздел «Настройки». Здесь можно определить поведение панели на сайте.
В частности, можно изменить следующие параметры:
- расположение панели сверху или снизу экрана;
- максимальная ширина панели;
- отображение только на устройствах определенной ширины;
- показ панели после прокрутки страницы на заданное количество пикселей;
- скрытие панели после прокрутки;
- настройка компенсационного отступа контента, чтобы панель не перекрывала содержимое сайта.
Эти параметры позволяют максимально точно адаптировать работу панели под особенности конкретного проекта.
Блок «Правила показа»
Последний блок в настройках — «Правила показа». Именно здесь определяется, где должна отображаться панель.
Можно ограничить показ по типам страниц, отдельным страницам, записям, рубрикам, разделам WooCommerce, другим областям сайта.
Благодаря этому можно создавать различные панели для разных частей проекта.
Еще одно удобное преимущество WPBar — встроенный предварительный просмотр.
Во время настройки любое изменение сразу отображается в окне предпросмотра, поэтому не приходится постоянно открывать сайт в новой вкладке и обновлять страницу.
В результате мы получили аккуратную синюю панель навигации, полностью настроенную под задачи интернет-магазина.
Итог
Создать удобное и современное меню в WordPress можно буквально за несколько минут. Если стандартной навигации уже недостаточно, WPBar позволяет без программирования собрать адаптивную панель с гибкими настройками внешнего вида, поведения и условий отображения.
Плагин подойдет для интернет-магазинов, корпоративных сайтов, блогов и любых других проектов, где важно сделать навигацию максимально удобной для пользователей. Благодаря большому количеству настроек можно легко адаптировать панель под задачи конкретного сайта и получить именно тот результат, который нужен.
