[WordPress] 外掛分享： Doohickey’s Dev Tools

WordPress 外掛 Doohickey's Dev Tools 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「Doohickey's Dev Tools」是 2026-02-24 上架。
  • 目前尚無安裝啟用數，是個很新的外掛。如有要安裝使用，建議多測試確保功能沒問題！
  • 上一次更新是 2026-02-25，不久前才剛更新。
  • 外掛最低要求 WordPress 5.8 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

mosaiclifecreative |

外掛標籤

code tools | color picker | css generator | developer-tools | web development |

內容簡介

總結：Doohickey 的 Dev Tools 將一整套開發者工具放進您的 WordPress 管理員中。不再需要在瀏覽器標籤之間來回切換或收藏隨機網站 — 您所需的一切只需一鍵即可取得。

問題與答案：
1. Doohickey 的 Dev Tools 提供了哪些免費工具？
- CSS Tools（包含 Gradient Generator、Box Shadow Generator、Border Generator、Border Radius Generator、Clip-Path Maker、Flexbox Generator、CSS Grid Generator）
- Color Tools（包含 Color Picker、Contrast Checker、Color Converter）
- Code Tools（包含 String Utilities、Encoder / Decoder）
- Generators（包含 Placeholder Image、Lorem Ipsum、QR Code Generator）
- SEO & Meta（包含 Schema.org Generator、Meta Tag Generator）
- Converters（包含 SVG to PNG、HTML to Markdown、Markdown Preview、Aspect Ratio Calculator）

2. 升級至 Doohickey 的 Dev Tools Pro 版本將獲得哪些額外功能？
- Palette Generator
- Code Formatter
- Diff Checker
- HTML Table Generator
- Test Data Generator
- Flexbox
- CSS Grid
- Placeholder Image
- Schema.org
- QR Code

3. 為什麼要選擇使用 Doohickey 的 Dev Tools？
- 沒有外部依賴性 — 一切在您的瀏覽器中運行
- 沒有數據離開您的網站 — 您的代碼和內容保持私密
- 一鍵複製生成的 CSS、HTML 和代碼
- 一致的介面設計 — 每個工具都遵循相同乾淨、直觀的布局
- 輕量級 — 單個 JavaScript 捆綁，在工具頁面上加載

以上簡單介紹可見 Doohickey 的 Dev Tools 提供了豐富多樣的開發工具，助您輕鬆進行網站開發。

原文外掛簡介

Doohickey’s Dev Tools puts a full suite of developer utilities right inside your WordPress admin. No more juggling browser tabs and bookmarking random websites — everything you need is one click away.
Free Tools
CSS Tools
* Gradient Generator — Linear and radial gradients with unlimited color stops
* Box Shadow Generator — Visual box-shadow builder with layered shadows
* Border Generator — Shorthand and per-side border controls
* Border Radius Generator — Per-corner radius with visual preview
* Clip-Path Maker — Polygon, circle, ellipse, and inset clip paths
* Flexbox Generator — Visual flexbox playground with container controls
* CSS Grid Generator — Set columns, rows, gaps, and alignment visually
Color Tools
* Color Picker — HSV color picker with HEX, RGB, and HSL output
* Contrast Checker — WCAG 2.1 AA/AAA compliance testing
* Color Converter — Convert between HEX, RGB, HSL, and CMYK
Code Tools
* String Utilities — Case conversion, reverse, slug, character/word count
* Encoder / Decoder — Base64, URL encoding, HTML entities, and more
Generators
* Placeholder Image — Custom-sized placeholder images for mockups
* Lorem Ipsum — Paragraphs, sentences, or words of filler text
* QR Code Generator — Instant QR codes from any text or URL
SEO & Meta
* Schema.org Generator — Structured data for Article, Local Business, and FAQ
* Meta Tag Generator — SEO meta tags, Open Graph, and Twitter Cards
Converters
* SVG to PNG — Client-side SVG conversion with scale options
* HTML to Markdown — Convert HTML markup to clean Markdown
* Markdown Preview — Live Markdown editor with rendered preview
* Aspect Ratio Calculator — Calculate ratios from dimensions, scale with locked ratios, common size presets
Pro Version
Upgrade to Doohickey’s Dev Tools Pro for additional tools and features:

Palette Generator — Interactive color wheel with 7 harmony modes. Export as CSS or SCSS variables.
Code Formatter — Auto-format JSON, HTML, CSS, JavaScript, and SQL
Diff Checker — Side-by-side text comparison with highlighted differences
HTML Table Generator — Visual table builder with CSV import
Test Data Generator — Generate realistic fake data (names, emails, addresses, etc.)
Flexbox — Per-item controls (flex-grow, flex-shrink, flex-basis, align-self, order)
CSS Grid — Templates (Holy Grail, Dashboard, 12-Col, etc.), custom definitions, per-cell spans
Placeholder Image — Social media presets and Data URI export
Schema.org — 5 additional types (Product, Person, Organization, Event, Recipe)
QR Code — Custom logo overlay

Why Doohickey’s Dev Tools?

Zero external dependencies — Everything runs client-side in your browser
No data leaves your site — Your code and content stay private
Copy-ready output — One-click copy for all generated CSS, HTML, and code
Consistent interface — Every tool follows the same clean, intuitive layout
Lightweight — Single JavaScript bundle, loads only on the tools page

Source Code & Build Instructions
The full source code for this plugin, including uncompiled JavaScript and CSS, is available at:
https://github.com/mosaiclifecreative/doohickeys-dev-tools
To build from source:

Clone the repository
Run npm install to install dependencies
Run npm run build to compile the production bundle
The compiled files are output to the build/ directory

The project uses @wordpress/scripts for building. Source files are in admin/js/ (JSX) and admin/css/ (CSS).

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Doohickey's Dev Tools」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0.2 | trunk |

延伸相關外掛（你可能也想知道）

暫無相關外掛推薦。

文章
Filter
Mastodon