想系統學習 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:無障礙,使網站對視覺、運動、認知等障礙用户同樣可用的設計與開發實踐。 ↩︎


發表回覆