Title: Theme.json Design Manager Author: sulaimandauda Published: 24 مارس 2026 Last modified: 24 مارس 2026 --- جستجوی افزونه‌ها ![](https://ps.w.org/theme-json-design-manager/assets/banner-772x250.png?rev=3490286) ![](https://ps.w.org/theme-json-design-manager/assets/icon-256x256.png?rev=3490305) # Theme.json Design Manager توسط [sulaimandauda](https://profiles.wordpress.org/sulaimandauda/) [دانلود](https://downloads.wordpress.org/plugin/theme-json-design-manager.1.0.0.zip) * [جزئیات](https://fa.wordpress.org/plugins/theme-json-design-manager/#description) * [نقد و بررسی‌ها](https://fa.wordpress.org/plugins/theme-json-design-manager/#reviews) * [نصب](https://fa.wordpress.org/plugins/theme-json-design-manager/#installation) * [توسعه](https://fa.wordpress.org/plugins/theme-json-design-manager/#developers) [پشتیبانی](https://wordpress.org/support/plugin/theme-json-design-manager/) ## توضیحات **Theme.json Design Manager** provides a user-friendly admin interface for managing design tokens that are automatically merged into your theme’s `theme.json` Global Styles pipeline. No code editing required. #### Features * **Color Palette** — Define semantic color tokens with live contrast previews. Generates `--wp--preset--color--{slug}` CSS custom properties. * **Spacing Scale** — Create spacing tokens with drag-to-reorder support. Generates`-- wp--preset--spacing--{slug}` CSS custom properties. * **Typography Scale** — Set font size tokens with optional fluid `clamp()` support. Generates `--wp--preset--font-size--{slug}` CSS custom properties. * **Border Radius** — Define radius presets. Generates `--wp--custom--border-radius--{ slug}` CSS custom properties. * **Shadow Presets** — Create box-shadow tokens with live previews. Generates `-- wp--preset--shadow--{slug}` CSS custom properties. * **Hide Defaults** — Optionally hide theme/core default presets from the editor for a clean, curated design system. CSS custom properties are preserved. * **Reserved Slug Protection** — Automatically detects and renames color slugs ( e.g. “text”, “link”) that conflict with WordPress core CSS marker classes, preventing color override issues in the editor. * **Diagnostics Tab** — View runtime data including stored tokens, merged palette by origin, generated CSS variables, preset classes, and settings at a glance. #### How It Works The plugin stores design tokens in the WordPress database and merges them into the theme’s Global Styles via the `wp_theme_json_data_theme` filter. Tokens use WordPress’s native slug-based merge system — matching slugs are replaced, new slugs are appended. All changes are **fully reversible**. Deactivating the plugin restores original theme styles. #### Developer-Friendly * **Filter hooks** for extending tokens before merge (`gdtm_tokens_before_merge`) * **Action hooks** after save (`gdtm_after_save`) and for custom tab content (` gdtm_after_tab_content`) * **Admin tab filter** (`gdtm_admin_tabs`) for registering additional tabs ## عکس‌های صفحه * [[ * Color palette management with live contrast previews. * [[ * Spacing scale with drag-to-reorder functionality. * [[ * Typography scale with fluid clamp() support. * [[ * Border radius presets with live corner previews. * [[ * Shadow presets with live box-shadow previews. * [[ ## نصب 1. Upload the `theme-json-design-manager` folder to `/wp-content/plugins/`. 2. Activate the plugin through the **Plugins** screen in WordPress. 3. Go to **Appearance Design Manager** to start managing your design tokens. ## سوالات متداول ### Does this plugin require a specific theme? No. It works with any block theme or classic theme that supports `theme.json`. WordPress 6.1 or later is required. ### Will my tokens override the theme’s existing colors/spacing? Yes, tokens with matching slugs replace the theme’s values. New slugs are appended alongside existing ones. This is WordPress’s native slug-based merge behavior. ### What happens when I deactivate the plugin? All plugin-managed tokens are removed from the Global Styles pipeline and your theme’s original `theme.json` values are restored. Your token data is preserved in the database so nothing is lost. When you delete (uninstall) the plugin, the data is removed for a clean uninstall. ### Can I use fluid typography? Yes. On the Typography tab, check the “Fluid” toggle and enter min/max values. WordPress will generate a responsive `clamp()` function automatically. ### How do I reference these tokens in CSS? Each token generates a CSS custom property. For example, a color with slug “primary” becomes `var(--wp--preset--color--primary)`. The CSS variable name is displayed next to each token row in the admin. ## نقد و بررسی‌ها نقد و بررسی‌ای برای این افزونه یافت نشد. ## توسعه دهندگان و همکاران “Theme.json Design Manager” نرم افزار متن باز است. افراد زیر در این افزونه مشارکت کرده‌اند. مشارکت کنندگان * [ sulaimandauda ](https://profiles.wordpress.org/sulaimandauda/) [ترجمه “Theme.json Design Manager” به زبان شما.](https://translate.wordpress.org/projects/wp-plugins/theme-json-design-manager) ### علاقه‌ مند به توسعه هستید؟ [Browse the code](https://plugins.trac.wordpress.org/browser/theme-json-design-manager/), check out the [SVN repository](https://plugins.svn.wordpress.org/theme-json-design-manager/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/theme-json-design-manager/) by [RSS](https://plugins.trac.wordpress.org/log/theme-json-design-manager/?limit=100&mode=stop_on_copy&format=rss). ## گزارش تغییرات #### 1.0.0 * Initial release. * Color palette, spacing scale, typography scale, border radius, and shadow preset management. * Live previews for colors, radius, and shadows. * Fluid typography with clamp() support. * Drag-to-reorder for spacing tokens. * Settings tab with toggles to hide default presets from the editor. * Reserved slug protection — auto-renames color slugs that collide with WordPress core marker classes. * Diagnostics tab — runtime view of stored tokens, merged palette, CSS variables, and preset classes. * Base color fallback — ensures `--wp--preset--color--base` stays defined when replacing the theme palette. * Full theme.json integration via `wp_theme_json_data_theme` filter. * Extensibility hooks for developers. ## اطلاعات * نگارش **1.0.0** * Last updated **2 هفته پیش** * نصب‌های فعال **کمتر از 10** * نگارش وردپرس ** 6.1 یا بالاتر ** * Tested up to **6.9.4** * نگارش PHP ** 7.4 یا بالاتر ** * زبان * [English (US)](https://wordpress.org/plugins/theme-json-design-manager/) * Tags * [block-editor](https://fa.wordpress.org/plugins/tags/block-editor/)[css variables](https://fa.wordpress.org/plugins/tags/css-variables/) [design tokens](https://fa.wordpress.org/plugins/tags/design-tokens/)[global styles](https://fa.wordpress.org/plugins/tags/global-styles/) [theme.json](https://fa.wordpress.org/plugins/tags/theme-json/) * [نمایش پیشرفته](https://fa.wordpress.org/plugins/theme-json-design-manager/advanced/) ## امتیازها هنوز هیچ نقدی ارسال نشده است. [افزودن ارزیابی من](https://wordpress.org/support/plugin/theme-json-design-manager/reviews/#new-post) [مشاهده همه بررسی‌ها](https://wordpress.org/support/plugin/theme-json-design-manager/reviews/) ## مشارکت کنندگان * [ sulaimandauda ](https://profiles.wordpress.org/sulaimandauda/) ## پشتیبانی چیزی برای گفتن دارید؟ نیاز به کمک دارید؟ [مشاهده انجمن پشتیبانی](https://wordpress.org/support/plugin/theme-json-design-manager/)