Разработка качественного и полезного меню на сайте — сложная задача, и зачастую владельцы проектов не берутся за ее решение. Они довольствуются встроенным в шаблон вариантом навигации, но это неправильный подход, особенно на WordPress, где есть удобные плагины для улучшения данного компонента. Один из них — WPBar, и в этой статье я рассмотрю возможности данного расширения, а также расскажу о своем опыте его использования.
Что такое WPBar
WPBar — это плагин WordPress, разработанный российской студией WPShop. Она является одним из лидеров по созданию расширений и шаблонов в русскоязычном сегменте. Компания существует на рынке уже более 10 лет, и вы наверняка не раз взаимодействовали с сайтами, которые разработаны на их продуктах.
Именно WPShop выпустили одну из самых популярных русскоязычных тем WordPress — Reboot. А также они создали плагин Clearfy Pro для быстрой оптимизации сайтов, который установили более 100,000 раз.
Плагин WPBar преследует простую идею — дать вебмастерам удобный инструмент для создания на сайте качественного и полезного меню. Удобное меню является залогом высокой конверсии в магазинах и хорошего поведенческого фактора на информационных проектах. Оно способно удерживать пользователей на сайте и позволяет им быстрее получить искомую информацию.
Как установить плагин
Расширение отсутствует в репозитории WordPress, а его продажа происходит только через официальный сайт WPShop. Чтобы установить плагин на сайт:
- Зарегистрируйтесь на WPShop или зайдите в свой личный кабинет. Купите лицензию на нужное количество доменов.
WPBar со скидкой
- Скачайте ZIP-архив с плагином.
- На своем сайте перейдите «Плагины» — «Добавить плагин» — «Загрузить плагин». Выберите архив, установите расширение и активируйте его.
- В левом меню ВордПресс появится пункт WPBar. В настройках укажите лицензионный ключ из личного кабинета WPShop.
Теперь с плагином можно работать.
Последующие обновления расширения не потребуют заново его устанавливать на сайт описанным выше способом. Эту процедуру достаточно проделать один раз, а далее обновлять расширение через раздел «Плагины».
Как создать плавающее меню через WPBar
После установки и активации расширения, можно переходить к созданию первой панели. Для этого в меню нажмите «WPBar» — «Добавить новую панель».
Сам процесс создания меню состоит из 4 этапов, и все они происходят на одной странице в бэкенде:
- Формирование списка элементов.
- Установка внешнего вида.
- Настройка параметров отображения.
- Выбор правил показа.
Рассмотрю каждый из этапов подробнее, рассказав про доступные опции.
В самом плагине WPBar предусмотрен виртуальный тур. При первом переходе на страницу создания новой панели, само расширение проведет экскурсию по настройкам.
Формирование списка элементов
Любое меню состоит из элементов. В случае с плагином WPBar — это не только ссылки для перехода между страницами. Здесь есть также полезные опции для повышения конверсии и улучшения ПФ. Рассмотрю все доступные в данный момент варианты:
- Ссылка. Можно добавить любой линк — внутренний или внешний. Присутствует опция «Открыть в новой вкладке».
- Поделиться страницей. Задействует встроенную в браузеры функцию «Поделиться». Она позволяет быстро отправить ссылку в соцсети или скопировать ее буфер обмена. Также можно задать «дефолтную» ссылку для шаринга, вместо текущей страницы.
- Главная страница. Здесь все понятно — выход на основную страницу сайта.
- Наверх. Часто в правом нижнем углу сайта можно видеть стрелку вверх, по нажатию на которую страница отматывается к началу. Эта опция делает ровно то же самое.
- Корзина WooCommerce. Быстрый переход в корзину. Можно включить отображение количества товаров в ней.
- Аккаунт WooCommerce. Полезно, если на сайте включен и настроен личный кабинет покупателя.
- Поиск товаров. По нажатию появляется строка для ввода запроса. Можно задать для нее плейсхолдер.
Указанные выше три элемента работают только с WooCommerce. Поддержка других e-commerce плагинов в данный момент не предусмотрена.
- Поиск записей. Для быстрого поиска в «Записях» WordPress. Зачастую именно здесь размещают статьи в блогах. Можно указать фразу-заполнитель.
- Поиск по произвольным типам записей. Здесь указывается сам кастомный тип записи WordPress. При желании, задается плейсхолдер.
- Меню. Выбирается одно из созданных стандартными средствами WordPress меню для показа при нажатии на данную кнопку. Оно возникает во всплывающем окне прямо над строкой меню.
- Содержание. Очень полезная опция в длиннопостах. По нажатию на нее посетитель сможет посмотреть оглавление. При этом вебмастер сам задает, при каком количестве заголовков оно будет показываться, выбирая и типы заголовков, которые в него входят.
Если меню не может быть сформировано согласно указанным правилам, этот пункт не станет отображаться в меню.
- JavaScript onClick. Исполнение заданного пользователем JavaScript. Например, можно «навесить» открытие формы обратной связи в поп-апе или запуск колеса фортуны для розыгрыша скидок. Также легко добавить прокрутку к определенному элементу на странице.
- Контентный блок. На HTML добавляется нужный код, который будет исполняться при нажатии на элемент меню.
- Свой элемент. Исполнение кода в самом меню. Удобно использовать для добавления логотипа или промокода. Продуман переключатель для отключения hover и active стилей.
У каждого из перечисленных элементов заполняется название, выбирается иконка, а также можно указать дополнительный класс, ширину и расположение.
Как можно видеть, формирование списка элементов происходит нативно без перехода к коду, если не считать добавление кастомных скриптов. При этом прямо в бэкенде предусмотрен предварительный просмотр. В нем в режиме реального времени можно видеть все вносимые изменения по элементам, их расположению, внешнему виду.
Не все функции работают в предпросмотре. Не будут срабатывать переходы по ссылкам, скрипты, оглавление.
Установка внешнего вида
Самый важный пункт здесь — пресеты. В нем представлены несколько вариантов из подготовленных заранее разработчиками стилей отображения меню. По своему опыту скажу, что на большинстве сайтов достаточно выбрать нужный пресет, и на этом настройка внешнего вида настроена.
Тем не менее, разработчики предусмотрели и более детальные опции для тех, кто хочет кастомизировать панель «под себя». Перечислю наиболее важные моменты, которые необходимо знать:
- Раздел «Меню» в настройке внешнего вида привязан к элементу «Меню». То есть в нем задается шрифт, межстрочные расстояния и другие параметры для пунктов, которые будут выводиться при нажатии на соответствующую кнопку.
- Возле пункта «Тень» в разделе «Панель» можно видеть 5 параметров. Они идентичны в своей последовательности свойству box-shadow в CSS. Слева направо: смещение по X, смещение по Y, радиус размытия, радиус распространения, цвет.
- Пункт z-index в разделе «Панель» определяет параметры наложения. Например, если у вас на сайте выводится информирование про Cookie, которое после принятия скрывается, имеется смысл задать для него больше параметр z-index, чем для меню. Иначе оно окажется под меню и не будет видно пользователям.
- Подписи в разделе «Панель» отключают названия элементов меню или включают их.
- Пункт «Дополнительные стили» позволяет точечно внести изменения во внешний вид плавающей панели при помощи CSS.
Рекомендую использовать раздел «Дополнительные стили» только в случае, если нет параметра в общем списке свойств настройки вида.
Настройка параметров отображения
В этом блоке пользователь определяет, как и когда будет показываться создаваемая панель. Рассмотрим имеющиеся варианты:
- Положение. Сверху или снизу, в любом варианте меню крепится к экрану, то есть оно перемещается по мере прокрутки страницы.
- Максимальная ширина. Опция полезна для компьютеров, чтобы элементы излишне не растягивались в блоке на больших экранах.
- Скрывать на экранах. В зависимости от указанной ширины по пикселям, определяется, когда показывать панель. Общепринято, что все больше 768 пикселей — это планшеты и PC, а меньше — мобильные устройства.
- Показывать панель после прокрутки. Чтобы меню отображалось не сразу при загрузке сайта, а только после проматывания страницы вниз, здесь задается число пикселей.
- Скрывать панель при прокрутке. В зависимости от расположения меню, имеет смысл убирать его при прокрутке в одну из сторон, чтобы оно не мешало пользователям.
- Поведение отступа контента. Я рекомендую оставлять «Авто», но можно выбрать отдельные элементы или самостоятельно указать селектор.
Если вам непонятно назначение пункта настройки, нажмите на знак вопроса около его названия. Во всплывающей подсказке содержится более подробное объяснение.
Выбор правил показа
В пункте выше задавались правила по техническим характеристикам, а здесь они указываются по контенту. Можно вывести панель:
- На всех страницах сайта.
- Только на выбранных страницах.
- На всех, исключая определенные.
В настройках, которые предоставляют выбор, разные способы сегментирования — по типам записей, разделам, конкретным страницам и так далее.
Такие широкие настройки позволяют создать на сайте панели индивидуальные под каждую отдельную страницу. Либо вывести с помощью WPBar общее меню на всех страницах. Выбор остается за администратором сайта.
Общие настройки плагина
В WPBar есть несколько общих опций плагина, которые расположены в разделе «Настройки». Здесь можно выбрать способ загрузки стилей и указать ID счетчика Яндекс Метрики.
Указанный номер счетчика Яндекс Метрики позволяет отслеживать цели:
- Нажатие по элементу панели.
- Раскрытие панели элемента (например, показ строки поиска или меню).
- Клик по кнопке «Поделиться страницей».
Также в настройках присутствует кнопка для полной зачистки базы данных от всех созданных плагином записей при его удалении с сайта.
Примеры эффективного использования WPBar
Плагин WPBar достаточно новый, но я его уже успел протестировать на нескольких проектах, как своих, так и клиентских. Могу сказать, что он действительно способен существенно повысить конверсию на коммерческих сайтах. Приведу примеры:
- Интернет-магазин с доставкой фермерских продуктов. На сайте с достаточно старым шаблоном WordPress была в зоне видимости пользователей только «плавающая корзина» из подобных элементов для повышения конверсии. Заменил ее на панель, добавив туда к корзине также пункт «Скидки дня» и «Каталог». Средний чек заметно вырос, во многом за счет продуктов по акции, до которых ранее нужно было добираться через меню. Также увеличилось среднее время пользователей на сайте.
- Лендинг по продаже услуги в строительном сегменте. Ранее он имел просто анкорное меню, которое почти не кликали. Добавил в нижнюю панель через WPBar заметную кнопку с указанием скидки, которая и ранее была размещена на самом лендинге. За счет меню до этого элемента посадочной страницы стали доходить чаще, что заметно повысило конверсию с формы возле акции.
На своих информационных проектах с помощью WPBar я теперь вывожу оглавления в длинных постах, привлекаю внимание к опросам и социальным сетям, а также формирую меню с полезными постами, которые ушли глубоко вниз в ленте, из-за чего стали получать меньше просмотров. Даже подобные минимальные действия оказали заметный эффект на показателях глубины просмотра и среднего времени на сайте.
Несколько рекомендаций по использованию WPBar:
- Не нужно создавать гигантские меню — достаточно добавить 4–5 иконок.
- Задействуйте дополнительные классы, чтобы выделить один из элементов. Тогда он сразу будет привлекать внимание при заходе на сайт.
- Не бойтесь тестировать и вносить изменения. Это не классическое меню, которое создается «раз и навсегда» на сайте.
- На некоторых проектах имеет смысл задействовать сразу прикрепленное меню к верхней части экрана и к нижней части экрана. Помните, что плагин дает такую возможность.
- Обязательно добавьте в настройках номер своего счетчика Яндекс Метрики, чтобы иметь эффективную аналитику.
Стоимость WPBar
Плагин WPBar является премиальным, и его достаточно один раз приобрести, чтобы пользоваться всегда без ограничений. От варианта покупки зависит стоимость:
- На 1 домен — 2900 рублей.
- На 3 домена — 4900 рублей.
- Неограниченная лицензия — 6900 рублей.
В любую лицензию включены бесплатные обновления навсегда, а также 1 год технической поддержки от команды WPShop. Промокод по кнопке ниже позволит приобрести WPBar со скидкой.
Промокод на WPBar
Как и с другими продуктами WPShop, я рекомендую изначально купить лицензию на 1 домен. Это позволит опробовать плагин и разобраться с его опциями, чтобы понять, подойдет ли он под ваши задачи. Далее в личном кабинете WPShop лицензию можно расширить без переплат.
Где скачать WPBar в версии nulled
Начинающие вебмастеры часто ищут «взломанные» или «зануленные» версии шаблонов и плагинов. Я бы не рекомендовал этого делать, особенно в случае с расширением, стоимость которого достаточно низкая. Загрузка из непонятных источников nulled-версии плагина — это всегда риск получить:
- Проблемы с сайтом из-за встроенных бэкдоров, веб‑шеллов, майнеров, рекламы, а также всевозможных вирусов и других хакерских систем. Ни один антивирус не способен на 100% гарантировать, что скачанный бесплатно файл плагина WPBar (или любого другого) полностью чист.
- Неактуальную версию продукта. Команда WPShop регулярно выпускает обновления для своих плагинов и шаблонов, которые устраняют уязвимости, добавляют новые функции, адаптируют их под новые версии WordPress и PHP.
- Блокировку плагина и потерю всех созданных панелей. Авторы постоянно проверяют лицензионные ключи, чтобы исключить их покупку «вскладчину». В правилах четко обозначено, что даже неограниченная лицензия только для личного использования. При обнаружении проблемного ключа или подозрительной активности возможна блокировка, после которой плагин перестанет работать, а вебмастер потеряет все настройки.
- Юридические проблемы. Зануленные версии нарушают лицензионные права. При их использовании в коммерческих целях у разработчиков есть право обратиться в суд и потребовать компенсацию.
Сам плагин WPBar еще достаточно новый, и чем большей пользовательской базой он обзаведется, тем активнее разработчики будут его обновлять, внедряя новые функции. Через службу поддержки у них можно запросить добавление конкретной настройки, которая требуется на вашем проекте. Не исключено, что она станет частью релизной версии, либо разработчики подскажут способы, как ее реализовать.
Итоги
Меню на сайте способно приносить реальную пользу, если оно грамотно оформлено. Плагин WPBar дает максимально простые и понятные опции для создания удобных панелей в WordPress. Не бойтесь с ним экспериментировать и регулярно проверяйте наличие обновлений, поскольку расширение развивается, а его функциональность растет.
WPBar со скидкой
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.
