Плагины для создания панели с уведомлениями в WordPress. Плагины для создания панели с уведомлениями в WordPress Выдвигающаяся боковая панель для wordpress
С помощью плагина – WPFront Notification Bar , вы сможете добавить на свой сайт панель с уведомлением, в верху или внизу сайта wordpress. В панели может отображаться какой-либо текст и кнопка с ссылкой на любую страницу, можно добавлять HTML код. Вы сможете настроить свои цвета для панели уведомления, можно выбрать расположения панели, вверху или внизу сайта. Можно зафиксировать панель, что бы при прокрутки страницы панель всегда была видна на экране. Можно выбрать на каких страницах будет отображаться панель, а на каких не будет и т.д.
Установить плагин вы сможете прямо из админ-панели wordpress. Перейдите по вкладке: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
После установки и активации плагина, перейдите на страницу: WPFront – Notification Bar , чтобы настроить плагин.
Display
– Enabled, поставьте здесь галочку, чтобы включить панель уведомления.
– Position, выберите где будет отображаться панель, Top – вверху, Bottom – внизу.
– Fixed at Position, если поставите здесь галочку, то панель будет всегда видна на экране, да же при прокрутки страницы.
– Display on Scroll, если поставите здесь галочку, то панель будет появляться при прокрутке страницы.
– Scroll Offset, здесь можно указать на сколько пикселей должна быть прокручена страница до появления панели с уведомлением.
– Bar Height, можете здесь указать высоту панели в пикселях.
– Position Offset, здесь можно задать расстояние от верхней части сайта до панели.
– Display After, можно задать время по истечении которого будет появляться панель, не работает для функции – Display on Scroll .
– Animation Duration, можно задать длительность анимации, когда панель выезжает на экран.
– Display Close Button, поставьте галочку, чтобы показывать кнопку с крестиком для закрытия панели.
– Auto Close After, можете указать через сколько секунд панель будет закрываться автоматически, не работает для функции – Display on Scroll .
– Display Shadow, показывать тень для панели.
– Display Reopen Button, если поставить галочку, то после закрытия панели, в углу экрана, будет отображаться кнопка для открытия панели.
– Keep Closed, если поставить галочку, то при закрытии панели на одной страницы, на других страницах панель уже отображаться не будет.
– Keep Closed For, здесь можно указать сколько дней не будет показываться панель для пользователя, который закрыл панель.
Content
– Message Text, укажите здесь текст, который будет отображаться в уведомлении, можно добавлять HTML код.
– Process Shortcode, поставьте галочку, чтобы можно было добавлять в уведомления шорткоды.
– Display Button, поставьте галочку, чтобы показывать в панели кнопку.
– Button Text, укажите здесь текст для кнопки.
– Button Action, укажите здесь ссылку для кнопки. Open URL in new tab/window – ссылка будет открываться в новом окне. No follow link – ссылка не будет индексироваться.
– Close Bar on Button Click, закрывать бар нажатием на кнопку.
Filter
– Start Date & Time, можно указать дату и время когда панель начнёт отображаться.
– End Date & Time, можно указать дату и время когда панель закроется.
– Display on Pages, выберите на каких страницах будет показываться панель. All pages – на всех страницах. Include in following pages – отметьте страницы, на которых будет показываться панель. Exclude in following pages – исключить страницы.
– Display for User Roles, здесь можно выбрать для каких ролей пользователей будет показываться панель. All users – для всех, All logged in users – только для авторизованных, Guest users – только гостям, For following user roles – отметьте галочками роли.
Color
– Bar Color, выберите цвета для панели.
– Message Text Color, укажите цвет для текста в панели.
– Button Color, выберите цвета для кнопки, можно указывать два цвета для отображения градиента.
– Button Text Color, цвет для текста в кнопке.
– Reopen Button Color, цвет для кнопки открытия панели.
– Close Button Color, выберите цвета для кнопки закрытия панели.
– Custom CSS, можно задать свои CSS стили для панели, но не обязательно.
В конце сохраните сделанные изменения .
Панель уведомлений вверху или внизу сайта wordpress обновлено: Июль 25, 2018 автором: Илья Журавлёв
Наверняка вам частенько встречались на страницах сайтов, выдвигающиеся панели различного вида и расположения, высказывающие сверху, снизу, справа или слева на полном автомате, с заданным интервалом времени, или же активируемые по клику. Как правило, в таких панелях размещают скрытую с глаз пользователя до поры до времени, какую-либо дополнительную информацию, важную и не очень. Например формы подписки, виджеты соц.сетей, ссылки, теги, контактные данные и т.д и т.п., короче, всё что угодно.
Существует огромное количество готовых решений реализации выдвижных панелей на javascript, модули и плагины для различных CMS, отдельные плагины jQuery, но совсем немного, попадалось мне на глаза, полностью рабочих способов на чистом CSS.
Давно хотел замутить что-нибудь этакое, механизм использования скрытых чекбоксов хорошо знаком и понятен, да всё как-то руки не доходили. И вот, наткнувшись в пыльных кладовых CodePen на одну , решил поэкспериментировать и выдать на гора, вполне себе рабочий, немного видоизменённый и адаптированный для нашего брата, свой вариант выдвижной верхней панели на чистом CSS, получилось то, что получилось)).
Пример посмотрели, с оригиналом сравнили, и теперь, кому оно надо, давайте вместе разберём, как всё это дело работает. Ещё раз напоминаю, никаких js, только девственно-чистый html и «магия» css, сделают всю работу.
Раскладка Html
Состоит из трёх основных элементов: базовый контейнер, блок с содержанием и кнопка открытия/закрытия панели.
Как видите в конструкции панели присутствует флажок type=" " , по-умолчанию скрыт и неактивен. С помощью тега
