想系統學習 WordPress 主題開發?這套中級主題開發教程覆蓋從經典主題到 Block 主題的完整路徑。
本教程內容源自 Learn WordPress 官方學習平臺,由文派開源團隊翻譯並新增中英雙語字幕。全套共 32 節課,涵蓋經典主題基礎、Block 主題轉換、theme.json 配置、模板層級、無障礙開發、主題提交等核心內容。
這套教程適合誰?
- 有 HTML1/CSS2 基礎,想進入 WordPress 主題開發的開發者
- 使用經典主題的開發者,希望遷移到 Block 主題
- 需要深入理解 Template Hierarchy、theme.json、Global Styles 的技術人員
- 計劃向 WordPress.org 提交主題的作者
課程能學到什麼?
經典主題基礎:經典主題簡介、必需檔案、The Loop、Template 層級結構、Template 部件。
Block 主題進階:經典主題轉 Block 主題、Block Variations、Block Style Variations、Block Stylesheets。
全域性配置:theme.json 在經典主題中的應用、全域性設定與樣式(設定/樣式/變體/Pattern/自定義 Template 概述)。
開發實踐:自定義功能、引入資源、主題開發中的 JavaScript、Plugin API3 Hooks、主題構建流程。
主題提交:主題選項、主題測試、無障礙測試工具、無障礙主題開發最佳實踐、主題提交準備、提交至 WordPress.org。
運維與隱私:主題更新、主題與使用者隱私、UI4 最佳實踐、WordPress.org 主題目錄。
課時列表
課時名稱按”中文主標題 + 英文原名”排版,便於對照學習。常見英文名詞包括 Template5、Block6、Child Themes7、theme.json8、Global Styles9、Template Hierarchy10、Template Parts11、The Loop12、Hooks13、Accessibility14。
| 序號 | 課時名稱 | 觀看 |
|---|---|---|
| 1 | Template 概述An overview of Templates | 觀看 |
| 2 | 無障礙主題開發最佳實踐Best practices for developing an accessible theme | 觀看 |
| 3 | 區塊樣式變體Block Style Variations | 觀看 |
| 4 | 區塊樣式表Block Stylesheets | 觀看 |
| 5 | 區塊變體Block Variations | 觀看 |
| 6 | Child ThemesChild Themes | 觀看 |
| 7 | 經典主題轉 Block 主題Converting a classic theme to a block theme | 觀看 |
| 8 | 自定義功能Custom functionality | 觀看 |
| 9 | 全域性設定與樣式:自定義 TemplateGlobal settings and styles – Custom templates | 觀看 |
| 10 | 全域性設定與樣式:Pattern 概述Global settings and styles – Patterns overview | 觀看 |
| 11 | 全域性設定與樣式:設定概述Global settings and styles – Settings overview | 觀看 |
| 12 | 全域性設定與樣式:樣式變體Global settings and styles – Style variations | 觀看 |
| 13 | 全域性設定與樣式:樣式概述Global settings and styles – Styles overview | 觀看 |
| 14 | 引入資源Including assets | 觀看 |
| 15 | 經典主題簡介Introduction to classic themes | 觀看 |
| 16 | 外掛 API 鉤子Plugin API Hooks | 觀看 |
| 17 | 主題提交準備Preparing your theme for submission | 觀看 |
| 18 | 必需主題檔案Required theme files | 觀看 |
| 19 | 提交主題至 WordPress.orgSubmitting your theme to WordPress.org | 觀看 |
| 20 | Template 層級結構Template hierarchy | 觀看 |
| 21 | Template 部件Template parts | 觀看 |
| 22 | 主題測試Testing your theme | 觀看 |
| 23 | The LoopThe Loop | 觀看 |
| 24 | WordPress.org 主題目錄The WordPress org theme directory | 觀看 |
| 25 | 主題構建流程Theme build process | 觀看 |
| 26 | 主題選項Theme options | 觀看 |
| 27 | 經典主題中的 theme.jsonTheme.json in classic themes | 觀看 |
| 28 | 主題與使用者隱私Themes and user privacy | 觀看 |
| 29 | 無障礙測試工具Tools for accessibility testing | 觀看 |
| 30 | 主題更新Updating your theme | 觀看 |
| 31 | 主題開發 UI 最佳實踐User interface best practices in theme development | 觀看 |
| 32 | 主題開發中的 JavaScriptUsing JavaScript during theme development | 觀看 |
本教程由文派開源團隊製作釋出,遵循知識共享協議。覺得有用就分享給需要的朋友,在 B 站關注「文派開源」獲取更多 WordPress 學習資源。
名詞解釋
- HTML:超文字標記語言,網頁內容的基礎格式 ↩︎
- API:應用程式程式設計介面,軟體之間互動的標準方式 ↩︎
- CSS:層疊樣式表,控制網頁外觀和排版 ↩︎
- UI:使用者介面,使用者與軟體互動的視覺部分 ↩︎
- Template:WordPress 模板檔案,控制頁面的內容輸出結構與渲染方式。 ↩︎
- Block:區塊,古騰堡編輯器的基本構建單元,用於組合文章與頁面內容。 ↩︎
- Child Themes:子主題,繼承父主題全部功能並允許獨立自定義的 WordPress 主題機制。 ↩︎
- theme.json:Block 主題的全域性配置檔案,用於統一定義顏色、字型、間距等設計引數。 ↩︎
- Global Styles:全域性樣式,WordPress 站點編輯器中用於統一管理主題外觀的視覺化配置系統。 ↩︎
- Template Hierarchy:模板層級,WordPress 按優先順序查詢並載入模板檔案的規則體系。 ↩︎
- Template Parts:模板部件,可複用的頁面區域元件,如頁首、頁尾和側邊欄。 ↩︎
- The Loop:WordPress 核心查詢迴圈,負責逐條獲取並輸出文章或頁面內容。 ↩︎
- Hooks:鉤子,WordPress 提供的 Action 和 Filter 擴充套件點,允許在特定時機插入自定義邏輯。 ↩︎
- Accessibility:無障礙,使網站對視覺、運動、認知等障礙使用者同樣可用的設計與開發實踐。 ↩︎


發表回覆