Varsby – Accessible Notification & Announcement Bar
| 开发者 | mxaxm |
|---|---|
| 更新时间 | 2026年8月1日 19:14 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.0.2 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
Varsby displays a simple, fully customizable notification bar for announcements, promotions and urgent alerts — and it's the one that's genuinely accessible: the bar it renders conforms to WCAG 2.2 AA, a differentiator most announcement-bar plugins skip. Features include:
- Save a library of notification bars and switch which one is live — keep a Black Friday bar, a maintenance notice and a sale banner ready, and enable the one you need without redoing your work. The free version shows one bar at a time.
- Message text with basic HTML support (
<strong>,<em>,<a>). - Optional call-to-action button with its own text, link, colours and "open in new tab" option.
- Background, text and button color pickers, plus an adjustable font size.
- Position the bar at the top or bottom, sticky (stays visible) or static (scrolls away).
- Show site-wide, on the front page only, or everywhere except the front page.
- Show on desktop, mobile, or both.
- Toggle visibility for logged-in users.
- Visitors can dismiss the bar — it then stays hidden for a duration you choose (1 to 365 days, 1 day by default). Each bar remembers its own dismissal, so hiding one never suppresses another.
- Lightweight: only enqueues assets when needed.
安装:
- In your WordPress dashboard, go to Plugins → Add New.
- Search for Varsby.
- Click Install Now, then Activate.
- Go to Settings → Varsby to configure your message, button, colours and display options.
屏幕截图:
常见问题:
Can I include HTML in my alert message?
Yes, you can use basic HTML tags like <strong>, <em>, and <a>.
How do I add a button?
On the settings page, fill in Button text and Button link in the Content card. Leave the button text blank to hide the button. You can style it with the button colour pickers in the Appearance card.
Can I show the bar at the bottom of the page?
Yes. In the Display card, set Position to Bottom. You can also choose Behaviour: Sticky keeps the bar visible while scrolling, while Static lets it scroll away with the page.
How do I show the bar only on the homepage?
In the Display card, set Show on pages to Front page only.
How do I disable the bar for logged-in users?
On the settings page, turn off the Show the bar to users who are logged in toggle and save.
How long does the bar stay hidden after a visitor dismisses it?
As long as you like. In the Display card, set Stay dismissed for (days) to any value from 1 to 365 (1 day by default). Dismissal is remembered in the visitor's browser, so it works with full-page caches and CDNs.
Will it slow down my site?
No—scripts and styles are only loaded on the front end when the bar is enabled.
Does it work with the block editor / Gutenberg?
Yes. Varsby is independent of the block editor—it doesn't add any blocks, and displays the bar site-wide via a separate settings page, so it works the same whether your site uses Gutenberg, the Classic Editor, or a page builder.
Can I create more than one bar?
Yes. Under Settings → Varsby you can save as many bars as you like and switch which one is enabled. The free version shows one bar at a time — the first enabled bar that matches the current page and device — so you can keep a library of ready-made bars and activate the right one when you need it.
Is there a Pro version?
Not yet. Varsby is free and fully usable as-is—one live bar, done well. A Pro version with extra features (including showing multiple bars at once) is being considered for those who need more.
更新日志:
1.2.1
- Added a second "Add new bar" button below the list of bars, so it's within reach on longer lists without scrolling back to the top.
- Made the "All bars" back-link on the edit screen more prominent.
- Housekeeping under the hood; no change to how your bars look or behave. Your existing bars and settings carry over unchanged.
- New: save a library of notification bars and switch which one is live. The settings screen is now a list of your bars — add, edit, duplicate and delete them — with an optional name to tell them apart. The free version still shows one bar at a time.
- New: when several enabled bars could match, Varsby now shows the first one that fits the current page and device, instead of always trying the first saved bar. A bar scoped to (say) the front page no longer blanks the announcement on other pages when another bar could show there.
- New: each bar remembers its own dismissal, so dismissing one bar never hides a different bar. Existing dismissals of your current bar are preserved across the update.
- Your existing bar and all its settings carry over unchanged.
- Added developer hooks for extending the bar: the
varsby3u5c49_before_renderandvarsby3u5c49_after_renderactions, and thevarsby3u5c49_bar_attsfilter for adding attributes to the bar wrapper. No change to how the bar looks or behaves.
- Added a configurable dismissal duration: choose how many days a dismissed bar stays hidden (1 to 365, 1 day by default) under Settings → Varsby. Previously this was fixed at 24 hours.
- Hardened the dismiss button's keyboard focus ring so it stays visible on themes that remove focus outlines globally.
- Fixed a fixed top bar being hidden behind a theme's own fixed or sticky header (such as Divi's). The bar shared the same position at the top of the page, and the header — sitting at a higher stacking order — painted over it. The bar now pushes such a header down by its own height so it sits above it, and layers itself above the header as a safeguard. Themes with a normal-flow header are unaffected.
- Removed the manual
load_plugin_textdomain()call. WordPress automatically loads translations for plugins hosted on WordPress.org since version 4.6, so the call was redundant and is flagged as discouraged by Plugin Check. No effect on translations.
- Fixed a fixed bottom bar still overlapping the footer on some full-height "sticky footer" themes (such as Neve) where the page wrapper has
overflow: hiddenand aborder-boxmin-height, which absorbs the padding added in 1.1.4. The bar now checks whether padding the wrapper actually freed space below the footer and, if not, spaces the scroll container itself instead. - Admin: choosing a static bottom bar now shows a short heads-up that, because it renders after the page content, it can sit below the fold on short pages — with a nudge to use "Sticky" for an always-visible bar.
- Fixed a fixed bottom bar overlapping the footer on themes with a full-height "sticky footer" layout (such as Astra). These themes pin the footer to the viewport bottom, so the bar is now cleared by padding that wrapper directly rather than by a page margin, which those layouts ignore.
- Fixed a doubled gap that appeared above (or below) the page content on themes that set
overflowother thanvisibleon thebodyelement, such as Astra. The offset that pushes content clear of a fixed bar is now applied only to the roothtmlelement, so it no longer stacks.
- Added a non-intrusive admin notice inviting a WordPress.org review, shown after the settings have been saved a few times over a few days — with "Maybe later" (snoozes for 60 days) and "No thanks" options.
- CSS selectors for the bar and its device-targeting rules are now attribute-based instead of ID-based, so multiple bar instances can render correctly on the same page.
- Improved accessibility of the bar landmark: the wrapper now carries a named region role and a live region so screen readers can navigate to it and catch dynamic changes.
- Replaced the dismiss span with a real
<button>element so it is keyboard-accessible without extra scripting, and added a visible focus ring. - Focus now moves to the main content area after the bar is dismissed, so keyboard users are not left without a clear position on the page.
- CTA button: screen readers are now told when the button opens in a new tab.
- Admin: colour pickers are now grouped into labelled "Bar colours" and "Button colours" pairs, each with an inline contrast indicator showing a live sample, ratio, and WCAG AA pass/fail rating.
- Admin: help text below the message field and behaviour option is now programmatically linked to its input, so screen readers read it when the field is focused.
- Admin: the "Open in new tab" and "Show to logged-in users" toggles are now properly labelled for screen readers.
- Added a
prefers-reduced-motionguard so any future bar transitions are automatically suppressed for users who have requested reduced motion in their OS. - Admin: added a
prefers-contrast: morestylesheet so labels, borders, and help text are easier to read for users who have enabled high contrast in their OS. - Admin: fixed the message field help hint displaying raw HTML tag names instead of the intended formatted example.
- Added a live status strip below the settings preview that shows whether the bar is currently enabled or disabled.
- Added a "Saves every setting on this page" note below the Save button.
- Internal: refactored bar data into a dedicated storage layer and modelled the bar as a proper object, laying the groundwork for multiple bars and Pro features.
- Added an optional call-to-action button with its own text, link, colours and "open in new tab" option.
- Added top or bottom positioning and a sticky-or-static behaviour choice.
- Added an adjustable message font size.
- Added simple page targeting: all pages, front page only, or all pages except the front page.
- Redesigned the settings screen with a full-width live preview and a more robust two-column layout.
- Fixed the desktop/mobile "Show on" option, which previously had no effect on the front end.
- Improved accessibility: the dismiss button is now keyboard-operable.
- Added the
varsby3u5c49_should_displayfilter so add-ons can extend the visibility logic.
- Redesigned the admin settings page: grouped Content, Appearance and Display options into cards with a sticky live preview.
- Added one-click colour presets (Info, Success, Warning, Urgent).
- Replaced the “Show on” dropdown with an accessible segmented control.
- Added a live character counter to the message field.
- Fixed admin toggle styling that was not being loaded on the settings page.
- Removed the redundant “Show Admin Preview?” option; the preview is always shown.
- Added default color picker values (#1e73be background, #fff text) on first load.
- Improved admin preview: centered text, removed preview close button, matched preview text size and weight.
- Enhanced preview script to apply styles on load and target link color correctly.
- Fixed front-end positioning to support older WP versions, ensuring the notification bar stacks correctly with the admin bar across themes.
- Fixed invisible close button (× now visible via CSS).
- Added missing admin preview toggle field to settings page.
- Added ARIA label to close button for accessibility.
- Added SameSite=Lax attribute to dismissal cookie.
- Removed redundant setTimeout in frontend script.
- Fixed duplicate event bindings in admin preview script.
- Changed
plugins_loadedhook for textdomain loading. - Added placeholders on input fields.
- JS console messages now localizable via
wp.i18n.
- Initial release of Varsby.