WordPress主題開發基礎同埋環境搭建
WordPress主題係控制網站外觀同功能嘅核心。一個完整嘅主題至少需要兩個檔案：index.php同埋style.css。style.css唔單止係樣式表，佢頂部嘅註釋區塊仲定義咗主題嘅元資訊，例如主題名稱、作者、描述同版本。呢個係主題俾WordPress識別同管理嘅必要條件。
創建基礎嘅樣式表檔案
新建立一個主題資料夾，例如my-first-theme，喺入面開個style.css檔案，然後輸入以下頭部資料：
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个用于学习的入门主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/呢段註解係主題嘅「身份證」。之後，你可以喺呢個檔案入面加返普通嘅CSS規則去設計網站樣式。文字域（Text Domain）用嚟做國際化，佢應該同主題資料夾個名一樣。
推薦閱讀 打造響應式 WordPress 主題：從零開始嘅完整開發指南。
跟住，建立index.php當做預設嘅模板檔案。初頭階段，佢可以好簡單，淨係需要包含基本嘅HTML結構同WordPress函式調用。例如：
<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1005>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ?></div>
</body>
</html>wp_head()同埋wp_footer()係兩個至關重要嘅動作鉤子，佢哋容許插件同主題喺<head>同埋</body>標籤前面注入代碼。body_class()函數會輸出一系列CSS類，方便根據頁面類型進行精細化樣式控制。
配置本地開發環境
為咗避免喺線上伺服器進行試驗，強烈建議使用本地開發環境。你可以用XAMPP、Local by Flywheel或者Docker等工具快速搭建一個包含PHP同MySQL嘅本地伺服器。將你嘅主題文件夾放喺本地WordPress安裝目錄嘅wp-content/themes/落嚟，然後登入後台嘅「外觀」->「佈景主題」度就可以啟動佢。
核心模板文件同層級結構
WordPress 用咗一套模板層級（Template Hierarchy）系統嚟決定用邊個模板檔案去顯示特定類型嘅頁面。理解呢個層級係主題開發嘅關鍵。
最基本嘅模板文件係index.php佢係所有頁面嘅預設後備模板。當 WordPress 搵唔到更特定嘅模板嗰陣，就會用佢。為咗更精準咁控制唔同頁面嘅外觀，你需要創建更特定嘅模板檔案。
推薦閱讀 從零開始：一步步教你點樣製作專業級 WordPress 佈景主題。
建立單篇文章範本
如果你想自訂單篇文章嘅展示頁面，可以建立一個名為single.php嘅檔案。當訪客點擊閱讀某篇具體文章時，WordPress會優先使用呢個範本。喺呢個檔案入面，你可以調用the_post()函數來設定全域$post變數，然後使用如the_title()同埋the_content()等模板標籤嚟輸出內容。
創建一個page.php檔案可以專門用於控制獨立頁面嘅顯示。對於首頁，你可以創建front-page.php（當後台設定「首頁顯示」為「一個靜態頁面」時）或home.php（當首頁顯示最新文章列表時）。歸檔頁（如分類、標籤、作者文章列表）通常由archive.php處理，你仲可以創建更具體嘅，例如category.php或tag.php。
理解模板層級流程
模板層級嘅工作流程好似一個決策樹。例如，當訪問一個分類頁面時，WordPress會按順序查找：category-{slug}.php -> category-{id}.php -> category.php -> archive.php -> index.php。開發者通過創建呢啲文件，可以輕鬆實現唔同頁面類型嘅差異化設計，而唔需要喺單個文件入面編寫複雜嘅條件判斷邏輯。
使用WordPress函數同鉤子
WordPress提供咗成千上萬嘅預定義函數同鉤子（Hooks），佢哋係主題同核心交互、擴展功能嘅橋樑。
引入主題資源檔案
正確嘅引入方式係透過鉤子。喺你嘅主題檔案夾入面建立functions.php文件，呢個檔案唔係範本檔案，而係主題啟動時自動載入嘅設定檔。喺呢度，你可以用wp_enqueue_style()同埋wp_enqueue_script()函數嚟登記同排隊樣式表同腳本。例如：
function my_theme_enqueue_assets() {
// 引入主题主样式表
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', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );add_action()係一個函數，用嚟將你嘅函數（例如my_theme_enqueue_assets）「掛載」到名為wp_enqueue_scripts喺特定動作嘅掛鉤上。WordPress執行到呢個掛鉤嗰陣，會自動調用所有掛咗嘅函數。
推薦閱讀 2026年網站建設全攻略：從零到上線嘅技術選型與實踐指南。
創建自訂功能區域
主題通常需要一啲可配置嘅區域，例如側邊欄、頁尾小工具區。呢個需要兩個步驟：首先，喺functions.php入面用register_sidebar()函數註冊一個側邊欄。然後，喺模板檔案（例如sidebar.php）入面用dynamic_sidebar()用函數嚟調用佢。
// 在functions.php中注册侧边栏
function my_theme_widgets_init() {
register_sidebar( array(
'name' => '主侧边栏',
'id' => 'sidebar-1',
'description' => '在这里添加小工具。',
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );之後，你可以喺後台嘅「外觀」->「小工具」度，將唔同嘅小工具拖放去「主側邊欄」，內容就會自動顯示喺模板調用dynamic_sidebar( 'sidebar-1' )嘅位置。
實現響應式設計同主題定制
現代網站必須喺各種裝置上都能夠良好顯示。實現響應式設計主要依賴CSS媒體查詢（Media Queries）。喺style.css入面，你可以針對唔同屏幕寬度編寫樣式規則。
添加主題自訂功能
WordPress定制器（Customizer）允許用戶實時預覽並修改主題嘅某啲設定。透過functions.php，你可以為主題添加定制選項。呢個需要使用WP_Customize_Manager類提供嘅API。例如，添加一個網站標語顏色選項：
function my_theme_customize_register( $wp_customize ) {
// 添加一个设置
$wp_customize->add_setting( 'header_textcolor', array(
'default' => '#000000',
'sanitize_callback' => 'sanitize_hex_color',
) );
// 添加一个控件来控制这个设置
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
'label' => '页眉文字颜色',
'section' => 'colors',
'settings' => 'header_textcolor',
) ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );跟住，喺header.php或者相關嘅模板檔案入面，你需要攞到呢個數值並輸出做CSS。
<style type="text/css">
.site-title a { color: <?php echo esc_attr( get_theme_mod( 'header_textcolor', '#000000' ) ); ?>; }
</style>get_theme_mod()呢個函數用嚟從數據庫度攞到自訂器設定嘅數值。
確保跨瀏覽器同設備兼容
開發過程中，應該持續喺真實瀏覽器同設備（或者用開發者工具嘅模擬器）上面進行測試。用CSS Flexbox或者Grid佈局可以更容易咁創建靈活嘅組件。考慮性能同可訪問性，確保圖片尺寸啱用，互動元素（例如按鈕）喺觸屏設備上面有足夠嘅大細。
摘要
WordPress主題開發係一個從理解基礎檔案結構開始，逐步掌握模板層級、核心函數同埋掛鉤，最終實現高級定制同響應式設計嘅過程。透過創建style.css、index.php等核心檔案，開發者可以構建出網站嘅基本框架。深入理解模板層級容許為唔同內容類型創建精準嘅展示界面。而熟練運用functions.php入面嘅函數同埋掛鉤，就係擴展主題功能、連接後台同前台嘅關鍵。最後，結合現代CSS技術並透過定制器提供用戶友善嘅配置選項，能夠打造出既專業又靈活嘅現代化WordPress主題。
常見問題
### 一個最基礎嘅WordPress主題必須包含邊啲檔案？
一個最基本、可以被WordPress識別嘅主題必須包含兩個檔案：index.php同埋style.css。其中，style.css嘅頂部必須包含格式正確嘅註釋區塊，用於聲明主題嘅元數據，例如主題名稱、作者等。冇呢兩個檔案，WordPress就唔能夠喺後台嘅主題列表中見到同用到你嘅主題。
乜嘢係WordPress嘅模板層級？
模板層級係WordPress用嚟決定為當前請求嘅頁面使用邊個模板檔案嘅一套優先級規則。佢好似一個邏輯樹，WordPress會根據頁面類型（例如首頁、單篇文章、分類頁面）從最具體嘅模板檔案開始搵，如果搵唔到，就繼續搵更通用嘅，最終回退到index.php。例如，對於一篇具體文章，WordPress會依次查找single-{post-type}-{slug}.php、single-{post-type}.php、single.php，最後先係singular.php同埋index.php。
functions.php 檔案同插件有咩分別？
functions.php文件係主題嘅一部分，其功能同當前激活嘅主題緊密綁定。當切換主題時，呢啲功能通常會失效。佢通常用於添加專屬於該主題外觀同功能嘅支援，例如註冊菜單位置、側邊欄、主題定制器選項等。而插件提供嘅功能則獨立於主題，旨在為網站添加獨立嘅功能模組（例如聯繫表單、SEO優化），即使更換主題，插件功能依然可用。如果一個功能可能喺任何主題下都需要，咁佢更適合做成插件。
如何正確地喺主題中引入JavaScript同CSS文件？
千祈唔好喺模板檔案入面直接使用<link>或<script>標籤引入。正確嘅方式係通過functions.php檔案，使用wp_enqueue_style()同埋wp_enqueue_script()功能,並將佢哋安裝到wp_enqueue_scripts呢個動作要放喺鉤子度。咁做嘅好處係：WordPress可以管理依賴關係、避免重複載入、同埋按需要控制載入順序同位置（例如將腳本放喺頁尾），同時亦係插件能夠兼容你嘅主題嘅前提。
點解我改咗主題之後，喺前台睇唔到變化？
呢個通常係由瀏覽器緩存或者WordPress物件緩存導致。首先，試下強制刷新瀏覽器（Ctrl+F5或者Cmd+Shift+R）。如果問題仲係咁，請檢查你係咪喺本地開發，同埋確保檔案已經儲存到正確嘅目錄。對於CSS/JS檔案，喺wp_enqueue_style/script函數度俾檔案URL加個版本參數（例如time()）可以強制瀏覽器攞新檔案。另外，如果伺服器或者WordPress用咗快取插件，你可能需要清走呢啲快取。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。