Nextora 設計系統 是做什麼的?
此套件中外觀的單一權威來源。子主題程式碼、區塊程式碼、範本和樣式都必須參照此處的調色盤、排版、代碼、樣式變化和切換器。對於任何新子主題,請將此技能與 nextora-child-themes 一起載入;對於任何重新設計樣式或新的區塊,則與 nextora-gutenberg-blocks 一起載入。
首先載入這些參考資料
| 檔案 | 用途 |
|---|---|
references/presets-and-switching.md | 規範性預設身分、角色變數、作用域色彩儲存與 PHP 解析、兩種樣式機制、功能閘門、子主題貢獻、發現/合併規則、scheme-switcher.json 語義、執行時期優先級、新子主題 :root 角色預設值,以及反聲明列表。 |
../nextora-ecosystem/references/source-map.md | 來源與根目錄解析詞彙。 |
../nextora-ecosystem/references/quality-gates.md | 閘門以及共享的下游驗收配方(§8)。 |
參考資料中引用的數值僅為錨點,非當前資料。在編輯前,請重新讀取目標主題本身的 theme.json、CSS 進入點、styles/ 目錄和切換器檔案。
有序工作流程
1. 解析目標並識別即時外觀來源
識別父主題根目錄與作用中主題根目錄。然後按順序讀取:theme.json(調色盤、漸層、字體家族、尺寸、間距、styles、customTemplates)、隨附的 CSS 進入點(父主題為 resources/css/app.css,子主題為其自己的進入點)、styles/ 樹狀結構,以及 scheme-switcher.json。絕不要從技能、螢幕截圖或範例子主題取得調色盤值。
2. 決定正確的機制
| 需求 | 使用 |
|---|---|
| 作者為區塊包裝器選擇顏色/排版/間距 | 核心區塊 supports + get_block_wrapper_attributes() |
| 區塊自身內部的顏色 | 一個作用域屬性,儲存為預設代碼,輸出時解析為預設變數 (§5) |
| 網站範圍內的替代外觀,由擁有者選擇並保留 | 一個 theme.json 樣式變化(styles/*.json、styles/typography/*.json) |
| 面向訪客的預覽選擇 | 切換器,且只能在其閘門之後 (§6) |
| 整個子主題的品牌預設值 | 一個子主題調色盤/字體貢獻加上 :root 角色預設值 (§7) |
優先使用原生支援。只有在全域樣式無法表達時才新增作用域覆蓋,並且絕不要在此機制之外發明第二套外觀系統。
3. 以插件方式並透過識別碼變更預設值
新增預設代碼;不要重新命名或重新指向已繼承內容正在使用的父主題預設代碼。每個表面讀取 var(--wp--preset--color--<slug>)、var(--wp--preset--gradient--<slug>) 或 var(--wp--preset--font-family--<slug>),因此在主題 CSS 中使用文字十六進位碼會使該表面退出調色盤變更和切換器。僅在 CSS 建置使用它們的地方鏡像 Tailwind @theme 別名,並驗證每個別名實際指向的內容,而不是從較舊的指南複製別名區塊——父主題的 --color-secondary 目前解析為 paragraph 預設。
4. 透過 Nextora 角色路由排版
正文、標題和按鈕排版透過 --nextora-font-body、--nextora-font-heading 和 --nextora-font-button 解析。theme.json 使用 var(--nextora-font-body);切換器會將這三個屬性內聯寫入 <html>,並附上具體的字體堆疊。直接讀取預設變數的表面將無法跟隨訪客字體變更。在 theme.json 中新增或變更字體家族(若非系統堆疊則附上 fontFace 資源),並在將其作為預設選擇提供之前載入。
5. 將作用域顏色儲存為預設,並在輸出時解析
遵循 blocks/advanced-icon/color-utils.ts(normalizeColorForStorage、colorValueForPicker)及其 PHP 對應函式(nextora_icon_resolve_color、nextora_icon_hex_to_preset_slug、nextora_ac_resolve_color)中現有的輔助模式:一個被選擇的預設會儲存其代碼;一個與調色盤項目相符的全不透明度十六進位碼會標準化為該項目的代碼;自訂顏色和部分透明度的 8 位十六進位碼保持原樣;漸層以相同方式保留預設身分。輸出時,儲存的代碼變成 var(--wp--preset--color--<slug>),以便調色盤變更能觸及表面,而 8 位十六進位碼則在 sanitize_hex_color() 之前處理。空值表示「主題預設值」且不輸出任何內容。重複使用真實的函式簽名;不要撰寫一個平行的解析器。請記住,顏色控制項不是清理器:儲存的 HTML 仍會通過 wp_kses_post()。
6. 尊重切換器閘門,並貢獻資料而非程式碼
訪客切換器僅在 NEXTORA_COLOR_SCHEME_SWITCHER 嚴格為 true 時才存在。除此之外,沒有有效負載、沒有腳本、沒有頁面主題 CSS、也沒有彈出視窗——並且不應編寫任何子主題端的替代品來填補這個缺口。子主題貢獻的是資料:styles/color-scheme/*.json、styles/font-preset/*.json,選擇性地 styles/*.json 作為捆綁的變化,以及一個可選的 scheme-switcher.json 允許列表。在編寫新子主題時,在其後載入的 CSS(參考資料 §7)中,在 :root 上設定子主題自己的預設角色,而不是固定一個預設字體。絕不要在子主題中新增切換器實作。
7. 在真實表面上驗證
使用目標主題自己的腳本(npm run build:css 或 npm run build)進行建置——絕不要編輯 assets/css/* 輸出,也絕不要聲明建置會重新產生 assets/js/scheme-switcher.js,後者是手動維護的,不在管線之中。然後應用 ../nextora-ecosystem/references/quality-gates.md 及其 §8 設計系統配方,以及 references/presets-and-switching.md §10 中的預設特定步驟。
硬性限制
- 不要硬編碼品牌調色盤。數值來自目標主題的作用中預設值。
- 不要將舊文件中的過時備用十六進位碼傳播到新的主題 CSS 中。
- 不要重新實作切換器,也不要因為範例子主題看起來正確就聲明它能運作:該範例固定了自己的字體並添加了僅子主題的調色盤項目。
- 不要承諾顏色 URL 參數可以覆蓋已解析的捆綁主題,或 Reset 可以清除網站編輯器樣式。
- 不要從主題樣式表重新設計
wp-admin介面;編輯器重置應保留在編輯器畫布內。 - 不要默默地提高宣告的 WordPress/PHP 最低版本要求——而是公開此需求。
- 在交付此工作時,不要修改父主題或範例子主題。
完成檢查
- 目標主題已解析;每個在該主題自己的
theme.json/變體中引用的預設、字體、漸層和代碼都存在。 - 已遵循步驟 2 中的機制表格;在足夠的情況下已使用原生支援。
- 排版透過
--nextora-font-*角色解析,並跟隨預設變更。 - 作用域顏色在顏色與預設相符時儲存預設代碼,保留自訂和部分透明度數值為原樣,並透過預設變數渲染。
- 切換器閘門已受到尊重;子主題貢獻僅為資料;任何新子主題的預設配對都透過角色在
:root上宣告。 - 樣式變化(持久性)和切換器(執行時期預覽)被描述並測試為不同的東西。
- §8 驗收步驟已針對計算後樣式執行,或者未驗證的表面已明確報告。
邊界
僅限於 Markdown 指令和來源支援的參考資料:沒有執行時期腳本、產生器、複製的主題樹、套件管理或安裝自動化,也沒有對父主題或子主題來源的編輯。下游建置和瀏覽器驗證命令屬於目標主題,並列在 ../nextora-ecosystem/references/quality-gates.md 中。