WordPress主題開發基礎同埋環境搭建
喺開始寫程式碼之前，你需要理解一個WordPress主題嘅基本構成。一個主題本質上係一個文件夾，裏面包含一系列用PHP、CSS、JavaScript同圖片等檔案，佢哋一齊定義咗網站嘅外觀同部分功能。呢個文件夾必須位於WordPress安裝目錄下嘅wp-content/themes目錄入面。每個主題都需要一個核心嘅樣式檔案style.css同一個基礎模板檔案index.php，呢個係啟動任何主題開發項目嘅最基本要求。
為咗高效咁進行開發，強烈建議你搭個本地開發環境。咁樣可以令你喺唔影響線上網站嘅情況下自由測試。你可以用啲集成工具包，例如XAMPP、MAMP、Local by Flywheel 或者 DevKinsta，佢哋可以一鍵安裝 Apache/Nginx、PHP 同 MySQL。喺本地環境入面，你仲需要一個代碼編輯器，好似 VS Code、PhpStorm 或者 Sublime Text，佢哋對 PHP、HTML 同 CSS 語法嘅高亮同提示功能會大大提升你嘅編碼效率。
準備工作完成之後，你需要喺wp-content/themes目錄下創建一個新嘅資料夾，例如my-first-theme。跟住落嚟，我哋創建第一個必需嘅文件。
推薦閱讀 從零開始掌握 WordPress 主題開發：構建自訂網站嘅最佳實踐同指南。
建立核心樣式檔
喺主題資料夾入面，新整一個叫做style.css嘅檔案。呢個檔案唔單止負責網站嘅樣式，佢開頭嘅註解頭（Header）更加係WordPress辨認主題嘅唯一方法。註解頭包含咗主題嘅名、作者、描述等等嘅元資料。
下面係一個style.css檔案開頭嘅標準例子：
/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 一个用于学习WordPress主题开发的简洁入门主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 博客, 简洁, 响应式
Text Domain: my-first-theme
*/喺檔案頭之後，你就可以好似寫普通CSS咁，開始為你嘅網站元素加樣式規則。文字域（Text Domain）my-first-theme係為咗主題國際化（翻譯）預留嘅識別符，應該保持同主題資料夾名一致。
構建主題核心模板檔案
模板檔案係WordPress主題嘅骨架，佢哋決定咗唔同類型嘅內容點樣被組織同展示。呢啲檔案主要係由PHP程式碼構成，仲混合咗HTML標籤。最基本嘅模板檔案係index.php，佢係所有頁面嘅後備模板，當冇更特定嘅模板（例如single.php或page.php）嗰陣，WordPress就會用到佢。
創建基礎索引檔案
喺主題資料夾入面創建index.php。一個最簡單但功能完整嘅index.php可以包含WordPress循環（The Loop），呢個係用嚟由資料庫度攞同顯示文章內容嘅核心機制。
推薦閱讀 WordPress主題開發從入門到精通：手把手教你構建自訂網站。
一個最細化嘅index.php例子如下：
<!DOCTYPE html>
<html no numeric noise key 1017>
<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 1014>
<header>
<h1><a href="/yue/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</header>
<main>
<article>
<h2><a href="/yue/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div><?php the_content(); ?></div>
</article>
<p>暫時冇文章。</p>
<?php endif; ?>
</main>
<footer>
<p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>呢個檔案包含咗幾個關鍵部分：wp_head()同埋wp_footer()掛鉤，佢哋容許WordPress核心、插件同其他腳本喺頁面嘅同結束前插入必要代碼（例如CSS、JS）。the_post()函數喺循環入面用嚟設定當前文章嘅數據，跟住the_title()同埋the_content()等模板標籤就可以輸出對應嘅內容。
引入樣式同腳本
淨得style.css檔案仲未夠，你需要透過函數話俾WordPress知幾時載入佢。咁就需要喺主題資料夾入面建立另一個好重要嘅檔案：functions.php。呢個唔係一個模板檔案，而係主題嘅「功能庫」，用嚟增強主題功能、註冊選單、側邊欄同安全咁引入樣式表同腳本。
擴展主題功能同樣式加載
functions.php檔案係主題嘅引擎室，所有唔同直接頁面輸出相關嘅PHP代碼都應該放喺呢度。喺呢個檔案入面，你應該用add_action()函數將你嘅代碼掛載到WordPress嘅特定動作鉤上面，確保佢哋喺正確嘅時機執行。
安全載入樣式表
正確嘅方式唔係直接喺模板文件度用標籤引入style.css，而係透過wp_enqueue_style()函數嚟排隊加載。咁樣跟返WordPress嘅依賴管理機制，又可以避免重複加載。
在functions.php入面加以下嘅代碼：
推薦閱讀 2026年熱門入門指南：點樣從零開始整你嘅第一個WordPress主題。
<?php
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
// 可以在此加载其他样式或脚本，例如：
// wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );呢度，get_stylesheet_uri()個函數會自動攞到主題嘅style.css檔案路徑。add_action( 'wp_enqueue_scripts', ... )確保我哋嘅加載函數喺WordPress準備前端腳本同樣式嗰陣被調用。
啟用基本主題功能
在functions.php喺度，我哋仲可以開返啲對現代網站好緊要嘅功能。例如，幫文章同頁面啟用特色圖像（文章縮圖）支援，同埋幫網站加返自訂菜單位置。
// 启用文章特色图像
add_theme_support( 'post-thumbnails' );
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
// 为WordPress生成的标签添加title属性支持
add_theme_support( 'title-tag' );add_theme_support()函數用嚟宣告主題支援嘅各種功能，而register_nav_menus()就定義咗可以喺WordPress後台「外觀」->「菜單」度分配菜單嘅位置。
整專用模板同主題測試
隨著主題基礎功能嘅完善，單一嘅index.php檔案已經無法滿足所有頁面類型嘅展示需求。WordPress嘅模板層級結構容許你為首頁、單獨文章、頁面、歸檔頁等創建專用嘅模板檔案，以提供更精細嘅控制。
創建文章單頁模板
當用戶點擊閱讀某篇文章嘅全文時，會進入文章單頁。創建一個名為single.php嘅檔案來專門控制其顯示。佢通常包含更完整嘅文章資訊，如分類、標籤、作者同評論。
<?php get_header(); ?>
<main>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1013>
<h1><?php the_title(); ?></h1>
<div class="meta">
发布于： | 作者：
</div>
<?php if ( has_post_thumbnail() ) : ?>
<div class="featured-image">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<div class="content">
<?php the_content(); ?>
</div>
<div class="taxonomies">
分类：
<br>
标签：
</div>
</article>
</main>呢個模板引入咗新嘅模板函數：get_header(), get_sidebar()同埋get_footer()。佢哋會分別載入名為header.php、sidebar.php同埋footer.php嘅模板部件檔案。呢種方式將頁面結構模組化，避免咗代碼重複。你需要建立呢啲對應嘅檔案，並喺入面移入index.php中相應嘅頭部、底部同側邊欄代碼。
測試同驗證你嘅主題
完成核心模板創建之後，登入你嘅WordPress後台，進入「外觀」->「主題」。你應該會睇到「我嘅第一個主題」出現喺主題列表度。啟動佢，然後分別訪問網站首頁同單篇文章頁面，檢查所有元素（標題、內容、選單、頁尾）係咪按預期顯示。
使用瀏覽器開發者工具檢查HTML結構係咪正確，CSS係咪生效。嘗試創建幾篇測試文章，包含特色圖像、分類同標籤，確保佢哋喺模板度都能夠正確調用同展示。呢個係發現同修復潛在問題嘅最佳方式。
摘要
恭喜你完成咗第一個WordPress主題嘅基礎構建。透過呢個指南，你掌握咗從零開始創建主題資料夾、編寫必需嘅style.css同埋index.php檔案，到用functions.php增強功能、加載資源，再到創建專用模板文件同進行模組化開發嘅完整流程。呢度只係主題開發世界嘅起點，跟住你可以深入探索更多嘅模板文件（例如page.php、archive.php）、小工具區域、自定義文章類型呢啲高級主題，並且不斷優化你嘅代碼結構同設計。
常見問題
### 點解我嘅主題喺後台唔顯示？
呢個通常係因為style.css檔案入面嘅主題註解頭格式唔啱或者冇咗，所以搞成咁。請確保個檔案喺主題資料夾嘅根目錄，同埋註解頭資訊齊全、格式準確。另一個可能原因係檔案權限問題，確保WordPress有權限讀取你嘅主題資料夾。
functions.php檔案係咪一定要有？
技術上嚟講，一個淨係得style.css同埋index.php嘅主題都行得通。但係functions.php對於實現任何超越基本HTML輸出嘅功能（例如註冊菜單、加側邊欄、安全載入腳本同樣式）係必不可少嘅。佢係擴展同自訂主題功能嘅標準方式，所以對於任何實用嘅主題嚟講，佢都係必需嘅。
點樣可以幫我個主題加側邊欄？
首先，喺functions.php入面用register_sidebar()函數註冊一個或多個小工具區域（側邊欄）。然後，喺你希望顯示側邊欄嘅模板檔案（例如index.php或single.php）入面，使用dynamic_sidebar()函數嚟調用佢。最後，用戶就可以喺WordPress後台嘅「外觀」->「小工具」頁面中向呢個區域拖放小工具喇。
開發主題時有咩安全注意事項？
永遠唔好直接相信用戶輸入或者嚟自數據庫嘅數據。喺輸出任何動態內容到頁面嗰陣，務必使用WordPress提供嘅轉義函數，例如esc_html()、esc_url()同埋wp_kses_post()。喺主題度引入自訂功能或者表單嗰陣，要跟返WordPress嘅nonce同權限檢查機制。使用wp_enqueue_style()同埋wp_enqueue_script()嚟載入資源，而唔係硬編碼或者標籤。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。