當你開始學習WordPress開發時，創建自己嘅主題係一個好令人興奮嘅里程碑。佢唔單止可以令你完全掌控網站嘅外觀同功能，亦係深入理解WordPress核心架構嘅最佳方式。本文會引導你完成由環境搭建到基礎主題創建嘅完整流程，幫你踏出成為WordPress開發者嘅第一步。
開發前嘅準備工作
喺開始編寫任何代碼之前，建立一個高效嘅本地開發環境至關重要。咁樣可以令你喺唔影響線上網站嘅情況下進行測試同調試。
搭建本地開發環境
我哋首先需要安裝本地伺服器軟件。你可以選擇XAMPP、MAMP或者Local by Flywheel等工具。呢啲軟件包集成了Apache伺服器、MySQL數據庫同PHP，係運行WordPress嘅必要條件。以XAMPP為例，安裝後啟動Apache同MySQL服務，你部電腦就會變成一個本地伺服器。
推薦閱讀 WordPress 主題開發入門：從零開始構建你嘅第一款自訂主題。
跟住，下載最新版本嘅WordPress，並將其解壓到本地伺服器嘅網站根目錄（例如XAMPP嘅htdocs資料夾）。然後，透過訪問http://localhost/your-wordpress-folder嚟完成出名嘅「五分鐘安裝」。安裝過程中，你需要建立資料庫，同埋設定網站嘅管理員用戶名同密碼。
準備代碼編輯器同工具
一個優秀嘅代碼編輯器可以大大提升開發效率。Visual Studio Code、PhpStorm或者Sublime Text都係唔錯嘅選擇。特別係VS Code，擁有豐富嘅WordPress同PHP擴展，例如PHP Intelephense，可以提供智能代碼補全同語法檢查。
另外，建議你裝一個瀏覽器開發者工具插件，例如WordPress官方嘅「Theme Check」插件，用嚟喺開發後期檢查個主題係咪符合標準。你仲可以用瀏覽器嘅「檢查元素」功能嚟即時調試HTML同CSS。
理解WordPress主題嘅基本結構
一個最簡化嘅WordPress主題只需要兩個檔案，但一個功能完整、符合標準嘅結構包含多個特定檔案，佢哋各自負責唔同嘅職責。
核心嘅樣式表檔案
每個WordPress主題都必須要有style.css文件。呢個檔案唔單止係定義主題樣式嘅CSS檔案，佢檔案開頭嘅註解區塊更加係主題嘅「身份證」，包含咗WordPress識別主題所需嘅所有元資料。一個基本嘅開頭註解如下所示：
推薦閱讀 WordPress主題開發：從零開始構建自訂主題嘅完整指南。
/*
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
*/其中，Text Domain用於國際化，係之後調用翻譯函數__()或_e()時使用嘅識別符。
基礎嘅模板檔案
另一個必需嘅檔案係index.php。佢係主題嘅默認模板，當 WordPress 搵唔到其他更具體嘅模板檔案（例如single.php或page.php）嗰陣，就會用佢嚟渲染頁面。
只要有呢兩個檔案，你嘅主題就已經可以喺 WordPress 後台嘅「外觀」->「主題」清單度出現，而且可以啟用。當然，佢暫時只係一個空白框架。要令主題真正運作，我哋仲需要建立幾個關鍵模板檔案。
首先創建header.php，佢包含 HTML 文件嘅頭部，例如<doctype>聲明、<head>區域（其中應該使用wp_head()函數引入WordPress核心腳本同樣式），同埋網站頁眉嘅標記。
其次創建footer.php，佢包含網站嘅頁尾內容，並喺結束前調用wp_footer()函數，呢個係好多插件喺頁面底部加代碼必需嘅鉤子。
最後，創建functions.php。呢個文件唔係必須嘅，但佢係主題嘅「大腦」。你可以喺度加主題支援嘅功能、註冊菜單同側邊欄、引入樣式同腳本檔案，同埋定義各種自訂函數。
推薦閱讀 點樣由零開始開發一個自訂WordPress主題。
構建主題嘅核心功能
有咗基礎檔案之後，我哋就可以開始為主題注入生命，令佢具備一個網站嘅基本功能。
實現導航選單
現代網站通常都有導航選單。首先，你需要喺functions.php入面用register_nav_menus()函數嚟註冊菜單位置。
function my_first_theme_setup() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
'footer' => __( '页脚菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );呢段代碼註冊咗兩個菜單位置：「主導航選單」同「頁腳選單」。然後，喺你希望顯示選單嘅模板位置（例如header.php入面），用wp_nav_menu()函數調用佢。
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );用户而家就可以喺WordPress后台嘅「外观」->「菜单」度创建菜单，并且分配到「主导航菜单」位置。
启用文章特色图像同侧边栏
好多主题都支持文章缩略图（特色图像）同小工具侧边栏。同样喺functions.php的my_first_theme_setup函数入面，加以下代码嚟启用呢啲功能：
add_theme_support( 'post-thumbnails' ); // 启用文章特色图像
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); // 启用HTML5标记支持要註冊一個側邊欄小工具區域，使用register_sidebar()函數：
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提供咗幾個核心函數嚟引入其他模板檔案，咁樣可以確保代碼嘅模組化同可維護性。喺你嘅index.php入面，結構應該係咁樣：
<?php get_header(); ?>
<main id="main" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 循环输出文章内容
get_template_part( 'template-parts/content', get_post_type() );
endwhile;
the_posts_navigation(); // 文章导航
else :
get_template_part( 'template-parts/content', 'none' ); // 没有找到内容时的模板
endif;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>get_header(), get_sidebar(), get_footer()函數分別引入對應嘅模板檔案。get_template_part()係一個更靈活嘅函數，佢鼓勵你將重複使用嘅內容塊（例如文章摘要）分離到template-parts文件夾下嘅獨立檔案入面，例如content.php。
編寫基礎樣式同響應式設計
而家，打開style.css，開始為你嘅主題添加樣式。首先設定一啲全局樣式，例如盒模型、字體同顏色。
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}為咗實現響應式設計，使用媒體查詢嚟調整唔同屏幕尺寸下嘅佈局。例如，令側邊欄喺細屏幕下移動到主內容下方：
@media (max-width: 768px) {
.site-main {
width: 100%;
}
#sidebar {
width: 100%;
margin-top: 2rem;
}
}唔好忘記喺header.php的<head>部分添加視口元標籤，以確保喺流動裝置上正確縮放：<meta name="viewport" content="width=device-width, initial-scale=1">。
摘要
從創建一個包含style.css同埋index.php由個文件夾開始，到整出一個有導航、側邊欄同響應式佈局嘅完整主題，呢個過程包咗WordPress主題開發嘅核心概念。你學識咗點樣透過functions.php擴展主題功能，點樣用模板層級系統組織代碼，同埋點樣將設計轉化做前端嘅HTML同CSS。呢個只係起點，跟住你可以探索更高級嘅模板文件（例如single.php, page.php, archive.php）、自定義文章類型、主題定制器API，甚至用Sass同JavaScript框架去整更複雜、更現代嘅主題。持續實踐，同埋參考官方開發者文檔，係提升技能最好嘅方法。
常見問題
開發主題係咪一定要用子主題？
唔一定。由頭開始創建獨立主題係完全可以嘅，亦係學核心原理最好嘅方式。用子主題通常係需要對一個現有父主題（例如流行框架主題）進行定制同修改時嘅最佳實踐，因為咁可以確保父主題更新嗰陣你嘅自定義修改唔會被覆蓋。對於全新嘅開發項目，由零開始整獨立主題更加常見。
點樣令我嘅主題支援多語言？
要令主題支援多語言（國際化）主要涉及兩個步驟。首先，確保喺style.css嘅頭同埋functions.php入面所有需要翻譯嘅字串都用WordPress嘅翻譯函數包住，例如__( ‘文本’, ‘my-first-theme’ )或_e( ‘文本’, ‘my-first-theme’ )。其次，你需要用好似Poedit呢類工具嚟創建.pot翻譯模板檔案，然後為每種語言生成相應嘅.po同埋.mo檔案，並將佢放喺主題嘅/languages目錄下。
主題開發完成後點樣發佈？
喺發佈之前，一定要用「Theme Check」插件對你嘅主題進行嚴格測試，確保佢符合WordPress主題目錄嘅所有編碼標準同安全要求。清走所有調試代碼同註釋。然後，你可以選擇將主題提交到官方嘅WordPress.org主題目錄（需要審核），或者將佢打包成ZIP檔案，直接提供畀客戶或者喺自己嘅網站上分發。如果自己分發，請確保提供清晰嘅安裝說明同文檔。
點解我嘅自訂樣式喺後台更新之後唔見咗？
好大可能係因為你直接修改咗正在使用嘅父主題檔案。當該父主題透過WordPress後台更新時，所有核心檔案都會被新版本覆蓋，導致你嘅修改消失。呢個就係點解對於任何定制化開發，強烈推薦使用子主題。子主題嘅樣式同函數會獨立於父主題加載，即使父主題更新，你嘅子主題檔案都可以完好無缺咁保留所有自訂內容。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。