# 《WordPress 中級主題開發》影片教程完整版｜文派中英字幕 *Published:* 2026-04-20 *Author:* 殼殼蟲 想系統學習 WordPress 主題開發？這套中級主題開發教程覆蓋從經典主題到 Block 主題的完整路徑。 本教程內容源自 Learn WordPress 官方學習平臺，由文派開源團隊翻譯並新增中英雙語字幕。全套共 32 節課，涵蓋經典主題基礎、Block 主題轉換、theme.json 配置、模板層級、無障礙開發、主題提交等核心內容。 這套教程適合誰？ -------- - 有 HTML[1](#af6021d8)/CSS[2](#ab7e1c0c) 基礎，想進入 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 API[3](#b7ec1d8b) Hooks、主題構建流程。 **主題提交**：主題選項、主題測試、無障礙測試工具、無障礙主題開發最佳實踐、主題提交準備、提交至 WordPress.org。 **運維與隱私**：主題更新、主題與使用者隱私、UI[4](#61bc5291) 最佳實踐、WordPress.org 主題目錄。 課時列表 ---- 課時名稱按”中文主標題 + 英文原名”排版，便於對照學習。常見英文名詞包括 Template[5](#1a2b3c4d)、Block[6](#2b3c4d5e)、Child Themes[7](#3c4d5e6f)、theme.json[8](#4d5e6f7a)、Global Styles[9](#5e6f7a8b)、Template Hierarchy[10](#6f7a8b9c)、Template Parts[11](#7a8b9c0d)、The Loop[12](#8b9c0d1e)、Hooks[13](#9c0d1e2f)、Accessibility[14](#0d1e2f3a)。 序號課時名稱觀看1**Template 概述**An overview of Templates[觀看](https://www.bilibili.com/video/BV1xwdpB2EmZ)2**無障礙主題開發最佳實踐**Best practices for developing an accessible theme[觀看](https://www.bilibili.com/video/BV1L4dsBTEQB)3**區塊樣式變體**Block Style Variations[觀看](https://www.bilibili.com/video/BV1b7dHB2EMS)4**區塊樣式表**Block Stylesheets[觀看](https://www.bilibili.com/video/BV1b7dHB2E8S)5**區塊變體**Block Variations[觀看](https://www.bilibili.com/video/BV16idHBYEwH)6**Child Themes**Child Themes[觀看](https://www.bilibili.com/video/BV1JEdsBkEqt)7**經典主題轉 Block 主題**Converting a classic theme to a block theme[觀看](https://www.bilibili.com/video/BV1xMdsBJEaa)8**自定義功能**Custom functionality[觀看](https://www.bilibili.com/video/BV1NxdHB3EPt)9**全域性設定與樣式：自定義 Template**Global settings and styles – Custom templates[觀看](https://www.bilibili.com/video/BV1izdHBhEWk)10**全域性設定與樣式：Pattern 概述**Global settings and styles – Patterns overview[觀看](https://www.bilibili.com/video/BV1iCdHBZEED)11**全域性設定與樣式：設定概述**Global settings and styles – Settings overview[觀看](https://www.bilibili.com/video/BV1e1dHB4EFc)12**全域性設定與樣式：樣式變體**Global settings and styles – Style variations[觀看](https://www.bilibili.com/video/BV1bZdHBEExb)13**全域性設定與樣式：樣式概述**Global settings and styles – Styles overview[觀看](https://www.bilibili.com/video/BV1QSdHB9Esb)14**引入資源**Including assets[觀看](https://www.bilibili.com/video/BV11WdHBrE5b)15**經典主題簡介**Introduction to classic themes[觀看](https://www.bilibili.com/video/BV1pbdHBTEeT)16**外掛 API 鉤子**Plugin API Hooks[觀看](https://www.bilibili.com/video/BV1d2dWBeEJH)17**主題提交準備**Preparing your theme for submission[觀看](https://www.bilibili.com/video/BV1hodWBoEPQ)18**必需主題檔案**Required theme files[觀看](https://www.bilibili.com/video/BV18fdWBxEYh)19**提交主題至 WordPress.org**Submitting your theme to WordPress.org[觀看](https://www.bilibili.com/video/BV114dWB7E62)20**Template 層級結構**Template hierarchy[觀看](https://www.bilibili.com/video/BV1UddHBSE1k)21**Template 部件**Template parts[觀看](https://www.bilibili.com/video/BV18RdHBnE2b)22**主題測試**Testing your theme[觀看](https://www.bilibili.com/video/BV12NdsBHEf6)23**The Loop**The Loop[觀看](https://www.bilibili.com/video/BV1k8dHBqEx9)24**WordPress.org 主題目錄**The WordPress org theme directory[觀看](https://www.bilibili.com/video/BV14NdsBHEGD)25**主題構建流程**Theme build process[觀看](https://www.bilibili.com/video/BV1qkdWBTEDQ)26**主題選項**Theme options[觀看](https://www.bilibili.com/video/BV1k5dsBLEs7)27**經典主題中的 theme.json**Theme.json in classic themes[觀看](https://www.bilibili.com/video/BV1xMdsBJEAf)28**主題與使用者隱私**Themes and user privacy[觀看](https://www.bilibili.com/video/BV1JndsB3ECu)29**無障礙測試工具**Tools for accessibility testing[觀看](https://www.bilibili.com/video/BV1jsdsBBEiH)30**主題更新**Updating your theme[觀看](https://www.bilibili.com/video/BV1WSoKBYExH)31**主題開發 UI 最佳實踐**User interface best practices in theme development[觀看](https://www.bilibili.com/video/BV1vUdWBAESB)32**主題開發中的 JavaScript**Using JavaScript during theme development[觀看](https://www.bilibili.com/video/BV1YXdWB8EqN)--- 本教程由文派開源團隊製作釋出，遵循知識共享協議。覺得有用就分享給需要的朋友，在 B 站關注「文派開源」獲取更多 WordPress 學習資源。 ### 名詞解釋 1. HTML：超文字標記語言，網頁內容的基礎格式 [↩︎](#af6021d8-link) 2. API：應用程式程式設計介面，軟體之間互動的標準方式 [↩︎](#b7ec1d8b-link) 3. CSS：層疊樣式表，控制網頁外觀和排版 [↩︎](#ab7e1c0c-link) 4. UI：使用者介面，使用者與軟體互動的視覺部分 [↩︎](#61bc5291-link) 5. Template：WordPress 模板檔案，控制頁面的內容輸出結構與渲染方式。 [↩︎](#1a2b3c4d-link) 6. Block：區塊，古騰堡編輯器的基本構建單元，用於組合文章與頁面內容。 [↩︎](#2b3c4d5e-link) 7. Child Themes：子主題，繼承父主題全部功能並允許獨立自定義的 WordPress 主題機制。 [↩︎](#3c4d5e6f-link) 8. theme.json：Block 主題的全域性配置檔案，用於統一定義顏色、字型、間距等設計引數。 [↩︎](#4d5e6f7a-link) 9. Global Styles：全域性樣式，WordPress 站點編輯器中用於統一管理主題外觀的視覺化配置系統。 [↩︎](#5e6f7a8b-link) 10. Template Hierarchy：模板層級，WordPress 按優先順序查詢並載入模板檔案的規則體系。 [↩︎](#6f7a8b9c-link) 11. Template Parts：模板部件，可複用的頁面區域元件，如頁首、頁尾和側邊欄。 [↩︎](#7a8b9c0d-link) 12. The Loop：WordPress 核心查詢迴圈，負責逐條獲取並輸出文章或頁面內容。 [↩︎](#8b9c0d1e-link) 13. Hooks：鉤子，WordPress 提供的 Action 和 Filter 擴充套件點，允許在特定時機插入自定義邏輯。 [↩︎](#9c0d1e2f-link) 14. Accessibility：無障礙，使網站對視覺、運動、認知等障礙使用者同樣可用的設計與開發實踐。 [↩︎](#0d1e2f3a-link)