開發環境與基礎檔案配置
喺開始編寫程式碼之前，建立一個專業嘅本地開發環境係關鍵。推薦使用好似 Local by Flywheel、XAMPP 或者 MAMP 等工具快速搭建一個包含 PHP、MySQL 同 Apache/Nginx 嘅伺服器環境。安裝並啟動最新版本嘅 WordPress。跟住，喺你嘅 WordPress 安裝目錄嘅 wp-content/themes 資料夾入面，建立一個新資料夾作為你嘅主題目錄，例如 my-professional-theme。
核心樣式表與主題資訊
每個 WordPress 主題嘅入口文件係 style.css。呢個文件唔單止包含 CSS 樣式，佢頂部嘅註釋頭部（Theme Headers）更加係 WordPress 識別主題嘅「身份證」。文件必須以呢個特定格式開頭：
/*
Theme Name: My Professional Theme
Theme URI: https://example.com/my-professional-theme/
Author: Your Name
Author URI: https://example.com/
Description: 这是一个精心构建的专业WordPress主题，适用于企业网站和博客。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-professional-theme
*/Text Domain 用於國際化（i18n），必須同主題資料夾名稱一致。其餘嘅 functions.php、模板文件等等都會依賴呢個文本域嚟載入翻譯。
推薦閱讀 WordPress主題開發完整指南：從零到一構建專業級主題。
主題功能函數嘅初始化
functions.php 係主題嘅「大腦」，用嚟添加功能、註冊菜單、側邊欄等等。第一步通常係設定主題支援嘅功能。一個基礎嘅初始化函數如下所示：
<?php
// my-professional-theme/functions.php
add_action( 'after_setup_theme', 'my_theme_setup' );
function my_theme_setup() {
// 让主题支持自动 Feed 链接
add_theme_support( 'automatic-feed-links' );
// 让文章和页面支持特色图像（Featured Image）
add_theme_support( 'post-thumbnails' );
// 让主题支持 HTML5 标记
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
// 支持自定义 LOGO
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
) );
// 加载主题的文本域，用于翻译
load_theme_textdomain( 'my-professional-theme', get_template_directory() . '/languages' );
}
?>安全引入腳本同樣式
永遠唔好直接硬編碼引入CSS同JavaScript檔案。必須使用WordPress提供嘅 wp_enqueue_scripts 用鉤子嚟正確、安全咁排隊（enqueue）資產。咁樣可以確保依賴管理，同埋避免衝突。
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
function my_theme_scripts() {
// 引入主样式表 style.css
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0.0' );
// 引入自定义 CSS 文件
wp_enqueue_style( 'my-theme-custom', get_template_directory_uri() . '/assets/css/custom.css', array('my-theme-style'), '1.0.0' );
// 引入导航菜单响应式脚本（依赖于 jQuery）
wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array('jquery'), '1.0.0', true );
// 为脚本添加国际化支持（如果前端需要翻译字符串）
wp_localize_script( 'my-theme-navigation', 'myThemeConfig', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
));
}
?>核心模板檔案嘅構建
WordPress 用模板層級（Template Hierarchy）嚟決定特定類型嘅頁面要載入邊個模板檔案。創建以下基礎檔案係構建主題結構嘅第一步。
網站全局頭部同底部
header.php 文件包含每个页面顶部共用嘅代码：DOCTYPE 声明、 區域（通過 wp_head() 输出）以及开头嘅结构。佢应该以 开始，并以打开主要嘅包装容器结束。
footer.php 文件则包含页面底部共用嘅代码，例如版权资讯，并在结尾调用 wp_footer() 鉤。呢兩個檔案透過 get_header() 同埋 get_footer() 函數喺其他模板度被調用。
文章索引同內容詳頁
index.php 係最後嘅模板回退，但通常我哋會將佢當做博客文章列表頁。佢應該包含主循環（The Loop），用嚟列出多篇文章。
single.php 用嚟展示單篇網誌文章。佢負責文章嘅完整佈局，包括標題、內容、元數據（作者、日期、分類）同留言模板。
page.php 用嚟展示靜態頁面。佢通常冇發佈時間、分類等元信息，結構同 single.php 相似但更簡潔。
推薦閱讀 WordPress主題開發終極指南：從入門到精通構建自訂網站。
文章內容循環嘅標準寫法
循環係 WordPress 輸出內容嘅核心。以下係 index.php 中循環嘅標準示例：
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1008>
<header class="entry-header">
<h2 class="entry-title"><a href="/yue/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-meta">
</div>
</header>
<div class="entry-content">
<?php the_excerpt(); // 或使用 the_content() 显示全文 ?>
</div>
</article>
<?php endwhile;
the_posts_navigation(); // 输出上一页/下一页链接
else :
get_template_part( 'template-parts/content', 'none' ); // 加载一个“无内容”的模板部分
endif;
?>高級功能同主題定制
一個專業主題唔單止顯示內容，仲為用戶同管理員提供靈活嘅自訂選項。
註冊導航選單同側邊欄
導航選單透過 register_nav_menus() 函數註冊。通常，一個主題會有主選單同頁尾選單。
<?php
add_action( 'after_setup_theme', 'my_theme_register_menus' );
function my_theme_register_menus() {
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'my-professional-theme' ),
'footer' => __( 'Footer Menu', 'my-professional-theme' ),
) );
}
?>在 header.php 入面，用 wp_nav_menu() 嚟顯示主選單。
側邊欄（小工具區域）通過 register_sidebar() 函數註冊。可以註冊多個用於唔同位置嘅側邊欄。
__( 'Main Sidebar', 'my-professional-theme' ),
'id' => 'sidebar-1',
'description' => __( 'Add widgets here.', 'my-professional-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
?>整合自訂器 API
WordPress 自訂器（Customizer）API 容許用戶喺即時預覽度調整主題設定。我哋可以為 LOGO、頁尾文字等加選項。
你可以透過 customize_register 鉤子嚟加入自訂設定同控制項。咁樣就可以畀你向 WordPress 主題自訂器度加新嘅設定、控制項同部分。
建立自訂頁面範本
頁面範本容許你為特定頁面賦予獨特嘅版面。創建一個檔案，例如 templates/full-width.php，並喺檔案頭部加入以下註解：
推薦閱讀 WordPress主題開發入門指南：從零開始構建自訂主題。
<?php
/**
* Template Name: 全宽页面
* Description: 一个没有侧边栏的全宽页面模板。
*/跟住，喺WordPress後台編輯頁面嗰陣，就可以喺「頁面屬性」度揀呢個「全寬頁面」模板。喺模板檔案入面，跟住 page.php 嘅結構嚟寫，但係就唔使加攞側邊欄嘅代碼就得喇。
效能優化與發佈準備
主題開發完成之後，一定要做優化，確保佢夠快、安全同埋符合標準。
代碼優化同埋安全性檢查
對所有用戶輸入同動態輸出使用 WordPress 嘅 escaping 同 sanitization 函數，例如 esc_html(), esc_url(), sanitize_text_field()。確保所有可翻譯字串都用 __() 或 _e() 函數包住，並正確設定文字域。移除所有除錯代碼，好似 var_dump() 或 print_r()。
前端資源效能優化
將 CSS 同 JavaScript 檔案進行最小化（minify）同合併（喺開發環境保留源文件）。使用 add_image_size() 函數定義合理嘅圖片尺寸，避免喺前端載入過大嘅原始圖片。確保主題係響應式，能夠喺各種裝置上良好顯示。考慮有條件噉載入腳本，例如，只喺需要評論嘅頁面載入評論回覆腳本：
<?php
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
?>主題嘅最終檢查清單
喺發佈前，使用 Theme Check 插件對你嘅主題進行掃描，確保佢符合 WordPress 主題目錄嘅最新要求。喺唔同嘅 PHP 版本（例如 7.4, 8.0, 8.1+）同 WordPress 版本下進行測試。喺多種瀏覽器（Chrome, Firefox, Safari, Edge）同真實流動裝置上測試響應式佈局。準備詳細嘅 readme.txt 文件，說明主題功能、安裝步驟同更新日誌。
摘要
由零開始構建一個專業嘅 WordPress 主題係一項系統性工程，佢要求開發者唔單止要識 PHP、HTML、CSS 同 JavaScript，仲要深入掌握 WordPress 嘅核心概念，例如模板層級、循環、掛鉤（Hooks）同 API。成個流程由搭建環境、配置基礎文件開始，逐步構建核心模板同高級功能，最後以性能優化同嚴格測試收尾。跟住 WordPress 編碼標準同最佳實踐（例如正確排隊腳本、翻譯支援、安全性處理）係確保主題高質量、可維護同受歡迎嘅關鍵。透過呢個指南嘅步驟，你就有能力創建一個又靚又功能強大，符合現代網頁標準嘅專業級主題。
常見問題
WordPress 主題開發一定要用子主題嗎？
唔一定。由頭開始構建一個全新主題嗰陣，你係創建緊父主題。子主題主要用喺已有父主題嘅基礎上進行定制同修改，而唔使改動父主題嘅核心文件。咁樣做嘅好處係，當父主題更新嗰陣，你嘅定制內容唔會唔見咗。對於全新嘅開發項目，你可以直接創建父主題。
functions.php 檔案有咩特別作用？
functions.php 呢個檔案係 WordPress 主題嘅核心功能檔案。佢就好似一個插件咁，喺主題啟動嗰陣會自動載入。你可以喺度加主題支援嘅功能、登記菜單同側邊欄、排隊引入腳本同樣式、定義自訂函數、同埋掛鈎到 WordPress 嘅各種動作同過濾器。佢係擴展同自訂主題行為嘅主要地方。
點樣可以令我嘅主題支援多語言（國際化）？
讓主題支援多語言主要分為三個步驟。首先，喺你主題所有面向用戶嘅字串入面，用 WordPress 嘅翻譯函數，例如 __('Text', 'your-text-domain') 或 _e('Text', 'your-text-domain')。其次，喺 style.css 同埋 functions.php 正確聲明文字域（Text Domain），並使用 load_theme_textdomain() 函數加載翻譯文件。最後，使用如 Poedit 咁嘅工具創建 .pot 模板文件，翻譯人員可以據此生成唔同語言嘅 .po 同埋 .mo 文件，並存放喺主題嘅 /languages/ 目錄下。
點解一定要用 wp_enqueue_script 嚟加 JavaScript 檔案？
使用 wp_enqueue_script()（同埋對應嘅 wp_enqueue_style()）係 WordPress 官方推薦同唯一正確嘅引入前端資源方法。呢個方法能夠妥善處理腳本同樣式表嘅依賴關係，確保佢哋以正確順序載入。佢避免咗因為重複引入相同程式庫（例如 jQuery）而導致嘅衝突，而且同 WordPress 嘅快取同優化機制（例如腳本連接同壓縮）相容。直接使用 或 標籤硬編碼到模板度係錯誤做法，可能會引致問題。
主題提交到 WordPress 官方目錄前需要啲咩？
提交到 WordPress.org 官方主題目錄需要符合一系列嚴格嘅要求。你嘅主題必須 100% 跟從 GNU GPL 授權。必須通過 Theme Check 插件嘅測試，無任何錯誤（ERRORS），警告（WARNINGS）應該盡量減少。代碼需要跟從 WordPress 編碼標準（WordPress Coding Standards）。主題必須係響應式嘅，而且喺無小工具、菜單或者特色圖片嘅情況下都可以正常顯示（優雅降級）。另外，你需要提供高質量、無版權問題嘅截圖，同埋寫清楚 readme.txt 同主題描述。喺 2026 年嘅標準下，對無障礙訪問（Accessibility）同性能嘅要求亦可能會更加嚴格。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。