Communitygithub.com

FSWP 主題開發者

全端 WordPress 開發者系列中的主題建置階段。負責建立自訂 WordPress 主題——區塊主題(theme.json、模板、模板部件、模式、樣式變體)、經典主題(模板層級、functions.php、主題支援)、混合型主題及子主題——並內建無障礙、跳脫處理及目錄就緒功能,同時提供建構腳本。由 fswp-developer 在新主題的 PRD 核准後呼叫;如需特定主題模式可直接諮詢。若需修改現有主題,請使用 fswp-maintainer。

FSWP 主題開發者 是什麼?

FSWP Theme Developer 是全端 WordPress 開發者(Full-Stack WP Developer)工作流程中的一個專門技能,負責將經核准的主題 PRD(來自 fswp-architect)轉化為實際的 WordPress 主題。它支援所有主題類型:區塊主題(透過 theme.json、模板、模板部件、模式及樣式變體)、經典主題(遵循傳統模板層級與 functions.php)、混合型主題(結合經典模板與 theme.json)以及子主題(用於安全地調整上層主題)。此技能強調可維護性與安全性:嚴格遵循 WordPress 編碼標準(包含跳脫所有輸出、翻譯所有字串)、無障礙規範,並確保主題可供上傳至 WordPress.org 目錄(透過 fswp-release-manager 和 fswp-qa-engineer)。其主要工作流程包括:使用 Python 建構腳本(scaffold_theme.py)建立主題骨架、在 theme.json 或 CSS 中定義設計符記、建置所需的模板層級、在 patterns/ 中註冊可重複使用的區塊模式、透過 styles/ 中的 JSON 檔案建立樣式變體,以及安全地排入靜態資源。它與其他 FSWP 角色(如 fswp-block-developer 用於自訂區塊、fswp-security-engineer 用於安全審查)協作,並嚴格禁止在主題中納入應屬於外掛的功能(如自訂文章類型、自訂區塊、短代碼)。最終產出為一個可安裝的 .zip 檔案,包含主題資料夾、readme.txt、screenshot.png 以及所有整合資產的授權說明。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/syncwin/fswp-developer/tree/main/skills/fswp-theme-developer

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

FSWP 主題開發者 是做什麼的?

基本原則(始終適用): fswp-developer/references/lean-coding.md(少寫多用)、fswp-developer/references/coding-standards.md(編碼標準、文件、國際化、無障礙)以及 fswp-security-engineer(輸入、輸出、授權)。

執行已核准的主題 PRD(fswp-architect)。主題控制呈現方式。必須在主題切換後仍保留的功能(文章類型、整合、業務邏輯)應歸屬於外掛(fswp-plugin-developer);請直接說明,而非將其隱藏在 functions.php 中。

先決定類型

類型選擇時機核心檔案
區塊主題需要網站編輯器編輯;預設用於新建立項目style.css(僅檔案頭)、theme.json、templates/index.html、parts/、patterns/、styles/
經典主題需要 PHP 模板及各模板的自訂邏輯,或需支援舊版 WordPressstyle.css、index.php、functions.php、模板檔案
混合型經典模板加上用於設定及編輯器樣式的 theme.json經典檔案 + theme.json
子主題調整上層主題而不複製其原始碼style.css 加上 Template: 檔案頭、functions.php,僅需覆寫檔案

除非 PRD 另有要求,否則新建立項目預設使用區塊主題。區塊主題需要 WordPress 5.9 或更新版本;在固定 Requires at least 之前,請查閱文件中的目前 theme.json 結構版本及其最低 WordPress 版本。

工作流程

  1. 建立骨架:執行 python3 scripts/scaffold_theme.py --help,然後產生骨架(區塊、經典或子主題)。執行 fswp-qa-engineer/scripts/run_gate.sh <dir> <min-php> --fix 一次。
  2. 設計符記:在 theme.json(區塊/混合型)或 CSS 自訂屬性(經典)中定義調色盤、字體排版、間距、版面寬度以及邊框/陰影預設。在模板和模式中使用預設值,而非寫死數值。
  3. 模板:建置 PRD 所需的層級結構(首頁、網站首頁、文章頁、頁面、彙整頁、搜尋結果頁、404 頁,以及任何自訂模板)。重複使用模板部件來處理頁首、頁尾及重複區段。
  4. 模式:將可重複使用的版面配置註冊為 patterns/ 中的檔案(檔案頭備註:Title、Slug、Categories、可選 Keywords、Viewport Width、Block Types)。不可使用遠端圖片。
  5. 樣式變體:styles/ 中的 JSON 檔案用於提供替代外觀;保持小型,僅作為 theme.json 的覆寫。
  6. 主題真正需要的自訂區塊或互動功能:交給 fswp-block-developer。否則優先使用核心區塊。
  7. 靜態資源:使用 wp_enqueue_scripts(經典)或 theme.json/add_editor_style(區塊)排入資源;字型需本地打包(使用 fontFace 項目)並附上授權;不可使用 CDN 連結。
  8. 安全性、國際化、無障礙:跳脫所有輸出、翻譯所有字串、符合無障礙規範(fswp-security-engineer、fswp-developer/references/coding-standards.md、references/theme-i18n-a11y.md)。對掛勾使用具名且加前綴的函式(不可使用閉包),前綴至少四個字母,並依照編碼標準使用 array() 語法。
  9. 目錄就緒(若目標為 WordPress.org 主題目錄):交給 fswp-release-manager(references/theme-requirements.md),然後執行 python3 ../fswp-qa-engineer/scripts/theme_check.py <dir> --directory。主題不得包含自訂文章類型、區塊、短代碼、角色、聯絡方式或 MIME 類型:這些應歸屬於外掛。主題名稱不得包含「WordPress」、「Theme」或「Twenty」。

完成後交由 fswp-qa-engineer 處理。

經典主題要點

add_theme_support() 需啟用 title-tag 與 automatic-feed-links(兩者皆為目錄要求),另外加上 post-thumbnails、html5、responsive-embeds、wp-block-styles 及 editor-styles;使用 language_attributes()、body_class()、post_class()、wp_link_pages() 以及用於選項權限的 edit_theme_options;使用 register_nav_menus;必須包含 wp_head()、wp_body_open()、wp_footer();對重複部分使用 get_template_part();使用模板標籤而非直接查詢;次要迴圈後使用 wp_reset_postdata();宣告內容寬度與圖片尺寸。

子主題

以正確的相依性排入上層主題樣式表及子主題樣式表;覆寫單一模板而非複製整個上層主題;保持子主題版本獨立於上層版本;不要複製上層主題的 functions.php。

交付

可安裝的 {theme-slug}.zip,主題資料夾位於根目錄,包含 readme.txt、screenshot.png(最寬 1200x900,4:3 比例)、每個打包資產的授權說明,以及預期的手動步驟摘要。參考資料:references/block-theme.md、references/theme-i18n-a11y.md。

Individual skills in this repo

This repo contains 9 individual skills — each has its own dedicated page.

fswp-api-developer

Domain skill for WordPress REST API and Abilities API work in Full-Stack WP Developer. Covers registering routes with schemas, argument validation and sanitization, permission callbacks, controller classes, exposing post types and meta, authentication (cookie nonce, application passwords), pagination and errors, and registering abilities with input and output schemas and safety annotations. Use for any custom endpoint or machine-readable capability in a plugin or theme.

fswp-architect

Planning stage of Full-Stack WP Developer. Classifies the work (new plugin, new theme, update to an existing plugin or theme, add-on for another product, or WordPress Core patch), triages existing code with a bundled detection script, asks one round of essential questions, does competitive research, and produces one reviewable PRD or change brief with a single approval gate. Also covers Migration mode and multi-session handoff docs. Invoked by fswp-developer before any code is written; consult directly for PRD, change-brief, or handoff-doc questions.

fswp-block-developer

Domain skill for WordPress block editor work in Full-Stack WP Developer. Covers building custom Gutenberg blocks (block.json, static and dynamic rendering, attributes, supports, InnerBlocks, variations, deprecations, block bindings), block patterns, and the Interactivity API (data-wp directives, stores, server-side state), with the @wordpress/scripts build workflow. Use for any custom block, pattern, or front-end interactivity in a plugin or theme.

fswp-core-contributor

WordPress Core contribution stage of Full-Stack WP Developer. Guides a contributor through finding or filing a Trac ticket, setting up the wordpress-develop checkout and test environment, writing a patch or GitHub pull request that follows Core coding standards, inline documentation, backward compatibility and tests, and preparing the ticket comment; also routes block-editor changes to the Gutenberg repository and security reports to the private process. Invoked by fswp-developer for Core patches; consult directly for Core workflow questions.

fswp-devops-engineer

Domain skill for WordPress development tooling in Full-Stack WP Developer. Covers local environments (wp-env with Docker, WordPress Playground and Blueprints), command-line site operations (plugin and theme management, database export, search-replace, cron, scaffolding), coding standards and static analysis (PHPCS with WordPress standards, PHPStan with WordPress stubs), PHP and JS testing setup, and the @wordpress/scripts toolchain. Use when setting up, running, or automating a WordPress dev or test environment.

fswp-maintainer

Change stage for existing WordPress code in Full-Stack WP Developer. Updates, fixes, refactors, and upgrades existing plugins and themes without breaking them, and builds add-ons for products you do not own (WooCommerce extensions, page-builder elements, extensions of other plugins) using hooks instead of edits to third-party files. Covers reading before changing, parity lists, deprecation, host compatibility, upgrade paths, and patch delivery. Invoked by fswp-developer after an approved change brief; consult directly for safe-change or add-on questions.

fswp-qa-engineer

Verification stage of Full-Stack WP Developer. Runs the mechanical gate for plugins and themes (house-rule scripts, PHP lint, PHPCS with WordPress standards, PHP compatibility, PHPStan with WordPress stubs), the manual checklist, PRD or change-brief scenario tests, and the pre-release check. Reports PASS, FAIL, or NOT RUN and never implies a skipped check passed. Invoked by fswp-developer after a build and again before delivery; consult directly to audit any plugin or theme folder.

fswp-reviewer

Independent review stage of Full-Stack WP Developer. Reviews a finished WordPress plugin, theme, add-on, or Core patch through a security lens (WordPress-specific vulnerabilities, REST and AJAX authorization with an API risk map, AI-generated-code risks), a quality lens (error handling, data and upgrade safety, performance, i18n, accessibility, comment accuracy, test gaps, class and type design, scope), and an optional lean lens for trimming over-engineering, reporting only high-confidence findings in a fixed format. Invoked by fswp-developer after the verify gate, normally through the fswp-code-reviewer agent; consult directly to review or optimize any WordPress code.

syncwin/fswp-plugin-developer

Plugin build stage of Full-Stack WP Developer. House standards and code templates for real WordPress plugins (not shortcode snippets) - folder anatomy, activation/uninstall lifecycle, custom post types and tables, admin UI tiers, front-end output on the Atomic Framework, REST and cron, i18n, distribution, and the Tier 3 React admin stack - plus a scaffold script. Also the base structure for add-ons. Invoked by fswp-developer after an approved PRD; consult directly for a specific plugin build pattern.

相關技能