Title: Site Grayscale Toggle Author: natthasath Published: 2025 年 11 月 11 日 Last modified: 2025 年 11 月 11 日 --- 搜索插件 ![](https://ps.w.org/site-grayscale-toggle/assets/banner-772x250.png?rev=3393335) ![](https://ps.w.org/site-grayscale-toggle/assets/icon-256x256.png?rev=3393338) # Site Grayscale Toggle 作者：[natthasath](https://profiles.wordpress.org/natthasath/) [下载](https://downloads.wordpress.org/plugin/site-grayscale-toggle.zip) * [详情](https://cn.wordpress.org/plugins/site-grayscale-toggle/#description) * [评价](https://cn.wordpress.org/plugins/site-grayscale-toggle/#reviews) * [安装](https://cn.wordpress.org/plugins/site-grayscale-toggle/#installation) * [开发进展](https://cn.wordpress.org/plugins/site-grayscale-toggle/#developers) [支持](https://wordpress.org/support/plugin/site-grayscale-toggle/) ## 描述 **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 ` ` 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. ## 安装 1. Upload the plugin ZIP via **Plugins Add New Upload Plugin** and click **Activate**. 2. Go to **Settings Site Grayscale** and configure: 3. * **Enable grayscale by default** * **Grayscale intensity (0–100)** * **Show floating toggle button** 4. (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"]` ## 常见问题 ### Why did enabling grayscale not change my site? Check two things: 1) **Intensity** isn’t set to `0` (go to Settings Site Grayscale set to `100` to test). 2) **Visitor preference** may be stored as `off`. 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. ### How do I hide the floating button and use only the shortcode? 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 class no-gray to 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 ## 评价 此插件暂无评价。 ## 贡献者及开发者 「Site Grayscale Toggle」是开源软件。 以下人员对此插件做出了贡献。 贡献者 * [ natthasath ](https://profiles.wordpress.org/natthasath/) [帮助将「Site Grayscale Toggle」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/site-grayscale-toggle) ### 对开发感兴趣吗? 您可以[浏览代码](https://plugins.trac.wordpress.org/browser/site-grayscale-toggle/)， 查看[SVN仓库](https://plugins.svn.wordpress.org/site-grayscale-toggle/)，或通过[RSS](https://plugins.trac.wordpress.org/log/site-grayscale-toggle/?limit=100&mode=stop_on_copy&format=rss) 订阅[开发日志](https://plugins.trac.wordpress.org/log/site-grayscale-toggle/)。 ## 更新日志 #### 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. ## 额外信息 * 版本 **1.1.1** * 最后更新：**7 月前** * 活跃安装数量 **10+** * 已测试的最高版本为 **6.8.5** * 语言 * [English (US)](https://wordpress.org/plugins/site-grayscale-toggle/) * 标签 * [accessibility](https://cn.wordpress.org/plugins/tags/accessibility/)[filter](https://cn.wordpress.org/plugins/tags/filter/) [grayscale](https://cn.wordpress.org/plugins/tags/grayscale/)[toggle](https://cn.wordpress.org/plugins/tags/toggle/) [ui](https://cn.wordpress.org/plugins/tags/ui/) * [高级视图](https://cn.wordpress.org/plugins/site-grayscale-toggle/advanced/) ## 评级 尚未提交反馈。 [Your review](https://wordpress.org/support/plugin/site-grayscale-toggle/reviews/#new-post) [查看全部评论](https://wordpress.org/support/plugin/site-grayscale-toggle/reviews/) ## 贡献者 * [ natthasath ](https://profiles.wordpress.org/natthasath/) ## 支持 有话要说吗？是否需要帮助？ [查看支持论坛](https://wordpress.org/support/plugin/site-grayscale-toggle/)