ThemeForge 標記
ThemeForge 從靜態 HTML 建立經典的 WordPress 主題。您使用 HTML 屬性標記可編輯的部分:
fld-* 用於頁面欄位,opt-* 用於全站設定,tax-* 用於分類欄位,wp-* 用於 WordPress 本身(文章、選單、產品)。產生器會將這些屬性轉換為管理員欄位、頁面範本以及網站擁有者可以編輯的管理畫面。設計風格則保持不變。
規則位於 https://themeforge.pro/ai,並會隨產生器變更。 不要憑記憶或從此檔案進行標記:每次會話都請擷取規則。此技能僅說明工作順序。
1. 先確認站點地圖
在編寫標記之前,請回覆一份站點地圖並等待確認:
- 每個頁面檔案及其 slug(
index.html、menu.html、contacts.html…)— 檔案名稱決定 WordPress 範本,因此blog.html是一個名為 blog 的頁面,而非部落格動態; - 內容類型:部落格文章、產品、您自訂的類型及其分類;
- 全站範圍的項目(頁首、頁尾、聯絡資訊)— 這些會放入
theme-options.html; - 語言。
2. 擷取您需要的規則
GET https://themeforge.pro/ai 入口頁面:請先閱讀
GET https://themeforge.pro/ai?m=core 永遠需要,在任何標記之前
GET https://themeforge.pro/ai?m=build 當您「產生」網站而非逐一手動標記時
GET https://themeforge.pro/ai?m=<module> 頁面 · 部落格 · 自訂內容類型 · WooCommerce · 部署 · 舊版
只載入此網站需要的模組:沒有商店的咖啡廳永遠不需要讀取 woocommerce。
3. 邊進行邊標記
在編寫或閱讀每個區段的同時就加上屬性,而不是事後再補做。以下是規則中提到的、最常見錯誤的檢查方式:
- 每個頁面都需要在
<body>上加上wp-fields-group,否則就不會產生任何欄位; - 每個欄位都有名稱;連結及其標題文字的名稱要不同(例如
按鈕/按鈕文字); - 在清單(
fld-loop)中,每張卡片都要加上屬性,而非僅第一張; - 全站範圍的欄位必須宣告在
theme-options.html上。
4. 檢查:免費且無需帳號
將所有頁面一次發送請求,並重複直到收到 "ok": true:
POST https://themeforge.pro/api/validate-markup
Content-Type: application/json
{"pages":[{"name":"index.html","html":"…"},{"name":"theme-options.html","html":"…"}]}
或者從此工具包執行 node scripts/validate.mjs <site-folder>。error 會破壞主題,warning 表示某些內容會被靜默忽略,hint 則值得了解。不會儲存任何資料。
5. 交付
遵循 ?m=deploy:一個包含網站所有內容的 ZIP 壓縮檔(index.html 在根目錄)。使用者將其上傳到 https://themeforge.pro 的專案中,即可免費在瀏覽器中開啟主題的 WordPress 管理後台,並透過訂閱下載主題。如果他們提供專案 ID 和 token,deploy 模組會說明如何透過 HTTP 自行建構主題。
參考資料
- 給一般使用者的屬性參考:https://themeforge.pro/docs
- 標記指南:https://themeforge.pro/docs/ai-guide
- 屬性字典(JSON 格式):https://themeforge.pro/api/attributes
- 一個完整的標記範例:此工具包中的
examples/warm-corner/