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