Title: Bunny Style Editor
Author: bunnywp
Published: <strong>22 می 2026</strong>
Last modified: 22 می 2026

---

جستجوی افزونه‌ها

![](https://ps.w.org/bunny-style-editor/assets/banner-772x250.png?rev=3543616)

![](https://ps.w.org/bunny-style-editor/assets/icon-256x256.png?rev=3543616)

# Bunny Style Editor

 توسط [bunnywp](https://profiles.wordpress.org/bunnywp/)

[دانلود](https://downloads.wordpress.org/plugin/bunny-style-editor.1.0.0.zip)

 * [جزئیات](https://fa.wordpress.org/plugins/bunny-style-editor/#description)
 * [نقد و بررسی‌ها](https://fa.wordpress.org/plugins/bunny-style-editor/#reviews)
 *  [نصب](https://fa.wordpress.org/plugins/bunny-style-editor/#installation)
 * [توسعه](https://fa.wordpress.org/plugins/bunny-style-editor/#developers)

 [پشتیبانی](https://wordpress.org/support/plugin/bunny-style-editor/)

## توضیحات

Bunny Style Editor helps you add custom CSS from the WordPress admin while you see
a live preview of the site. It includes tools to point at elements in the preview
and get selector suggestions, switch device breakpoints, and pick whether styles
apply everywhere or only to the current context (for example, a single post, page,
archive, 404, or taxonomy view).

#### Key Features

 * **Real-time live preview:** Changes update in the preview as you work so you 
   can check results before saving.
 * **Visual element inspector:** Use the inspect tool, point at an element in the
   preview, and choose from generated selectors to start writing rules.
 * **Responsive editing:** Use Desktop, Tablet, and Mobile views to work with media
   queries and responsive rules.
 * **Contextual scoping:** Add global CSS for the whole site, or store styles for
   a specific post, page, custom post type, category, other archives, 404, or custom
   taxonomy views so rules load only where you intend.
 * **Selector hints and completion:** Suggestions are based on the current preview
   document to match what is on the page.
 * **In-editor validation:** Syntax issues are reported as you type to catch mistakes
   early.
 * **Preview zoom:** Zoom the preview in or out for fine adjustments.
 * **Quick access:** Open the editor from the admin toolbar (when viewing the site)
   with **Edit Style** (current page vs global) and from the **Edit Style** row 
   action on list screens.

If your account can edit custom CSS in WordPress (the `edit_css` capability, typically
administrators), you can use this plugin.

#### Basic usage

 1. **From the admin menu:** In the dashboard, go to **Appearance  Style Editor** to
    open the editor. The global context is a good place for rules that should apply
    site-wide.
 2. **From the site (logged in):** On the front end, use the **Edit Style** item in
    the admin bar. Open **Current Page** to style the view you are on, or **Global**
    for site-wide CSS.
 3. **From a list of posts or pages:** In **Posts** or **Pages**, use the **Edit Style**
    action on a row to open the editor scoped to that item.
 4. **Save your CSS** when you are done. Scopes you did not use stay unchanged.

You can always return to the same **Appearance  Style Editor** screen later to keep
editing.

**Contribute**
 [Contribute on Bitbucket](https://bitbucket.org/bunnywp/bunny-style-editor/src/main/)

## نصب

#### Automatic Installation

 1. Go to your WordPress admin dashboard
 2. Navigate to **Plugins > Add New**
 3. Search for “Bunny Style Editor”
 4. Click **Install Now** and then **Activate**
 5. Open **Appearance  Style Editor**, or use **Edit Style** in the admin bar (front
    end) or in post and page lists as described in Basic usage.

#### Manual Installation

 1. Download the plugin zip file
 2. Upload it to `/wp-content/plugins/` directory
 3. Extract the files
 4. Activate the plugin through the **Plugins** menu in WordPress
 5. Open **Appearance  Style Editor**, or use **Edit Style** as described in Basic 
    usage.

## سوالات متداول

### Who can use the style editor?

Only users with the `edit_css` capability. In a default install, administrators 
have it; to allow other roles, a site can grant that capability as appropriate.

### Does this plugin affect my site’s performance?

The editor interface loads in the admin when you open it. On the front end, the 
CSS you save is minified and output so it applies only in the right context (for
example, post-specific CSS is not loaded on unrelated URLs).

### Can I use this with any theme or page builder?

Bunny Style Editor outputs standard custom CSS. It is intended to work with well-
coded WordPress themes and is commonly used next to the block editor and with third-
party page builders, subject to how those tools load styles.

### Is my CSS safe if I deactivate the plugin?

Custom CSS is stored in the database. It is not output on the front end while the
plugin is inactive, but it is not removed on deactivation. Reactivating the plugin
restores the previous behavior.

## نقد و بررسی‌ها

نقد و بررسی‌ای برای این افزونه یافت نشد.

## توسعه دهندگان و همکاران

“Bunny Style Editor” نرم افزار متن باز است. افراد زیر در این افزونه مشارکت کرده‌اند.

مشارکت کنندگان

 *   [ bunnywp ](https://profiles.wordpress.org/bunnywp/)

[ترجمه “Bunny Style Editor” به زبان شما.](https://translate.wordpress.org/projects/wp-plugins/bunny-style-editor)

### علاقه‌ مند به توسعه هستید؟

[Browse the code](https://plugins.trac.wordpress.org/browser/bunny-style-editor/),
check out the [SVN repository](https://plugins.svn.wordpress.org/bunny-style-editor/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/bunny-style-editor/)
by [RSS](https://plugins.trac.wordpress.org/log/bunny-style-editor/?limit=100&mode=stop_on_copy&format=rss).

## گزارش تغییرات

#### 1.0.0

 * Initial release of Bunny Style Editor.

## اطلاعات

 *  نگارش **1.0.0**
 *  Last updated **2 هفته پیش**
 *  نصب‌های فعال **کمتر از 10**
 *  نگارش وردپرس ** 6.9 یا بالاتر **
 *  Tested up to **7.0**
 *  نگارش PHP ** 7.4 یا بالاتر **
 *  زبان
 * [English (US)](https://wordpress.org/plugins/bunny-style-editor/)
 * Tags
 * [css](https://fa.wordpress.org/plugins/tags/css/)[css editor](https://fa.wordpress.org/plugins/tags/css-editor/)
   [custom css](https://fa.wordpress.org/plugins/tags/custom-css/)[live preview](https://fa.wordpress.org/plugins/tags/live-preview/)
 *  [نمایش پیشرفته](https://fa.wordpress.org/plugins/bunny-style-editor/advanced/)

## امتیازها

هنوز هیچ نقدی ارسال نشده است.

[Your review](https://wordpress.org/support/plugin/bunny-style-editor/reviews/#new-post)

[مشاهده همه بررسی‌ها](https://wordpress.org/support/plugin/bunny-style-editor/reviews/)

## مشارکت کنندگان

 *   [ bunnywp ](https://profiles.wordpress.org/bunnywp/)

## پشتیبانی

چیزی برای گفتن دارید؟ نیاز به کمک دارید؟

 [مشاهده انجمن پشتیبانی](https://wordpress.org/support/plugin/bunny-style-editor/)