WordPress主題開發基礎概念
喺開始寫程式碼之前，理解WordPress主題嘅基本構成係至關重要嘅。一個WordPress主題本質上係一個位於`wp-content/themes/`目錄下嘅資料夾，當中包含一系列特定命名嘅檔案，呢啲檔案共同決定咗網站嘅外觀同功能。WordPress核心系統會讀取呢啲檔案，並將資料庫中嘅內容（例如文章、頁面）同主題嘅樣式同結構結合，最終產生出用戶睇到嘅網頁。
一個最基礎嘅主題至少需要兩個檔案：`index.php`同`style.css`。`index.php`係主題嘅主模板檔案，而`style.css`唔單止包含CSS樣式，其檔案頭部註解仲承載咗主題嘅元資訊，例如主題名稱、作者、描述等等。呢個係WordPress識別一個主題嘅唯一方式。
除咗基礎檔案，主題開發仲涉及一系列模板檔案，佢哋遵循「模板層級」體系。呢個意味住WordPress會根據當前瀏覽嘅頁面類型（例如首頁、單篇文章、存檔頁）自動選擇最具體嘅模板檔案來渲染頁面。舉個例，當訪問一篇單獨嘅文章時，WordPress會按順序搵`single-post-{slug}.php`、`single-post-{id}.php`、`single-post.php`，最後先至係通用嘅`singular.php`或者`index.php`。理解同利用呢個機制，係創建靈活、強大主題嘅關鍵。
搭建你嘅第一個主題結構
等我哋從創建一個最簡單嘅主題開始，咁樣就可以熟悉核心文件同目錄結構。
首先，喺你本地WordPress安裝目錄下嘅`wp-content/themes/`入面，創建一個新資料夾，命名為`my-first-theme`。然後，喺呢個資料夾入面創建`style.css`文件，並喺文件開頭加入以下必要嘅註釋資訊：
css
/*
Theme Name: 我嘅第一個主題
主題網址：https://example.com/my-first-theme
作者：你個名
作者網址：https://example.com
Description: 呢個係一個用嚟學習WordPress主題開發嘅簡單主題。
版本：1.0
License: GNU General Public License v2 or later
文字域：my-first-theme
*/
```
跟住，創建`index.php`檔案。呢個係所有頁面嘅預設後備模板。我哋可以先喺入面寫一個好基本嘅HTML結構：
推薦閱讀 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();
?>
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
<?php
endwhile;
else :
echo '<p>暫時冇內容。</p>';
endif;
?>
<?php wp_footer(); ?>
</body>
</html>
```
完成呢兩個檔案之後，去返WordPress後台嘅「外觀」->「佈景主題」頁面，你應該會見到「我嘅第一個佈景主題」出現。啟動佢，你嘅網站就已經行緊你自己親手整嘅佈景主題喇。
理解核心模板標籤
喺上面嘅`index.php`代碼入面，我哋用咗一啲WordPress核心嘅「模板標籤」。呢啲係PHP函數，用嚟輸出動態內容。例如：
- `bloginfo( 'name' )`：輸出喺「設定」->「常規」入面設定嘅網站標題。
- `the_title()`：喺循環內輸出當前文章或者頁面嘅標題。
- `the_content()`：喺循環內輸出當前文章或者頁面嘅完整內容。
- `have_posts()` / `the_post()`：用嚟控制主循環，遍歷同設定當前文章數據。
- `wp_head()` 和 `wp_footer()`：是至关重要的钩子，允许WordPress核心、插件和其他脚本向页面`<head>`和页脚注入代码。
擴展主題功能同模板
基礎主題只能夠喺所有頁面上顯示相同佈局。為咗建立更專業嘅網站，我哋需要利用模板層級建立特定頁面嘅模板，並將公共部分拆分為模組化檔案。
建立頁首同頁尾組件
將`header`同`footer`部分分離到獨立檔案係標準做法，咁樣可以提高代碼嘅可維護性。創建`header.php`同埋`footer.php`檔案。
將`index.php`入面`<body>`標籤之前嘅所有代碼搬去`header.php`。將`</body>`同`</html>`標籤之前嘅所有代碼（通常由`<footer>（開始）移動到 `footer.php`。
推薦閱讀 WordPress主題開發完全指南：從入門到精通。
跟住，修改`index.php`，用`get_header()`同`get_footer()`函數嚟引入佢哋：
php
<?php get_header(); ?>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
<?php
endwhile;
else :
echo '<p>暫時冇內容。</p>';
endif;
?>
<?php get_footer(); ?>
```
創建其他頁面模板
而家，你可以為唔同嘅頁面類型創建模板。例如，創建一個`single.php`用於顯示單篇文章，佢可以從`index.php`複製過嚟，但係可以設計得更加詳細，譬如加分類、標籤、作者同埋評論模板。
推薦閱讀 WordPress主題開發指南：從零開始構建自訂主題。
再整一個`page.php`用嚟顯示靜態頁面。一個常見嘅需求係整自訂首頁，你可以整一個叫`front-page.php`嘅檔案，WordPress會優先揀佢做網站首頁，而唔係`home.php`或者`index.php`。
引入樣式同腳本
正确的样式和脚本引入方式是通过`functions.php`文件，使用`wp_enqueue_style()`和`wp_enqueue_script()`函数。这确保了依赖关系管理，并避免了重复加载。
喺主題根目錄整`functions.php`檔案，同埋加以下代碼嚟引入主樣式表：
php
<?php
function my_first_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
// 可以引入Google Fonts
wp_enqueue_style( 'my-first-theme-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap', array(), null );
// 引入自定义JavaScript文件
wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
```
同時，你可以喺呢個檔案度加主題支援功能，例如：
php
// 支持文章特色图像
add_theme_support( 'post-thumbnails' );
// 支持自定义Logo
add_theme_support('custom-logo');
// 支持HTML5标记
add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));
```
佈景主題嘅自訂同優化
一個優秀嘅佈景主題唔單止功能齊全，仲應該要容易畀用家自訂，同埋具備良好嘅效能。
集成WordPress定製器
WordPress定制器（Customizer）容許用戶實時預覽同修改主題外觀。透過`functions.php`，你可以輕鬆加設選項。例如，加一個頁尾版權文字選項：
php
function my_first_theme_customize_register( $wp_customize ) {
// 添加一个“页脚设置”板块
$wp_customize->add_section( 'my_footer_section', array(
'title' => __( '页脚设置', 'my-first-theme' ),
'priority' => 160,
) );
// 在板块内添加一个设置项
$wp_customize->add_setting( 'footer_copyright_text', array(
'default' => '© 2026 我的网站。保留所有权利。',
'sanitize_callback' => 'sanitize_text_field',
'transport' => 'postMessage', // 支持实时预览
) );
// 为设置项添加控件（输入框）
$wp_customize->add_control( 'footer_copyright_text', array(
'label' => __( '页脚版权文本', 'my-first-theme' ),
'section' => 'my_footer_section',
'type' => 'text',
) );
}
add_action( 'customize_register', 'my_first_theme_customize_register' );
```
跟住，喺`footer.php`入面，用`get_theme_mod()`函數輸出呢個值：
php
```
確保響應式同效能
現代主題一定要係響應式嘅。主要靠CSS媒體查詢實現。確保你`style.css`入面嘅佈局可以適應由手機到桌面嘅各種螢幕尺寸。
對於性能優化，除咗壓縮CSS/JS同圖片之外，主題開發中應該注意：
1. 选择性加载脚本：仅在需要的页面加载特定的JS文件（如评论页加载`comment-reply.js`）。
2. 图片优化：使用`the_post_thumbnail()`及其相关函数时，确保生成适当的图片尺寸。
3. 减少数据库查询：合理使用Transients API缓存耗时查询，避免在模板中执行不必要的`WP_Query`。
摘要
從創建包含`style.css`同`index.php`嘅基礎文件夾開始，到理解模板層級、拆分模板部件、透過`functions.php`添加功能同樣式，再至利用定制器提供用戶選項，你已經完整行過咗一個自訂WordPress主題嘅構建流程。主題開發嘅核心在於理解WordPress點樣將數據同模板結合，並利用其龐大嘅函數庫同鉤子系統來構建靈活、高效嘅網站。掌握呢啲基礎之後，你可以進一步探索更高級嘅主題，例如創建自訂文章類型、開發小工具區域或者構建支援古騰堡區塊編輯器（Block Editor）嘅主題。實踐係學習嘅最佳途徑，不斷嘗試同修改，你將能夠打造出獨一無二嘅WordPress主題。
常見問題
開發WordPress主題需要咩先決知識？
你需要具備HTML同CSS嘅基礎，呢啲係構建網頁結構同樣式嘅根本。同時，需要掌握PHP嘅基本語法，因為WordPress主題文件主要係由PHP代碼構成嘅，用於動態獲取同顯示數據。對JavaScript有基本了解會對添加互動功能有幫助，但並非入門必需。
我可唔可以喺本地開發主題？需要咩環境？
強烈建議喺本地進行主題開發。你需要搭建一個本地伺服器環境。最簡單嘅方法係使用集成軟件包，例如XAMPP、MAMP（Mac）或者Local by Flywheel。呢啲軟件包一次性安裝咗Apache/Nginx伺服器、PHP同MySQL數據庫，你只需要再安裝WordPress就可以開始本地開發，無需網絡連接，速度更快亦都更加安全。
主題嘅`functions.php`同插件有咩分別？
`functions.php`檔案通常用嚟加或者修改同當前主題外觀同功能緊密相關嘅特性。當轉換主題嗰陣，呢啲功能一般會失效。而插件就用嚟加獨立於主題嘅通用功能（例如聯絡表格、SEO優化）。如果一個功能喺將來轉換主題嗰陣仲需要保留，就應該將佢開發成插件。喺實踐中，大型主題嘅`functions.php`可能會好龐大。
點樣可以令我嘅主題支援多語言（國際化）？
你需要使用WordPress的国际化（i18n）功能。在代码中，所有需要翻译的文本字符串都应使用特定的函数进行包装，例如`__('文本', 'my-text-domain')`或`_e('文本', 'my-text-domain')`。然后在`functions.php`中使用`load_theme_textdomain()`函数来设置翻译文件的加载路径。最后，使用如Poedit这样的工具创建`.pot`模板文件，并让翻译人员生成不同语言的`.po`和`.mo`文件。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。