喺開始寫程式碼之前，你需要一個本地開發環境。呢個通常包括一個本地伺服器（例如XAMPP、MAMP 或者 Local），同埋一個程式碼編輯器（例如 VS Code、PhpStorm）。確保你嘅環境入面裝咗 PHP（建議 7.4 或者更高版本）同埋 MySQL。
一個標準嘅 WordPress 主題係一個包含特定檔案集合嘅資料夾。首先喺你嘅本地 WordPress 安裝嘅wp-content/themes目錄下面開一個新資料夾，例如叫做my-first-theme。
跟住，開兩個最基本同必需嘅檔案：style.css同埋index.php。其中，style.css唔單止係樣式表，更加係一個主題嘅「身份證」，佢檔案頭部嘅註解區塊用嚟向WordPress聲明你嘅主題。
推薦閱讀 WordPress主題開發入門指南：由零打造個人化網站。
在style.css喺檔案入面，你需要加入以下格式嘅頭部資訊：
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的自定义WordPress入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/呢啲資訊會顯示喺WordPress後台嘅「外觀」->「主題」頁面。同時，index.php檔案係主題嘅預設模板，就算佢暫時係空嘅，都必須存在，WordPress先至可以識別呢個係一個有效嘅主題。
構建基礎模板檔案
有咗基礎文件之後，你嘅主題仲未能夠顯示任何內容。WordPress 用一套模板層級系統嚟決定唔同類型嘅頁面要載入邊個模板文件。跟住落嚟，我哋會創建幾個核心嘅模板文件。
創建頭部同尾部模板
為咗實現代碼重用同一致性，我哋通常會將網頁嘅頭部（Header）同尾部（Footer）分離成獨立文件。首先創建header.php文件，佢包含 HTML 文檔嘅頭部、打開<body>標籤同網站頂部嘅公共區域（例如 Logo 同導航菜單）。
一個最簡單嘅header.php示例可能包含以下內容：
推薦閱讀 打造專業網站：全方位 WordPress 主題開發與客製化終極攻略。
<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
<header>
<h1><a href="/yue/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</header>注意其中嘅wp_head()函數，佢係必須調用嘅，用嚟等WordPress核心、插件同主題本身喺頁面頭部插入必要嘅代碼（例如CSS同JS）。
跟住，創建footer.php文件，用嚟閂埋<body>同埋<html>標籤，同埋包含頁尾內容。
<footer>
<p>© . All rights reserved.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>同樣，wp_footer()函數都係必須嘅。
而家，我哋可以更新index.php，使用get_header()同埋get_footer()函數嚟引入呢兩個部分：
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 文章内容将在这里显示
endwhile;
else :
// 没有找到文章时的内容
endif;
?>
</main>
<?php get_footer(); ?>建立文章循環同內容模板
喺上面index.php入面，我哋睇到WordPress嘅核心：循環（The Loop）。佢用嚟遍歷當前頁面嘅所有文章（或者單篇文章）。為咗令文章內容有更好嘅結構，我哋通常會將單篇文章嘅顯示邏輯抽離到單獨嘅檔案入面。
創建content.php或template-parts/content.php檔案，然後喺循環入面透過get_template_part()函數調用佢。
推薦閱讀 WordPress主題開發完整指南：從入門到精通實戰教程。
// 在 index.php 的循环中
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_format() );
endwhile;跟住就整template-parts/content.php：
<article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
<h2><a href="/yue/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-meta">
by
</div>
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
</article>咁樣，文章標題、摘要、元數據等就以標準化嘅格式輸出咗。
引入樣式同腳本
一個現代化嘅主題離唔開CSS同JavaScript。WordPress提供咗標準嘅函數來安全地排隊（enqueue）樣式表同腳本檔案，而唔係直接喺模板度用<link>或<script>標籤。
註冊同排隊主樣式表
雖然我哋已經有咗style.css，但通常我哋會透過functions.php檔案嚟載入佢。首先喺主題根目錄建立functions.php檔案。
跟住，用wp_enqueue_style()函數嚟載入樣式表。我哋需要喺functions.php度建立一個函數，並將佢掛鈎到wp_enqueue_scripts呢個動作上。
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-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );get_stylesheet_uri()函數會自動獲取主題嘅style.css檔案路徑。
加入響應式導航選單腳本
為咗加入互動功能，例如手機版嘅響應式選單，我哋需要引入JavaScript。假設我哋有一個簡單嘅腳本來切換選單嘅顯示/隱藏。
首先，創建一個js/navigation.js檔案。然後，喺functions.php喺同一個函數裏面，用wp_enqueue_script()嚟載入佢。
function my_first_theme_scripts() {
// ... 之前的样式代码 ...
// 加载导航脚本
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}最後一個參數true表示將腳本擺喺頁面底部（</body>標籤之前），呢個通常有助於頁面載入效能。
實現主題核心功能
functions.php係主題嘅「大腦」，用嚟添加各種功能同支援。除咗加載資源，我哋仲需要喺度聲明主題支援嘅功能。
加入主題功能支援
WordPress提供咗一系列「主題功能」，你需要明確聲明支援佢哢，先至可以用到。最基本嘅功能包括文章縮圖（特色圖像）、自訂菜單同HTML5標記支援。
在functions.php入面加以下嘅代碼：
function my_first_theme_setup() {
// 让主题支持文章和评论的RSS feed链接自动添加到head中
add_theme_support( 'automatic-feed-links' );
// 让文章和页面支持“特色图像”
add_theme_support( 'post-thumbnails' );
// 启用对HTML5标记的支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 启用标题标签支持，WordPress会自动管理文档标题
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );after_setup_theme係一個喺主題初始化時運行嘅動作鈎子，係設定主題功能嘅標準位置。
登記導航菜單
大多數網站都需要導航菜單。WordPress嘅菜單系統容許用戶喺後台「外觀」->「菜單」度自訂菜單項目。你需要先為你嘅主題註冊菜單位置。
喺頭先my_first_theme_setup函數入面，繼續加：
function my_first_theme_setup() {
// ... 之前的 add_theme_support 代码 ...
// 注册一个主菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}註冊之後，你就可以喺模板文件（如header.php）入面用wp_nav_menu()函數嚟顯示呢個菜單喇：
<nav>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>建立側邊欄同小工具區域
小工具（Widget）係WordPress另一個強大嘅功能。要使用佢，你需要先註冊一個側邊欄（即係小工具就緒區域）。
在functions.php入面建立一個新函數，並掛鈎到widgets_init動作上面：
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-first-theme' ),
'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_first_theme_widgets_init' );註冊後，你喺後台「外觀」->「小工具」度會見到「主側邊欄」區域，可以將小工具拖曳過去。要喺主題度顯示佢，就需要喺模板（例如sidebar.php）入面調用dynamic_sidebar( 'sidebar-1' )函數。
摘要
透過呢個指南，我哋完成咗一個極簡但功能完整嘅WordPress主題開發流程。我哋由搭建環境、創建基礎檔案開始，逐步構建模板層級，分開咗頭部同尾部，實現咗核心嘅文章循環。跟住，我哋學識咗點樣用標準方式為主題加入樣式同腳本，確保兼容同效能。最後，喺functions.php度，我哋啟動咗主題嘅核心功能，例如特色圖像、導航選單同小工具區域，令主題有強大嘅可自訂性。
呢個只係一個起點。喺呢個基礎上面，你可以繼續創建更專業嘅模板檔案（例如single.php、page.php、archive.php），探索更複雜嘅WordPress API，例如自訂文章類型、分類法、自訂器（Customizer）API等等，從而打造出功能豐富、設計獨特嘅專屬網站主題。
常見問題
開發WordPress主題必須掌握邊啲技術？
開發WordPress主題需要掌握幾項核心技術。首先係PHP，因為WordPress本身係用PHP編寫嘅，所有模板文件同功能邏輯都離唔開佢。你需要理解基本嘅PHP語法、函數、循環同條件語句。
其次係HTML同CSS，用於構建網頁嘅結構同樣式。了解響應式網頁設計原則同現代CSS佈局技術（例如Flexbox、Grid）非常重要。最後，對JavaScript有基本了解，用於實現前端互動功能。熟悉WordPress特有嘅PHP函數同鉤子（Hooks）系統就係進行高效主題開發嘅關鍵。
style.css 同 functions.php 文件邊個更重要？
呢兩個檔案喺WordPress主題開發中扮演住完全唔同但都至關重要嘅角色，冇得簡單比較邊個重要啲。style.cssstyle.css檔案係主題嘅「身份標識」，佢檔案頭部嘅註釋區塊係WordPress識別一個主題所必需嘅。冇咗佢，主題就冇辦法喺後台嘅「主題」列表度顯示出嚟。
而functions.phpfunctions.php檔案係主題嘅「功能中心」，幾乎所有增強主題功能嘅程式碼都寫喺呢度，例如註冊選單、添加主題支援、載入腳本樣式、定義自訂函數等等。冇咗佢，主題就會失去大部分動態功能同可擴展性。兩者相輔相成，缺一不可。
點解必須要用 wp_head() 同 wp_footer() 函數？
wp_head()同埋wp_footer()functions.php係WordPress核心同主題、插件之間通訊嘅關鍵鉤子。喺header.php的</head>標籤前調用wp_head()，係允許WordPress本身、你安裝嘅插件同你主題嘅其他部分，向頁面頭部插入必要代碼（例如元標籤、樣式表連結、腳本引用、JSON-LD結構化數據等）嘅標準方式。
同樣，喺footer.php的</body>標籤前調用wp_footer()，用於插入需要喺頁面底部加載嘅腳本（例如分析代碼、延遲加載嘅JS）或其他HTML。如果遺漏呢啲函數，可能會導致插件無法正常運作、管理工具列唔顯示，以及各種兼容性問題。
點樣可以令我嘅主題符合WordPress官方標準？
為咗令你嘅主題符合WordPress官方標準並具備高質量，你需要遵循《WordPress主題開發手冊》同《主題審查要求》。呢啲包括：使用安全嘅編碼實踐，對所有動態輸出數據使用轉義函數（例如esc_html(), esc_url()），對所有翻譯字串使用國際化函數（例如__(), _e()）並載入文字域。
主題應具備響應式設計，確保喺所有裝置上都能夠良好顯示。代碼應清晰、有註釋，並遵循WordPress編碼標準。此外，主題應透過WordPress自訂器提供充分嘅自訂選項，並正確實現所有核心嘅WordPress功能同掛鉤。發佈前，使用Theme Check插件進行測試係一個好習慣。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。