{"id":10917,"date":"2026-05-22T19:29:50","date_gmt":"2026-05-22T11:29:50","guid":{"rendered":"https:\/\/aeosub.com\/bunny-style-editor\/"},"modified":"2026-05-22T19:29:50","modified_gmt":"2026-05-22T11:29:50","slug":"bunny-style-editor","status":"publish","type":"post","link":"https:\/\/aeosub.com\/zh\/bunny-style-editor\/","title":{"rendered":"Bunny Style Editor"},"content":{"rendered":"<div class=\"post-img\" style=\"margin-bottom: 25px\"><img decoding=\"async\" src=\"https:\/\/ps.w.org\/bunny-style-editor\/assets\/banner-1544x500.png?rev=3543616\" alt=\"Bunny Style Editor\" style=\"width: 100%;height: auto;border-radius: 12px\"><\/div>\n<div class=\"plugin-info-card\" style=\"border: 1px solid #e2e8f0;border-radius: 10px;overflow: hidden;margin-bottom: 30px;font-family: -apple-system, system-ui, sans-serif;background: #fff\">\n<table style=\"width: 100%;border-collapse: collapse;font-size: 14px\">\n<tr style=\"border-bottom: 1px solid #edf2f7\">\n<th style=\"padding: 15px 20px;text-align: left;width: 35%;color: #4a5568;background: #fcfcfc\"><img decoding=\"async\" src=\"https:\/\/ps.w.org\/bunny-style-editor\/assets\/icon-256x256.png?rev=3543616\" style=\"width: 40px;height: 40px;border-radius: 6px;margin-right: 12px;vertical-align: middle\"> Developer<\/th>\n<td style=\"padding: 15px 20px;font-weight: 500\"><a href=\"https:\/\/profiles.wordpress.org\/bunnywp\/\" target=\"_blank\" rel=\"noopener\">bunnywp<\/a><\/td>\n<\/tr>\n<tr style=\"border-bottom: 1px solid #edf2f7\">\n<th style=\"padding: 12px 20px;text-align: left;color: #4a5568;background: #fcfcfc\">Version<\/th>\n<td style=\"padding: 12px 20px\">v1.0.0<\/td>\n<\/tr>\n<tr style=\"border-bottom: 1px solid #edf2f7\">\n<th style=\"padding: 12px 20px;text-align: left;color: #4a5568;background: #fcfcfc\">Active Installs<\/th>\n<td style=\"padding: 12px 20px\">0 +<\/td>\n<\/tr>\n<tr style=\"border-bottom: 1px solid #edf2f7\">\n<th style=\"padding: 12px 20px;text-align: left;color: #4a5568;background: #fcfcfc\">Requires \/ Tested<\/th>\n<td style=\"padding: 12px 20px\">6.9 \/ 7.0<\/td>\n<\/tr>\n<tr style=\"border-bottom: 1px solid #edf2f7\">\n<th style=\"padding: 12px 20px;text-align: left;color: #4a5568;background: #fcfcfc\">Last Updated<\/th>\n<td style=\"padding: 12px 20px\">2026-05-22 11:17am GMT<\/td>\n<\/tr>\n<tr>\n<th style=\"padding: 12px 20px;text-align: left;color: #4a5568;background: #fcfcfc\">Official Link<\/th>\n<td style=\"padding: 12px 20px\"><a href=\"https:\/\/wordpress.org\/plugins\/bunny-style-editor\/\" target=\"_blank\" style=\"text-decoration: none;color: #4a3bca;font-weight: bold\" rel=\"noopener\">View Details \u2192<\/a><\/td>\n<\/tr>\n<\/table><\/div>\n<div class=\"plugin-short-desc\" style=\"margin: 20px 0;padding: 12px 15px;background: #f9fafb;border-left: 4px solid #4a3bca;border-radius: 6px;font-style: italic;color: #4a5568\">Edit custom CSS with live preview, a visual element inspector, responsive breakpoints, and site-wide or contextual scoping.<\/div>\n<p>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).<\/p>\n<h4>Key Features<\/h4>\n<ul>\n<li><strong>Real-time live preview:<\/strong> Changes update in the preview as you work so you can check results before saving.<\/li>\n<li><strong>Visual element inspector:<\/strong> Use the inspect tool, point at an element in the preview, and choose from generated selectors to start writing rules.<\/li>\n<li><strong>Responsive editing:<\/strong> Use Desktop, Tablet, and Mobile views to work with media queries and responsive rules.<\/li>\n<li><strong>Contextual scoping:<\/strong> 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.<\/li>\n<li><strong>Selector hints and completion:<\/strong> Suggestions are based on the current preview document to match what is on the page.<\/li>\n<li><strong>In-editor validation:<\/strong> Syntax issues are reported as you type to catch mistakes early.<\/li>\n<li><strong>Preview zoom:<\/strong> Zoom the preview in or out for fine adjustments.<\/li>\n<li><strong>Quick access:<\/strong> Open the editor from the admin toolbar (when viewing the site) with <strong>Edit Style<\/strong> (current page vs global) and from the <strong>Edit Style<\/strong> row action on list screens.<\/li>\n<\/ul>\n<p>If your account can edit custom CSS in WordPress (the <code>edit_css<\/code> capability, typically administrators), you can use this plugin.<\/p>\n<h4>Basic usage<\/h4>\n<ol>\n<li><strong>From the admin menu:<\/strong> In the dashboard, go to <strong>Appearance <span aria-hidden=\"true\" class=\"wp-exclude-emoji\">\u2192<\/span> Style Editor<\/strong> to open the editor. The global context is a good place for rules that should apply site-wide.<\/li>\n<li><strong>From the site (logged in):<\/strong> On the front end, use the <strong>Edit Style<\/strong> item in the admin bar. Open <strong>Current Page<\/strong> to style the view you are on, or <strong>Global<\/strong> for site-wide CSS.<\/li>\n<li><strong>From a list of posts or pages:<\/strong> In <strong>Posts<\/strong> or <strong>Pages<\/strong>, use the <strong>Edit Style<\/strong> action on a row to open the editor scoped to that item.<\/li>\n<li><strong>Save your CSS<\/strong> when you are done. Scopes you did not use stay unchanged.<\/li>\n<\/ol>\n<p>You can always return to the same <strong>Appearance <span aria-hidden=\"true\" class=\"wp-exclude-emoji\">\u2192<\/span> Style Editor<\/strong> screen later to keep editing.<\/p>\n<p><strong>Contribute<\/strong><br \/>\n<a href=\"https:\/\/bitbucket.org\/bunnywp\/bunny-style-editor\/src\/main\/\" rel=\"nofollow ugc noopener\" target=\"_blank\">Contribute on Bitbucket<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Edit custom CSS with live preview, a visual element inspector, responsive breakpoints, and site-wide or contextual scoping.<\/p>","protected":false},"author":1,"featured_media":9317,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[252],"tags":[936,1729,1730,1731,1732,555],"class_list":["post-10917","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-trends","tag-css","tag-css-editor","tag-custom-css","tag-live-preview","tag-style-editor","tag-wordpress-plugin"],"_links":{"self":[{"href":"https:\/\/aeosub.com\/zh\/wp-json\/wp\/v2\/posts\/10917","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aeosub.com\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aeosub.com\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aeosub.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aeosub.com\/zh\/wp-json\/wp\/v2\/comments?post=10917"}],"version-history":[{"count":0,"href":"https:\/\/aeosub.com\/zh\/wp-json\/wp\/v2\/posts\/10917\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aeosub.com\/zh\/wp-json\/wp\/v2\/media\/9317"}],"wp:attachment":[{"href":"https:\/\/aeosub.com\/zh\/wp-json\/wp\/v2\/media?parent=10917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aeosub.com\/zh\/wp-json\/wp\/v2\/categories?post=10917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aeosub.com\/zh\/wp-json\/wp\/v2\/tags?post=10917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}