內容簡介
TeamGraph 是一款專為組織圖與團隊目錄設計的外掛，能夠將團隊成員轉換為可重用的記錄，並以組織圖、卡片網格或目錄列表的形式展示，提升團隊資訊的可視化與可存取性。
【主要功能】
• 三種顯示方式：組織圖、卡片網格、目錄列表
• 成員卡片包含照片、姓名、職稱、電子郵件、電話及個人檔案連結
• 支援部門或地點過濾，或針對單一成員顯示分支
• 支援摺疊/展開分支及即時篩選框
• 自動顯示部門標籤，並可自訂顏色風格
• 簡潔列印，無需依賴 jQuery
外掛標籤
開發者團隊
② 後台搜尋「TeamGraph – Org Chart & Team Directory」→ 直接安裝（推薦）
原文外掛簡介
TeamGraph turns your team into reusable people records and displays them three ways — an organization chart, a card grid, or a directory list — from one Gutenberg block or shortcode. A drag-and-drop builder lives in wp-admin; no page builder required.
Accessible by construction, not by fallback. Most org chart plugins draw a diagram and bolt on a text alternative. TeamGraph inverts that: every view is real, semantic HTML — the chart is a nested list, laid out with pure CSS. Screen readers announce the reporting hierarchy natively, keyboard focus is visible everywhere, visitors without JavaScript get the complete chart, and on phones the tree reflows into a readable list instead of forcing you to pinch-zoom a boardroom diagram.
On the front end (Gutenberg block or [teamgraph] shortcode):
Three views: org chart with connector lines, card grid, directory list
Member cards with photo, name, job title, email, phone, and profile link
Filter any view to one department or location, or chart a single branch from any member
Collapse/expand branches (chart and list) and a live type-to-filter box (grid and list)
Department pills appear automatically where a branch’s assignment changes
Color guides style branches with your brand colors, inherited down the tree
Prints cleanly, fully expanded
No jQuery and no front-end framework — one small script and stylesheet, loaded only where a chart appears
In wp-admin (fast React screens under “TeamGraph”):
Team Members: instant search, sortable columns, pagination, bulk actions, a Trash tab to restore deleted members or remove them permanently, and a one-click copy of the shortcode
Add/Edit Member with a biography, department, location, photo, live card preview, and a searchable manager picker that never offers a choice that would create a reporting cycle
Chart Builder: drag onto a member to change their manager, drag above/below to reorder, live tree search, slide-in editing drawer
Organization: manage your departments and locations in one place
Theme: color guides with up to eight levels and a live card preview — with live WCAG contrast warnings while you pick colors
Settings: sample data you can load and remove with one click, CSV import/export with a downloadable template, a built-in Docs guide, and uninstall data controls
Structured data, not drawings
Members are a custom post type (“reports to” is the post hierarchy; the biography is the post content), departments and locations are taxonomies, and every safeguard is enforced server-side: capability checks per action, reporting-cycle prevention, and color validation. Deleting a manager automatically moves their reports up a level — no orphaned branches, no blocked deletes — and deleted members go to a trash you can restore from, rebuilding their branch.
Development
TeamGraph ships with its complete, unminified source. The two admin bundles in build/ (admin.js and block.js) are compiled from src/ with @wordpress/scripts, which minifies its production output; the corresponding sources and the build configuration are included in the plugin so the compiled files can be reproduced and reviewed.
src/admin/ — the wp-admin React screens. All screens share one bundle and mount by the root element’s data-page attribute.
src/block/ — the block editor bundle for the TeamGraph Chart block.
webpack.config.js and package.json — the build configuration.
To rebuild the bundles from source, run this in the plugin directory:
npm install && npm run build
Everything else runs unbuilt: the PHP in includes/ is plain source, and the front end in assets/frontend/ is hand-written vanilla JavaScript and CSS with no build step and no dependencies.
