準備工作同環境搭建
喺開始寫第一行程式碼之前，正確嘅開發環境係高效工作嘅基石。一個結構清晰、功能完備嘅本地環境可以令你專注於主題邏輯，而唔係環境配置問題。
本地開發環境嘅選擇同配置
推薦使用整合咗 Apache/Nginx、PHP 同 MySQL 嘅本地伺服器軟體套件，例如 Local by Flywheel、XAMPP 或者 MAMP。呢啲工具可以一鍵搭建符合 WordPress 運行要求嘅 PHP 環境。請確保你嘅 PHP 版本喺 7.4 或以上，MySQL 版本喺 5.6 或以上，以兼容最新嘅 WordPress 核心功能。
創建基礎主題檔案結構
一個最簡化嘅 WordPress 主題最少需要兩個檔案：style.css 同埋 index.php。但係為咗清晰同可維護性，我哋建議由一開始就建立規範嘅目錄結構。喺你嘅 WordPress 安裝目錄入面 wp-content/themes/ 資料夾入面，創建一個新嘅資料夾，例如 my-custom-theme。喺呢個資料夾入面，先創建以下核心檔案：
- style.css：主題樣式表，亦都係主題嘅「身份證」，包含主題資訊。
- index.php：主題嘅主模板檔案，控制預設嘅頁面顯示。
- functions.php：主題嘅功能檔案，用於添加功能、註冊菜單、側邊欄等等。
- header.php：網站頭部模板。
- footer.php：網站底部模板。
推薦閱讀 WordPress主題開發：從零開始構建專業級網站主題嘅完整指南。
構建主題核心文件同模板層級
WordPress 採用模板層級系統去決定為唔同類型嘅請求載入邊個模板檔案。理解同正確構建呢啲檔案係主題開發嘅核心。
定義主題資訊同引入資源
style.css 檔案頭部必須包含一段格式化嘅註釋，用嚟向 WordPress 聲明你嘅主題。呢個係啟動主題嘅前提。
/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 一个从零开始构建的自定义 WordPress 主题。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/跟住，你需要喺 functions.php 檔案入面，透過 wp_enqueue_style() 同埋 wp_enqueue_script() 函數正確噉引入 CSS 同 JavaScript 檔案。呢個係 WordPress 推薦嘅方式，佢可以管理依賴同避免資源衝突。
<?php
function my_theme_scripts() {
// 引入主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
// 引入自定义 JavaScript 文件
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
?>拆開頭部同底部模板
將網站嘅公共頭部同底部代碼分開到 header.php 同埋 footer.php 喺度，係保持代碼 DRY（Don‘t Repeat Yourself）原則嘅關鍵。喺 header.php 入面，你需要包含 wp_head() 鈎子，佢容許 WordPress 核心、插件同其他腳本向頁面頭部注入必要代碼（例如 SEO 元標籤）。同樣地，footer.php 入面應該包含 wp_footer() 鉤子。
然後，喺其他模板檔案入面，使用 get_header() 同埋 get_footer() 函數去叫佢哋。
推薦閱讀 WordPress插件開發完整指南：從入門到精通構建自訂功能。
// 在 index.php 中的典型结构
<?php get_header(); ?>
<main>
<!-- 主循环内容 -->
</main>
<?php get_sidebar(); ?> <!-- 如果需要侧边栏 -->
<?php get_footer(); ?>理解同實現主循環
主循環（The Loop）係 WordPress 用嚟從數據庫度攞同顯示文章嘅機制。佢通常出現係 index.php、single.php、page.php 等模板入面。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>">
<h2><a href="/yue/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<?php endwhile; else : ?>
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' ); ?></p>
<?php endif; ?>呢段代碼使用 have_posts() 同埋 the_post() 函數會遍歷所有符合條件嘅文章，並利用模板標籤例如 the_title()、the_content() 嚟輸出內容。
加入主題功能同自訂選項
一個成熟嘅主題唔單止需要展示內容，仲需要提供一啲可配置嘅功能，令到用戶無需修改代碼就可以調整網站外觀。
註冊導航選單同側邊欄
在 functions.php 入面用 register_nav_menus() 函數用嚟聲明主題支援嘅一個或多個導航菜單位置。
function my_theme_setup() {
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'my-custom-theme' ),
'footer' => __( 'Footer Menu', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );註冊之後，用戶可以喺後台嘅「外觀」->「菜單」度管理呢啲菜單。喺模板入面（例如 header.php），用 wp_nav_menu() 函數嚟顯示菜單。
同樣，使用 register_sidebar() 函數可以創建動態嘅小工具區域（側邊欄）。
推薦閱讀 WordPress插件開發入門指南：由零開始打造你嘅首個插件。
集成主題定制器支援
WordPress 定制器（Customizer）提供咗一個即時預覽介面，等用戶可以調整主題設定。你可以透過 wp_customize API 為你嘅主題加入選項，例如網站logo、顏色方案等等。
function my_theme_customize_register( $wp_customize ) {
// 添加一个“颜色”板块
$wp_customize->add_section( 'my_theme_colors', array(
'title' => __( 'Colors', 'my-custom-theme' ),
'priority' => 30,
) );
// 在板块内添加一个“主色调”设置
$wp_customize->add_setting( 'primary_color', array(
'default' => '#0073aa',
'sanitize_callback' => 'sanitize_hex_color',
) );
// 为该设置添加一个颜色选择器控件
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
'label' => __( 'Primary Color', 'my-custom-theme' ),
'section' => 'my_theme_colors',
'settings' => 'primary_color',
) ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );之後，你喺前端可以用 get_theme_mod( 'primary_color' ) 嚟攞到用戶設定嘅數值，然後輸出到 CSS 入面。
主題優化同發佈準備
開發完成之後，對主題進行優化同測試係確保佢穩定性、安全性同埋良好效能嘅必要步驟。
確保代碼安全同可翻譯性
所有直接輸出到頁面嘅動態文本，都應該用翻譯函數包裝，以實現國際化（i18n）。最常用嘅函數係 esc_html()、esc_html_e() 同埋 ()。同時，對於從用戶或數據庫攞到並用喺 HTML 屬性、URL 或 JavaScript 嘅變量，必須用相應嘅清理函數，例如 esc_attr()、esc_url() 同埋 wp_kses_post()，以防止跨站腳本（XSS）攻擊。
進行跨瀏覽器同響應式測試
你嘅主題必須喺唔同瀏覽器（Chrome、Firefox、Safari、Edge）同唔同裝置尺寸（手機、平板、桌面）上都正常顯示同運作。用 CSS 媒體查詢（Media Queries）嚟實現回應式佈局。發佈之前，一定要做詳細嘅實機測試，或者用瀏覽器開發者工具入面嘅裝置模擬功能幫手測試吓。
性能優化同清理
移除開發過程中可能留低嘅除錯程式碼同註解。確保圖片等資源經過壓縮。考慮將細嘅 CSS 或 JavaScript 檔案合併埋一齊，同埋啟用伺服器端嘅 Gzip 壓縮。雖然主題本身唔處理快取，但可以確保程式碼係乾淨嘅，同埋建議用戶用性能插件（例如 W3 Total Cache）嚟進一步提升網站速度。
建立主題說明文件
一個專業嘅主題應該包含 readme.txt 文件，簡要說明主題功能、安裝方法、自訂選項嘅使用等等。呢個唔單止係俾用戶嘅使用指南，亦係提交到 WordPress 官方主題目錄時必備嘅文件。
摘要
從零開始構建一個自訂 WordPress 主題係一個系統性嘅工程，佢要求開發者唔單止要理解 HTML、CSS 同 PHP，更加需要深入掌握 WordPress 嘅核心概念，例如模板層級、主循環、掛鉤同 API。透過由環境搭建、檔案結構規劃開始，逐步實現模板檔案、加入功能選項，並最終進行優化同安全加固，你將能夠創建一個符合現代網頁標準、安全可靠且易於維護嘅 WordPress 主題。呢個過程係深入學習 WordPress 內部機制嘅最佳途徑，賦予你完全掌控網站外觀同功能嘅能力。
常見問題
開發WordPress主題係咪一定要精通PHP？
係嘅，PHP 係 WordPress 嘅伺服器端編程語言，主題嘅邏輯、數據獲取同動態內容生成都依賴於 PHP。你需要掌握 PHP 基礎語法、函數使用以及同 HTML 嘅混編。但唔使成為 PHP 專家，理解 WordPress 特定嘅模板標籤同函數就可以開始。
點解我嘅主題喺後台唔顯示或者無法啟用？
最常見嘅原因係 style.css 文件頂頭嘅主題資訊註解格式唔啱、漏咗必要資訊，或者主題文件夾擺咗喺錯嘅位置。請確保主題文件夾喺 wp-content/themes/ 目錄下，同埋 style.css 入面嘅「Theme Name」等資訊準確無誤。
點樣為特定嘅頁面類型整唔同嘅佈局？
呢個需要利用 WordPress 嘅模板層級系統。例如，你可以創建一個名為 page-about.php 嘅檔案來單獨訂製「關於」頁面嘅佈局（假設頁面別名係「about」）。同樣地，single-post.php 用於單獨文章，category.php 用於分類歸檔頁。WordPress 會自動根據層級規則優先調用呢啲更具體嘅模板檔案。
主題嘅functions.php檔案同插件有咩分別？
functions.php 檔案係主題嘅一部分，佢嘅功能同主題外觀同表現息息相關。佢會跟住主題嘅切換而生效或者失效。而插件就用喺添加獨立於主題嘅通用功能（例如聯絡表格、SEO優化）。如果一個功能喺將來更換主題嗰陣仲需要保留，咁佢就更適合整成插件。一個好嘅實踐係，喺主題嘅 functions.php 入面只存放同當前主題視覺同佈局強相關嘅功能代碼。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。