Title: Site Grayscale Toggle Author: natthasath Published: 11 نوامبر 2025 Last modified: 11 نوامبر 2025 --- جستجوی افزونه‌ها ![](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://fa.wordpress.org/plugins/site-grayscale-toggle/#description) * [نقد و بررسی‌ها](https://fa.wordpress.org/plugins/site-grayscale-toggle/#reviews) * [نصب](https://fa.wordpress.org/plugins/site-grayscale-toggle/#installation) * [توسعه](https://fa.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) ### علاقه‌ مند به توسعه هستید؟ [Browse the code](https://plugins.trac.wordpress.org/browser/site-grayscale-toggle/), check out the [SVN repository](https://plugins.svn.wordpress.org/site-grayscale-toggle/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/site-grayscale-toggle/) by [RSS](https://plugins.trac.wordpress.org/log/site-grayscale-toggle/?limit=100&mode=stop_on_copy&format=rss). ## گزارش تغییرات #### 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** * Last updated **5 ماه پیش** * نصب‌های فعال **10+** * Tested up to **6.8.5** * زبان * [English (US)](https://wordpress.org/plugins/site-grayscale-toggle/) * Tags * [accessibility](https://fa.wordpress.org/plugins/tags/accessibility/)[filter](https://fa.wordpress.org/plugins/tags/filter/) [grayscale](https://fa.wordpress.org/plugins/tags/grayscale/)[toggle](https://fa.wordpress.org/plugins/tags/toggle/) [ui](https://fa.wordpress.org/plugins/tags/ui/) * [نمایش پیشرفته](https://fa.wordpress.org/plugins/site-grayscale-toggle/advanced/) ## امتیازها هنوز هیچ نقدی ارسال نشده است. [افزودن ارزیابی من](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/)