現代WordPress主題開發基礎概念
現代WordPress主題架構同傳統方式有顯著區別。核心變化在於全面採用區塊主題（Block Theme）同全站編輯（FSE）模式。即係話主題嘅外觀同佈局，由頁首、頁尾到文章內容，都可以透過Gutenberg編輯器中嘅「區塊」嚟構建同修改，唔使直接編寫複雜嘅PHP模板。
一個現代主題嘅核心檔案結構發生咗根本性簡化。其中最關鍵嘅模板檔案係theme.json，佢定義咗主題嘅樣式、調色板、排版等全域設定。另一個至關重要嘅檔案係index.html，佢取代咗傳統嘅index.php作為預設模板，用靜態嘅、可以被編輯器解析嘅HTML區塊標記嚟構建頁面骨架。同時，style.css檔案依然存在，主要用嚟聲明主題資訊，但大部分嘅CSS樣式定義已經轉移去theme.json或者由編輯器管理。
為咗保持向後兼容性，WordPress會檢查主題根目錄下係咪存在block-templates或templates資料夾。呢啲資料夾用嚟存放基於區塊嘅HTML模板文件，例如single.html或page.html，佢哋會優先過PHP模板文件被使用。同時，處理嚟自主題嘅樣式同前端資源嘅方法依賴於wp_enqueue_style同埋wp_enqueue_script函數，通常喺主文件functions.php入面進行註冊同排隊。
推薦閱讀 WordPress主題開發從入門到精通：手把手教你構建自訂網站。
理解呢種理念嘅轉變——由編寫固定嘅PHP模板到用JSON同塊標記定義樣式同結構——係掌握現代主題開發嘅第一步。
主題核心文件嘅創建同配置
創建現代WordPress主題，首先需要喺wp-content/themes喺目錄下建立一個新嘅主題文件夾。就算係對於區塊主題，style.css文件仍然係必需嘅「身份標識」文件，佢頂部嘅註釋區塊必須包含特定資訊。
/*
Theme Name: 我的现代主题
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 一个使用全站编辑的现代WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-modern-theme
*/跟住，你需要創建現代主題嘅「大腦」——theme.json文件。呢個JSON文件位於主題根目錄，用於集中控制全局樣式同主題設定。透過呢個文件，你可以定義排版系統（例如字體大小、字體族）、調色板、區塊嘅默認樣式等。插件同子主題仲可以對其進行層層覆蓋，實現樣式定制。一個基礎嘅theme.json結構如下：
{
"version": 2,
"settings": {
"color": {
"palette": [
{ "name": "黑色", "slug": "black", "color": "#000000" },
{ "name": "白色", "slug": "white", "color": "#ffffff" }
]
},
"typography": {
"fontSizes": [
{ "name": "小", "slug": "small", "size": "14px" },
{ "name": "中", "slug": "medium", "size": "20px" }
]
}
},
"styles": {
"color": {
"background": "white",
"text": "black"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
}
},
"customTemplates": [
{
"name": "宽幅页面",
"title": "宽幅页面",
"postTypes": [ "page" ]
}
]
}主題嘅主模板index.html定義咗默認嘅頁面結構。佢完全由編輯器可識別嘅HTML註解包裹嘅區塊標記組成，例如：
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->咁樣嘅結構清晰咁劃分咗頁頭、主內容區同埋頁腳，並透過wp:post-content區塊動態載入文章內容。最後，需要喺主題根目錄創建區塊模板部件（Template Parts）目錄parts，並喺入面擺header.html同埋footer.html等部件檔案。
推薦閱讀 2026年熱門入門指南：點樣從零開始整你嘅第一個WordPress主題。
用模板同模板部件砌頁面
喺區塊主題度，頁面嘅佈局結構主要靠模板（Templates）同模板部件（Template Parts）嚟砌。模板用嚟定義特定類型頁面（例如單篇文章、歸檔頁）嘅整體框架，而模板部件就係可以重用嘅模組，好似頁眉同頁腳咁。
模板檔案通常存放喺主題嘅templates資料夾入面。WordPress會根據唔同嘅查詢類型自動配對特定嘅模板檔案。例如，single.html用嚟顯示單篇文章，page.html用嚟顯示靜態頁面，home.html或index.html用喺博客首頁。你可以喺theme.json的customTemplates部分聲明自訂模板，並喺頁面編輯器度畀用戶揀。
模板部件放喺parts文件夾入面，佢大大提升咗程式碼重用率同維護方便度。建立頁眉檔案header.html，可以用站點標題區塊、導航區塊等構建頂部區域。創建頁腳檔案footer.html，可以放置版權資訊同小工具區域。
一個典型嘅header.html可能係咁樣：
<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<header class="wp-block-group">
<!-- wp:site-title /-->
<!-- wp:navigation {"ref":4} /-->
</header>
<!-- /wp:group -->喺呢個例子入面，wp:navigation區塊透過其ref屬性引用咗喺「外觀」->「編輯器」度建立並保存嘅一個導航選單（其ID為4），呢個體現咗全站編輯內容同結構分離嘅強大之處。透過喺主模板度引用呢啲部件，例如，就可以將佢哋插入頁面。
對於更複雜嘅版面，可以利用wp:group、wp:columns、wp:query等區塊嚟構建行、列同循環內容。例如，wp:query區塊可以動態列出最新嘅文章，呢個就等於傳統主題入面嘅主循環，但而家完全透過視覺化編輯器配置。
推薦閱讀 從零開始到精通：WordPress主題開發完整指南與實戰教程。
透過函數檔案添加功能同樣式
雖然區塊主題好大程度依賴theme.json同HTML模板，但functions.php檔案依然係擴展主題功能嘅核心。佢係一個冇返回值嘅PHP檔案，用嚟添加功能、註冊樣式腳本、定義主題支援等等。
一個基本操作係註冊同排隊主題嘅樣式表同腳本。即使樣式主要係theme.json管理，你可能仍然需要額外嘅自定義CSS。
function my_modern_theme_setup() {
// 添加对特定功能的支持，例如自定义标志
add_theme_support('custom-logo');
// 通过区块编辑器添加主题样式
add_theme_support('wp-block-styles');
// 添加对全站编辑器的支持
add_theme_support('editor-styles');
}
add_action('after_setup_theme', 'my_modern_theme_setup');
function my_modern_theme_scripts() {
// 排队主题的主样式表
wp_enqueue_style(
'my-modern-theme-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get('Version')
);
// 排队编辑器样式
add_editor_style('style-editor.css');
}
add_action('wp_enqueue_scripts', 'my_modern_theme_scripts');functions.php都係添加自定義功能嘅絕佳場所。例如，你可以用register_block_style函數為現有嘅核心區塊（例如段落）註冊一個自定義嘅視覺變體，令佢喺編輯器嘅「樣式」面板中出現俾用戶揀選。
// 为段落块注册一个“特别提示”样式
register_block_style(
'core/paragraph',
array(
'name' => 'notice',
'label' => __( '特别提示', 'my-modern-theme' ),
'inline_style' => '.is-style-notice { padding: 1em; border-left: 4px solid #00a0d2; background-color: #f0f8ff; }',
)
);除此之外，你仲可以用鉤子（如wp_head、wp_footer）插入自訂代碼，或者透過add_filter修改預設嘅查詢行為、輸出內容等。對於複雜嘅自訂需求，考慮創建一個小型插件可能係更模組化嘅選擇。
測試與除錯主題
開發完成後，對主題進行全面測試至關重要。首先，應喺本地或臨時環境中激活主題，檢查前台頁面嘅基本佈局、響應式設計、所有核心區塊（標題、段落、圖像、畫廊、按鈕等）嘅樣式係咪正常顯示，導航菜單同連結係咪工作。
其次，需要使用Gutenberg編輯器深度測試。創建新嘅頁面同文章，嘗試使用各種區塊構建複雜佈局，檢查區塊嘅工具欄、設定面板係咪功能正常，自訂樣式（如通過theme.json定義嘅調色板或字體大小）係咪正確應用到區塊上。特別要測試全站編輯器（「外觀」->「編輯器」），嘗試修改頁頭、頁尾、主頁模板等，確保保存後更改能正確反映喺前台。
除錯係現代開發嘅核心環節。打開瀏覽器嘅開發者工具（F12），檢查係咪有JavaScript錯誤或CSS衝突。喺wp-config.php度設定define('WP_DEBUG', true);可以喺頁面上顯示PHP警告同錯誤，幫你快速搵到程式碼問題。同時，確保主題跟足WordPress嘅編碼標準，並檢查控制台嘅W3C驗證器有冇HTML結構錯誤。
最後，喺唔同瀏覽器（Chrome、Firefox、Safari、Edge）同裝置（桌面、平板、手機）上進行跨平台兼容性測試，確保所有用戶都有一致嘅體驗。
摘要
現代WordPress主題開發係一次理念革新，佢從編寫過程式PHP模板轉向咗以theme.json、塊標記同全站編輯為核心嘅聲明式開發。開發者需要熟練掌握theme.json嘅配置嚟定義全局風格，使用HTML區塊模板嚟構建頁面結構，並透過functions.php進行功能增強。呢種模式大幅降低咗自訂佈局嘅門檻，賦予咗內容創作者好大嘅設計自由，同時亦都要求開發者深入理解塊編輯器系統。透過跟隨上述核心技能路徑，你將能夠構建出靈活、強大且面向未來嘅WordPress主題。
常見問題
### 開發區塊主題係咪仲需要PHP知識
係嘅，仍然需要。雖然頁面嘅主要結構由HTML模板定義，但functions.php文件對於添加主題功能、註冊樣式腳本、使用掛鉤同過濾器進行深度定制仍然係必不可少嘅。此外，創建動態嘅、基於自定義查詢嘅模板部件或者處理複雜業務邏輯嗰陣，PHP知識至關重要。
塊主題同傳統主題可以共存嗎？
可以。WordPress會智能判斷主題類型。如果你嘅主題根目錄包含theme.json檔案同templates/parts文件夾下嘅塊模板，WordPress會將其識別為塊主題，並啟用全站編輯功能。但即使喺呢啲文件存在嘅情況下，佢依然會保留傳統主題嘅PHP模板系統作為後備。如果一個請求對應嘅塊模板唔存在，系統會自動退返去用相應嘅PHP模板（例如single.php）。
點樣為我嘅塊主題添加自訂CSS
主要有三種方式。最推薦嘅方式係透過theme.json檔案嘅styles部分添加作用於全局或特定區塊嘅CSS。其次，可以喺主題嘅style.css檔案中編寫額外嘅樣式規則。對於更動態或特定頁面嘅樣式，亦可以喺functions.php入面用wp_add_inline_style函數內聯添加，或者直接為區塊註冊自訂樣式。
全站編輯模式對現有網站有風險嗎
對於已有內容嘅網站，轉換到全新嘅塊主題需要謹慎。建議先喺測試環境（例如本地開發環境或臨時站點）完成主題嘅全面測試，確保所有現有內容喺新主題下能夠正確顯示，佈局唔會出現錯亂。喺轉換之前，務必備份整個網站（包括檔案同數據庫）。全站編輯器功能強大，但直接修改嘅係模板，如果操作不當可能會影響所有使用該模板嘅頁面。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。