Настройки плагина

Быстрый старт

Плагин WPBar создает плавающее меню с иконками. Часто такие меню используют на мобильном, но при желании их можно разместить для любого разрешения экрана. Мы в плагине эти меню называем Панели (Bar).

После установки и активации плагина можно сразу переходить к созданию новой Панели.

Откройте WPBar > Добавить новую панель.
В блоке Элементы добавьте нужные элементы панели (иконка и название).
В блоке Внешний вид выберите пресет (готовый набор дизайна) или настройте стиль вручную.
В блоке Правила показа задайте, где показывать панель, можно ограничить определенными страницами.
Нажмите Опубликовать.

В редакторе есть Предварительный просмотр справа. В нем можно сразу в режиме реального времени увидеть все правки по Элементам и Внешнему виду. В предварительном просмотре нельзя переходить по ссылкам, не выполняется JS-код и кнопка поделиться, это все нужно проверять на самом сайте.

Обратите внимание, что по умолчанию панели ограничены шириной 768px, то есть отображаются только на экранах меньше (телефоны и планшеты до 768px). Этот параметр можно изменить в разделе Настройки.

Если на странице совпало несколько панелей, администратор увидит предупреждение в верхней панели администратора. Это помогает быстрее найти конфликт правил.

Элементы

Панель состоит из элементов. Обычно элемент — это иконка и название, которые выполняют одно действие при клике. У разных типов элементов есть свои поля для заполнения, например, для ссылки нужно будет указать URL, куда он должна вести.

Ссылка
переход на любой URL, который вы укажете в поле ссылки.
Поделиться страницей
делится ссылкой через встроенные возможности браузера. Если в браузере функционал поделиться недоступен, то ссылка копируется в буфер обмена.
Главная
переход на главную страницу сайта.
Меню
открывает панель со стандартным меню WordPress и подменю. Меню нужно заранее создать в разделе Внешний вид > Меню (классические меню).
Контентный блок
открывает панель с любым вашим HTML-контентом.
Поиск по записям
открывает форму поиска по обычным записям.
Поиск по произвольным типам записей
открывает форму поиска по указанному типу записи (post type).
JavaScript onClick
выполняет кастомное JS действие на клике. Например, открыть чат, меню, слайдер или выполнить любой JS-код. Подробнее будет ниже.
Корзина WooCommerce
переход в корзину. У иконки корзины можно включать/выключать счетчик товаров в корзине.
⚠️ Доступно только при активном WooCommerce.
Личный кабинет WooCommerce
переход в кабинет покупателя.
⚠️ Доступно только при активном WooCommerce.
Поиск по товарам WooCommerce
форма поиска по товарам.
⚠️ Доступно только при активном WooCommerce.

Иконки и подписи

Иконки для элементов можно выбрать из встроенной библиотеки или загрузить любую свою.

Для пользовательской кастомной SVG-иконки доступен чекбокс Перекрашивать иконку. Плагин попытается ее перекрасить под выбранный цвет. Иногда из-за особенностей верстки иконки она может некорректно перекрашиваться, но в большинстве случаев перекрашивает правильно. Зависит от иконки, поэтому иногда приходится подобрать подходящую.
Если Название элемента пустое, то текст элемента не выводится.

Расширенные настройки

Дополнительно каждому элементу можно задать Дополнительные классы для стилизации отдельного элемента или использования этого класса в скриптах.
Ширина элемента — позволяет изменить ширину элемента. По умолчанию 2, можно использовать значения от 1 до 10.

Внешний вид

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

Пресеты

Пресет — готовый настроенный дизайн панели, содержит в себе все CSS-переменные и может подставлять CSS в Дополнительные стили.

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

Панель

Настройки самой панели в которой находятся элементы. Отступы, фоны, тень, рамка. Поля простые, поэтому каждое отдельное разбирать не будем, только сложные.

Тень состоит из 4 полей аналогичных CSS-свойству box-shadow и цвет тени. Смещение по X, смещение по Y, размытие тени и сжатие тени.

Параметр z-index управляет порядком наложения панели на странице. Если панель перекрывается другим элементом, увеличьте значение. Если панель сама перекрывает важный элемент сайта, уменьшите значение. Можно поставить 100, 200 или 99999.

Элемент

Настройки каждого элемента в панели, обычно это иконка + название. Здесь можно задать настройки элемента при наведении курсора и цвет Активного элемента.

Активный элемент — это элемент, который совпадает с текущей открытой страницей. Например, если вы находитесь на странице Корзина, то элемент панели WPBar Корзина будет подсвечен.

Иконки

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

Счетчик

Счетчик — это небольшая цифра рядом с иконкой. Например, для WooCommerce можно показывать количество товаров в корзине. В предварительном просмотре всегда показывает цифру 1 для примера.

Дополнительные стили

Используйте это поле для точечных правок, если стандартных полей недостаточно.

.wpbar { /* ваш код */ }

.wpbar-item--cta {
    font-weight: 700;
}

.wpbar-panel__menu-list a {
    text-transform: uppercase;
}

Рекомендуется сначала настраивать панель полями интерфейса и только потом добавлять CSS.

Настройки панели

Максимальная ширина панели

Если вы показываете панель на широких экранах, ограничьте ширину, чтобы панель выглядела аккуратнее и не растягивалась на весь экран.

Скрывать на экранах шире, чем (px)

Обычно панели показывают на мобильных. Здесь можно задать любое значение ширины в пикселях и изменить это поведение. Чтобы панель показывалась на ПК, можно установить значение 2000px или выше.

Показывать панель после прокрутки (px)

Позволяет скрыть панель при загрузке страницы и показать ее только после прокрутки на заданное количество пикселей.

0 — панель показывается сразу.
300 — панель появится после прокрутки страницы на 300px.

Поведение отступа контента

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

Авто — плагин сначала ищет подвал по селекторам footer.site-footer, #colophon, .site-footer, footer. Если не находит — добавляет отступ к body.
Body — всегда добавляет отступ к body.
Свой селектор — добавляет отступ к вашему селектору (например, .site-footer).
Поверх контента — отступ не добавляется.

Что именно добавляется: плагин рассчитывает видимую высоту панели и добавляет ее в padding-bottom целевого элемента. Также устанавливается CSS-переменная --wpbar-offset-bottom, которая содержит высоту компенсации (фактическую высоту панели с учетом отступов).

При необходимости эту переменную можно использовать в своих стилях, например для фиксации виджета выше панели:

.some-sticky-widget {
    bottom: calc(1rem + var(--wpbar-offset-bottom, 0px));
}

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

Правила показа

Здесь можно настроить на каких страницах показывать панель или наоборт на каких скрывать.

Режимы

Показывать везде — панель показывается на всем сайте.
Показывать только в выбранных местах — панель показывается при совпадении выбранных условий.
Исключить выбранные места — панель скрывается при совпадении выбранных условий.

Контексты

Главная страница, блог, записи, страницы.
Архивы категорий и тегов.
WooCommerce: магазин, карточка товара, категории товаров, все Woo-страницы.

Точные выборки

Конкретные страницы по ID.
Категории блога (архив и посты внутри категорий).
Категории товаров WooCommerce (архив и товары внутри категорий).

Тип элемента JavaScript onClick

Тип JavaScript onClick запускает действие по клику на элемент панели. Это может быть полезно, если вы хотите по клику на элемент показывать какие-то интерактивные элементы, например, запустить попап, показать чат или перейти к форме обратной связи.

Поле Действие JavaScript поддерживает 2 режима:

Имя события — например, wpbar:open-callback. В этом случае WPBar отправит событие в document и window.
Путь к глобальной callback-функции — например, App.openFeedbackModal. WPBar вызовет эту функцию при клике и передаст объект с данными элемента.

Важно: в предварительном просмотре эти действия не выполняются. Проверяйте JavaScript onClick на реальной странице сайта.

Пример 1. Открыть модальное окно через событие:

// В поле "Действие JavaScript" укажите:
wpbar:open-feedback

// В теме/скрипте сайта:
document.addEventListener('wpbar:open-feedback', function () {
    if (window.openFeedbackModal) {
        window.openFeedbackModal();
    }
});

Пример 2. Открыть модальное окно через callback:

// В поле "Действие JavaScript" укажите:
App.openFeedbackModal

// В скрипте сайта:
window.App = window.App || {};
window.App.openFeedbackModal = function (payload) {
    if (window.openFeedbackModal) {
        window.openFeedbackModal(payload);
    }
};

Пример 3. Прокрутить страницу к форме через событие:

// В поле "Действие JavaScript" укажите:
wpbar:scroll-to-contact

// В скрипте сайта:
document.addEventListener('wpbar:scroll-to-contact', function () {
    document.querySelector('#contact-form')?.scrollIntoView({ behavior: 'smooth' });
});