網站嘅外觀係訪客嘅第一印象，亦係品牌形象嘅核心載體。用現成嘅WordPress主題雖然方便，但係好多時都難以完全滿足個人化需求。透過從零開始度身訂造自己嘅主題，開發者可以攞到對網站外觀同功能嘅完全控制權。本文會引導你完成呢個過程，涵蓋由環境準備到最終部署嘅每一個關鍵步驟。
準備工作同環境搭建
喺開始寫程式碼之前，建立一個高效、安全嘅開發環境至關重要。呢樣嘢唔單止可以提升開發效率，亦可以確保程式碼嘅規範性同可維護性。
本地開發環境配置
首先，你需要喺本地電腦度搭建一個WordPress運行環境。推薦用整合嘅本地伺服器軟件包，例如Local by Flywheel、XAMPP或者MAMP。呢啲工具可以一鍵安裝PHP、MySQL同Apache/Nginx伺服器。以Local為例，安裝之後創建一個新嘅WordPress站點，揀你鍾意嘅PHP版本，同確保啟用咗除錯模式。
推薦閱讀 WordPress主題開發指南：從新手到高手嘅完整實戰教程。
跟住，進入呢個站點嘅wp-content/themes目錄。喺呢度，你將會創建自己嘅主題資料夾。為佢起一個獨一無二、全細楷並用連字號分隔嘅名，例如my-custom-theme。呢個資料夾就係你主題嘅根目錄。
主題核心檔案創建
每個WordPress主題都必須包含兩個基礎檔案：style.css同埋index.php。喺主題資料夾入面建立style.css檔案，同喺檔案開頭加返主題資訊註解。呢啲資訊係WordPress辨認主題嘅關鍵。
/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: A custom WordPress theme built from scratch.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/Text Domain用嚟做國際化處理，應該要同你嘅主題資料夾名一致。跟住，建立一個最基本嘅index.php檔案，佢暫時可以只係包含一個簡單嘅HTML骨架同埋調用WordPress頭部、尾部函數嘅代碼。
構建主題結構同模板檔案
WordPress使用模板層級系統去決定為唔同嘅頁面類型載入邊個模板檔案。理解同構建呢個結構係主題開發嘅核心。
基礎模板檔案
從創建header.php、footer.php同埋sidebar.php（如果需要側邊欄）開始。呢啲檔案包含咗網站嘅公共部分。喺header.php喺入面，一定要包含wp_head()函數調用，佢容許插件同主題向頁面頭部注入代碼。喺footer.php入面，同樣需要包含wp_footer()函數。
推薦閱讀 打造精品WordPress主題：由設計、開發到上架全流程指南。
然後，修改index.php，使用get_header()、get_footer()同埋get_sidebar()函數嚟引入呢啲模板部件。跟住，創建front-page.php作為靜態首頁模板，或創建home.php作為博客文章索引頁模板。創建single.php用於顯示單篇文章，page.php用於顯示單頁，archive.php用於顯示分類、標籤等歸檔頁面。
模板部件嘅使用
對於更複雜嘅佈局，可以用WordPress嘅「模板部件」功能。喺主題根目錄建立parts或template-parts文件夾，將可以重用嘅代碼片段（例如文章摘要、文章元信息、評論表單）放入去。例如，建立一個template-parts/content.php檔案嚟定義文章內容嘅顯示方式。然後喺index.php或single.php入面，用get_template_part('template-parts/content')嚟調用佢。呢樣嘢極大噉提高咗代碼嘅重用性同埋可維護性。
循環同主查詢
WordPress嘅核心係「循環」，佢係一段用嚟喺頁面上顯示文章嘅PHP代碼。喺主要嘅模板文件入面，你都需要用到循環。一個標準嘅循環結構係咁樣嘅：
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- 在这里输出文章内容，例如： -->
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
<?php endwhile; else : ?>
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' ); ?></p>
<?php endif; ?>理解WP_Query類亦都係好緊要，佢容許你創建自訂查詢嚟攞特定嘅文章列表，例如喺側邊欄顯示最新文章。
新增功能同主題選項
一個完整嘅主題唔單止需要外觀模板，仲需要透過功能檔案嚟增強佢嘅能力，同埋可能會提供自訂設定選項。
主題功能檔案
喺主題根目錄創建functions.php檔案。呢個檔案唔係模板檔案，而係用嚟增加主題功能、註冊選單、小工具區域、載入樣式表同腳本等等。佢就等於你主題嘅「插件」。首先，你應該喺入面加入主題支援嘅功能，例如：
推薦閱讀 WordPress主題開發完整指南：由入門到精通，打造自訂主題。
<?php
function my_custom_theme_setup() {
// 让主题支持文章和评论的RSS feed链接
add_theme_support( 'automatic-feed-links' );
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章特色图像
add_theme_support( 'post-thumbnails' );
// 注册导航菜单
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'my-custom-theme' ),
'footer' => __( 'Footer Menu', 'my-custom-theme' ),
) );
// 添加对古腾堡编辑器的宽对齐和颜色支持
add_theme_support( 'align-wide' );
add_theme_support( 'editor-color-palette', array( /* 颜色数组 */ ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );
?>樣式同腳本嘅排隊載入
千祈唔好直接喺模板檔案入面硬性連結CSS同JS檔案。正確嘅做法係喺functions.php入面用wp_enqueue_style()同埋wp_enqueue_script()函數嚟「排隊」加載資源。呢個遵循咗WordPress嘅依賴管理系統，而且能夠確保資源以正確嘅順序加載，避免衝突。
function my_custom_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), '1.0.0' );
// 加载自定义JavaScript文件
wp_enqueue_script( 'my-custom-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );自訂器同選項框架
為咗令網站管理員能夠唔使修改代碼嘅情況下調整主題（例如修改顏色、Logo），你可以用WordPress定制器API。透過wp_customize鉤子，你可以加設定、控件同部分到定制器面板。對於更複雜嘅需求，亦可以考慮集成好似Kirki噉樣嘅選項框架，佢能夠簡化定制器擴展過程，同埋提供更豐富嘅控件類型。
效能優化與發佈準備
喺主題開發完成之後，必須要進行優化同測試，確保佢性能良好、安全又符合標準。
代碼優化同安全
確保所有動態輸出嘅數據都經過適當嘅轉義。使用WordPress提供嘅函數如esc_html()、esc_attr()、esc_url()同埋wp_kses_post()嚟防止XSS攻擊。對於翻譯字串，使用__()、_e()等函數，並且確保Text Domain啱。剷走晒啲除錯代碼，例如var_dump()或print_r()。
性能方面，要確保圖片尺寸啱使，考慮用響應式圖片。檢查同埋壓縮CSS同JavaScript檔案（可以喺構建過程做，唔好直接喺functions.php度載入壓縮版本）。善用瀏覽器快取，同埋確保個主題支援延遲載入。
主題測試同審查
喺多種環境（唔同PHP版本、唔同WordPress版本）同瀏覽器度進行測試。用WordPress官方提供嘅Theme Unit Test Data嚟導入測試內容，檢查主題喺各種場景下嘅表現（例如長標題、冇特色圖像、嵌套評論等等）。運行Theme Check插件，呢個係必須嘅步驟，佢可以檢查你嘅主題係咪符合WordPress主題目錄嘅最新標準同最佳實踐。修復所有「必需」同「推薦」級別嘅問題。
最後，創建一個清晰嘅readme.txt檔案，說明主題功能、安裝步驟、可選插件等等。為你嘅主題整一張靚嘅截圖，命名為screenshot.png，同擺喺主題根目錄。
摘要
由零開始自訂WordPress主題係一個系統性嘅工程，佢要求開發者同時具備前端（HTML、CSS、JavaScript）同後端（PHP）技能，並且深入理解WordPress嘅核心概念，例如模板層級、循環、掛鉤同API。透過跟從結構化嘅開發流程——由搭建環境、構建模板、添加功能到最終優化測試——你將能夠創建一個完全符合需求、高效能同安全嘅專屬主題。呢個過程唔單止賦予咗網站獨特嘅外觀，亦都帶俾你對WordPress內部運作原理嘅深刻理解，呢個係用任何現成主題都冇辦法比擬嘅優勢。
常見問題
我開始自訂WordPress主題需要具備啲咩基礎知識？
你需要穩固掌握HTML同CSS，呢啲係構建網頁外觀嘅基石。同時，必須具備PHP嘅基本知識，因為WordPress同佢嘅主題主要係由PHP驅動。對JavaScript有一定了解都會非常有幫助，用嚟加互動功能。最緊要係，要對WordPress嘅基本結構，好似文章、頁面、分類、標籤、菜單同小工具等概念有清晰嘅理解。
自訂主題同子主題開發有咩分別？
自訂主題係由頭開始創建一個全新嘅獨立主題，擁有完整嘅文件結構，好似本文所講咁。而子主題開發就係基於一個現有嘅父主題，通過創建一個新嘅主題目錄並加載父主題嘅樣式同功能，只係覆蓋你需要修改嘅部分。子主題適合對現有主題進行小修改或者個人化，當父主題更新嗰陣，你嘅自訂內容通常可以保留到。由零開始自訂就提供最大嘅靈活性同控制力，但需要更多開發功夫。
點樣可以令我嘅主題支援古騰堡編輯器？
為咗令主題更加好咁支援古騰堡編輯器，你需要喺functions.php入面用add_theme_support函數度聲明一系列嘅功能。例如，用add_theme_support('editor-styles')嚟容許載入編輯器樣式，跟住用add_editor_style()函數嚟指定編輯器用嘅CSS檔案。你仲可以加埋對齊闊區塊、區塊顏色面板、區塊字體大小等等嘅支援。咁樣可以確保喺前端見到嘅文章樣式同喺古騰堡編輯器度編輯嗰陣嘅樣式大致一樣。
主題開發完成之後，點樣將佢提交到WordPress官方主題目錄？
提交到WordPress.org官方主題目錄需要經過嚴格審�核。首先，你要確保主題100%通過Theme Check插件嘅測試，並符合所有《主題審查手冊》中嘅要求。然後，喺WordPress.org上開一個帳戶，透過「主題提交」表格上傳你嘅主題壓縮檔。審核團隊會對你嘅主題進行人手審查，呢個過程可能需要幾個禮拜時間。佢哋會檢查代碼質素、安全性、許可協議、翻譯支援同功能實現等。根據反饋進行修改，直到主題被批准收錄。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。