對於任何想深度自訂網站外觀同功能嘅開發者嚟講，學WordPress主題開發係一項好有價值嘅技能。同用現成主題唔同，自己砌主題代表你擁有完全控制權，可以打造出獨一無二、性能卓越兼符合特定需要嘅網站。本文會帶你完成砌第一款自訂WordPress主題嘅核心步驟，由環境設定到基礎模板檔案嘅建立。
開發環境同工具準備
喺開始編寫代碼之前，你需要一個合適嘅本地開發環境。咁樣可以令你喺唔影響線上網站嘅情況下進行測試同除錯。
本地伺服器環境配置
推薦用集成嘅本地伺服器軟件包，例如XAMPP、MAMP（適用於Mac）或者Local by Flywheel。呢啲工具一鍵安裝咗Apache伺服器、MySQL數據庫同PHP，慳返繁瑣嘅設定過程。以XAMPP為例，安裝之後啟動Apache同MySQL服務，你就擁有咗一個本地伺服器環境。
代碼編輯器選擇
一個功能強大嘅代碼編輯器係高效開發嘅必備工具。Visual Studio Code (VS Code) 而家係好流行嘅選擇，佢免費、輕量，而且有豐富嘅擴展插件，好似PHP Intelephense（用嚟PHP代碼智能提示）、WordPress Snippet（代碼片段）同Live Server（即時預覽）等等，可以大大提升開發效率。
WordPress核心檔案安裝
喺你嘅本地伺服器根目錄（例如XAMPP嘅`htdocs`資料夾）入面，新開一個項目資料夾，例如`my-first-theme`。然後，去WordPress.org官網下載最新嘅WordPress壓縮檔，解壓之後將所有檔案放入`my-first-theme`資料夾。跟住，透過瀏覽器訪問 `http://localhost/my-first-theme`，跟住出名嘅「五分鐘安裝」指引完成WordPress安裝。記住你設定嘅資料庫名、用戶名同密碼，之後連接資料庫嗰陣會用到。
建立主題嘅基本結構同檔案
一個WordPress主題本質上係一個位於`wp-content/themes/`目錄下嘅資料夾，入面包含一啲有特定功能嘅PHP模板檔案、樣式表同腳本檔案。
主題資料夾同樣式表
首先，進入你本地WordPress安裝目錄下嘅`wp-content/themes/`，創建一個新嘅資料夾，命名為你嘅主題名稱，例如`mycustomtheme`。喺呢個資料夾入面，你必須創建嘅第一個亦係最重要嘅檔案係`style.css`。呢個檔案嘅頭部註釋唔單只用於聲明主題資訊，更加係WordPress識別一個主題嘅關鍵。
推薦閱讀 WordPress主題開發入門指南：從零開始構建你嘅自訂主題。
css
/*
Theme Name: My Custom Theme
Theme URI: https://example.com/mycustomtheme
Author: Your Name
作者網址：https://example.com
描述：呢個係我第一個自訂WordPress主題，用嚟學開發。
版本：1.0.0
授權條款：GPL v2 或後續版本
文字域：mycustomtheme
*/
```
核心模板檔案：index.php 同 functions.php
創建`index.php`檔案。呢個係主題嘅預設同後備模板檔案，如果其他更具體嘅模板檔案唔存在，WordPress就會用佢嚟渲染頁面。最初，佢可以好簡單。
php
<!DOCTYPE html>
<html no numeric noise key 1000>
<head>
<meta charset="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1000>
<h1><a href="/yue/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 暂时简单输出文章标题
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
echo '<p>暫時冇文章。</p>';
endif;
?>
<?php wp_footer(); ?>
</body>
</html>
```
跟住，創建`functions.php`檔案。呢個係你主題嘅「引擎」，用嚟加功能、啟用特性（例如文章縮圖）同排隊載入樣式同指令碼。
php
<?php
// 启用文章特色图像功能
add_theme_support( 'post-thumbnails' );
// 添加菜单支持
add_theme_support( 'menus' );
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'mycustomtheme' ),
) );
// 正确引入主样式表
function mycustomtheme_enqueue_styles() {
wp_enqueue_style( 'mycustomtheme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mycustomtheme_enqueue_styles' );
```
推薦閱讀 WordPress 主題開發入門:從零開始打造你嘅第一個自訂主題。
完成以上步驟之後，登入你嘅WordPress後台，喺「外觀」->「主題」入面，你應該會見到「My Custom Theme」出現，點擊啟用佢。
模板層級與常用模板文件
理解WordPress嘅模板層級係主題開發嘅核心。佢決定咗WordPress針對唔同類型嘅頁面請求，會優先使用邊個模板檔案。
模板層級概念
WordPress會根據目前查看嘅頁面類型，按照一個特定嘅優先次序去搵模板檔案。例如，當瀏覽一篇單獨嘅網誌文章時，WordPress會依次搵：`single-post.php` -> `single.php` -> `singular.php` -> `index.php`。只要搵到第一個存在嘅檔案，就會用佢。
創建常用模板檔案
基於呢個層級，你可以開始創建更具體嘅模板檔案來豐富你嘅主題。
- `header.php` 同埋 `footer.php`：將`index.php`入面嘅頭部同埋頁尾代碼分離到呢兩個檔案度，然後喺`index.php`入面用`get_header()`同埋`get_footer()`函數引入。咁樣就實現咗代碼重用。
- `page.php`：用嚟顯示靜態頁面。你可以先複製`index.php`嘅內容嚟創建佢，然後進行個人化修改。
- `single.php`：用於顯示單篇文章。通常呢度會包含文章標題、內容、發佈日期、作者、分類同標籤等資訊。
- `archive.php`：用於顯示文章歸檔列表，例如分類、標籤、作者或者日期歸檔頁。
- `front-page.php`：如果存在呢個檔案，佢會用作網站嘅首頁，優先級高過`home.php`同`index.php`。你可以喺度設計獨特嘅首頁佈局。
創建呢啲檔案之後，你嘅主題結構會更加清晰同專業。
推薦閱讀 WordPress主題開發完全指南：從入門到精通。
添加樣式同基本功能
一個冇樣式嘅主題係原始嘅，而一啲基本功能就可以大大提升主題嘅實用性同用戶體驗。
編寫基本CSS樣式
喺`style.css`嘅頭部註釋下面，開始編寫你嘅樣式規則。首先從重置瀏覽器預設樣式、設定全局字體同顏色開始，然後逐步為頭部、導航、主內容區、側邊欄（如果之後加）同頁腳設計樣式。使用響應式設計媒體查詢，確保網站喺手機、平板同電腦上面都可以顯示得好。
css
/* 基本重置同全域樣式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
color: ##333;
background-color: #f4f4f4;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* 頭部樣式 */
header {
background: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}
/* 導航選單樣式 */
.primary-menu {
/* 你嘅導航選單樣式 */
}
```
實現導航選單同側邊欄
喺`header.php`入面你預留嘅菜單位置，用`wp_nav_menu()`函數嚟調用喺`functions.php`入面註冊嘅菜單。
php
```
要加側邊欄，首先需要喺`functions.php`入面註冊一個側邊欄小工具區域。
php
function mycustomtheme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'mycustomtheme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'mycustomtheme' ),
'before_widget' => '
然后，在你希望侧边栏出现的位置（例如`index.php`或`single.php`的主内容区旁边），使用`dynamic_sidebar( 'sidebar-1' )`函数来显示它。
摘要
透過本文嘅步驟，你已經完成咗由零開始構建一款基礎WordPress自訂主題嘅旅程。我哋介紹咗點樣搭建本地開發環境，創建咗包含`style.css`、`index.php`同`functions.php`在內嘅核心主題檔案，理解咗模板層級並擴展咗常用模板，最後為主題加咗基礎樣式同導航菜單、側邊欄等功能。呢個只係一個起點，跟住你可以繼續探索更高級嘅模板（例如搜尋頁面`search.php`、404頁面`404.php`），學習使用WordPress循環（The Loop）嘅更多功能，整合JavaScript框架，或者將你嘅主題提交到WordPress官方主題目錄。持續實踐同探索官方開發手冊係提升技能嘅最佳途徑。
常見問題
開發WordPress主題需要咩先決知識？
你需要具備HTML同CSS嘅基礎知識，用嚟構建網頁結構同樣式。同時，對PHP有基本嘅理解至關重要，因為WordPress主題主要係由PHP模板文件構成嘅。了解少少JavaScript會對添加互動功能有幫助，但入門階段並非必須。
點解我嘅新主題冇喺WordPress後台嘅主題列表中顯示？
請首先檢查你嘅主題文件夾係咪正確放置喺`wp-content/themes/`目錄下。然後，確認`style.css`文件係咪存在於該文件夾嘅根目錄，而且其頭部註釋信息（Theme Name等）格式係咪正確。任何一個錯誤都可能導致WordPress無法識別你嘅主題。
functions.php檔案嘅作用係咩？
`functions.php`文件係你嘅主題嘅功能中心。佢用嚟啟用或修改WordPress核心功能（例如添加主題支持選項），註冊導航菜單、側邊欄小工具區域，安全地載入CSS樣式表同JavaScript腳本，以及定義自定義函數同過濾器。佢係擴展主題能力嘅關鍵文件。
點樣令我嘅主題支援多語言？
让主题支持多语言（国际化与本地化）是一项重要实践。你需要在`style.css`的头部和`functions.php`中设置正确的`Text Domain`（文本域），然后在代码中所有需要翻译的字符串处使用`__()`或`_e()`等翻译函数进行包裹。之后，可以使用像Poedit这样的工具生成`.po`和`.mo`语言文件，供翻译者使用。
開發完成後，點樣將主題部署到線上網站？
部署主題主要有兩種方式。一種係透過FTP/SFTP客戶端（例如FileZilla）直接將你本地嘅主題資料夾上傳到線上網站嘅`wp-content/themes/`目錄。另一種更專業嘅方式係將主題打包成ZIP檔案，然後透過WordPress後台嘅「外觀」->「主題」->「新增主題」->「上傳主題」功能進行安裝。無論邊種方式，部署前都建議喺線上網站嘅測試環境進行充分測試。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。