內容簡介
**總結:**
CodingBunny CSS Inspector 在 WordPress 前端加入了乾淨、DevTools 風格的側邊欄，讓管理員可以透過一個點擊視覺檢查任何元素並複製其 CSS。
適用於主題定制、調試和快速樣式調整，無需打開瀏覽器 DevTools。
**問題與答案:**
1. 這個 WordPress 外掛的名稱是什麼？
- 答：CodingBunny CSS Inspector。
2. 這個外掛可以讓哪一類使用者進行視覺檢查和複製 CSS？
- 答：管理員。
3. 這個外掛的特點有哪些？
- 答：外掛提供了類似 DevTools 的檢查側邊欄，用於任何元素的完整 CSS 區塊查看、使用的 CSS 變數和偽狀態樣式的即時複製。
4. 在 WordPress 外掛的安裝步驟中，需要將哪個檔案上傳至 /wp-content/plugins/？
- 答：codingbunny-css-inspector 文件夾。
5. 如何在 WordPress 前端啟用此外掛？
- 答：點擊 WordPress 管理條中的“CSS Inspector”。
外掛標籤
開發者團隊
原文外掛簡介
CodingBunny CSS Inspector adds a clean, DevTools-style sidebar to your WordPress frontend, letting administrators visually inspect any element and copy its CSS with a single click.
Perfect for theme customization, debugging, and quick styling adjustments—without ever opening the browser DevTools.
The inspector displays full CSS blocks, selector paths, HEX color values, used CSS variables, and ready-to-copy pseudo-state styles like :hover, :focus, and :active.
Designed for power and simplicity, and visible only to logged-in administrators.
Features
DevTools-like inspection sidebar, launched from the admin bar
Full CSS block viewer for any element (full or simplified selector paths)
Ready-to-copy pseudo-state blocks: :hover, :focus, :active
Automatic extraction of all CSS variables used by the selected element
Copy-to-clipboard buttons with instant visual feedback
Lightweight and unobtrusive—runs only for authenticated admins
Never loads for visitors or on the WordPress dashboard
Installation
Download codingbunny-css-inspector.zip
Unzip the file
Upload the codingbunny-css-inspector folder to /wp-content/plugins/
Activate CodingBunny CSS Inspector from the Plugins screen
Usage
Click “CSS Inspector” in the WordPress admin bar (frontend only)
Hover any element to preview its CSS in the sidebar
Click to lock the selection; press ESC to unlock or click ✕ to close
Toggle between full or compact selector paths
Use the copy buttons to instantly copy selectors and CSS blocks (with green confirmation)
