Açıklama
Site Grayscale Toggle lets you turn your entire site grayscale and give visitors a clear on/off switch. It’s built to be CSP-friendly (no inline JS) and to avoid a flash-of-unstyled-content by injecting the initial state on the server side.
Features:
– Grayscale filter site-wide via html.is-grayscale { filter: grayscale(var(--sgt-level)); }.
– Intensity control (0–100) from Settings Site Grayscale.
– Show/Hide floating toggle button (bottom-right by default).
– Shortcode: [grayscale_toggle] to place the switch anywhere (headers, menus, footers, blocks, widgets).
– Remembers visitor preference with localStorage across pages.
– CSP-safe: no inline JS; initial state added server-side to <html> to avoid FOUC.
– Lightweight, theme-agnostic; works alongside most caching/CDN plugins.
Use cases include memorial/monochrome modes, accessibility preferences, or design experiments that you want users to control.
Yükleme
- Upload the plugin ZIP via Plugins Add New Upload Plugin and click Activate.
- Go to Settings Site Grayscale and configure:
- Enable grayscale by default
- Grayscale intensity (0–100)
- Show floating toggle button
- (Optional) Place the toggle anywhere with the shortcode:
[grayscale_toggle]
You can customize labels/classes:
[grayscale_toggle label_on="Grayscale: ON" label_off="Grayscale: OFF" class="my-btn"]
SSS
-
Why did enabling grayscale not change my site?
-
Check two things:
1) Intensity isn’t set to0(go to Settings Site Grayscale set to100to test).
2) Visitor preference may be stored asoff. Clear it in the browser console:
js
localStorage.removeItem('sgt_pref'); location.reload(); -
Does it work under strict Content-Security-Policy (CSP)?
-
Yes. v1.1.1 removes inline JS and injects the initial class/attributes server-side, so CSP rules that block inline scripts won’t prevent grayscale from applying.
-
Uncheck Show floating toggle button in Settings Site Grayscale, then place
[grayscale_toggle]where you want. -
Can I exclude some elements from being grayscaled?
-
Yes, add CSS like this in your theme or a customizer:
css
html.is-grayscale .no-gray {
-webkit-filter: none !important;
filter: none !important;
}
Then add the classno-grayto elements you want to keep in color. -
Will it conflict with caching/CDN plugins?
-
Generally no. If you don’t see changes, clear/purge caches and your CDN.
-
Is there WP-CLI support?
-
You can manage options via WP-CLI:
bash
wp option update sgt_default_on 1
wp option update sgt_intensity 100
wp option update sgt_show_button 1
İncelemeler
Bu eklenti için herhangi bir değerlendirme bulunmuyor.
Katkıda Bulunanlar ve Geliştiriciler
“Site Grayscale Toggle” açık kaynaklı yazılımdır. Aşağıdaki kişiler bu eklentiye katkıda bulunmuşlardır.
Katkıda bulunanlar
“Site Grayscale Toggle” eklentisini dilinize çevirin.
Geliştirmeyle ilgilenir misiniz?
Kodu görüntüleyin, SVN deposuna göz atın ya da RSS ile geliştirme günlüğüne abone olun.
Değişiklik Kaydı
1.1.1
- CSP-safe: removed inline JS and moved bootstrap to server-side attribute/class injection.
- Preserved intensity (0–100), show/hide floating button, and shortcode features.
1.1.0
- Added intensity control (0–100).
- Added show/hide floating toggle button setting.
1.0.0
- Initial release with grayscale and front-end toggle button + shortcode.