WordPress主題是網站外觀和功能的核心。與使用現成主題不同，自主開發主題能帶來完全的控制權、更高的效能以及更貼合專案需求的定製化體驗。本指南將帶你係統性地理解並實踐如何從頭開始構建一個專業、標準、可擴充套件的WordPress主題。
開發環境與工具準備
在開始編寫第一行程式碼之前，一個高效的開發環境至關重要。
本地伺服器環境搭建
推薦使用整合的本地伺服器軟體，如 Local by Flywheel、XAMPP 或 MAMP。這類工具一鍵安裝 Apache/Nginx、PHP 和 MySQL，並模擬線上伺服器環境。核心要求是 PHP 版本不低於 7.4，MySQL 版本不低於 5.6。
推荐阅读 從入門到精通：打造专业级 WordPress 主题的完整开发指南。
程式碼編輯器與開發工具
選擇一個功能強大的程式碼編輯器，如 Visual Studio Code、PhpStorm 或 Sublime Text。VS Code 憑藉其豐富的外掛生態（如 PHP Intelephense、WordPress Snippet、Live Server）成為許多開發者的首選。
確保安裝並激活瀏覽器的開發者工具，用於實時除錯 HTML、CSS 和 JavaScript。
版本控制系統
從專案伊始就使用 Git 進行版本控制。在程式碼根目錄初始化一個 Git 倉庫，並連線到 GitHub、GitLab 或 Bitbucket 等遠端倉庫。這不僅便於程式碼管理，也為團隊協作和未來部署打下基礎。
主题文件结构与核心文件
一個標準的WordPress主題遵循特定的目錄和檔案結構。主題資料夾通常位於 /wp-content/themes/your-theme-name/。
主題必需檔案
每個主題必須包含兩個最基礎的檔案：style.css 以及 index.php其中,style.css 不僅僅是樣式表，其頂部的註釋塊更是主題的“身份證”，用於向WordPress系統宣告主題資訊。
推荐阅读 零到一：WordPress主题开发终极指南与实践教程。
/*
Theme Name: 我的专业主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 一个由零开始构建的专业WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-professional-theme
*/index.php 是主題的預設模板檔案，也是所有頁面的最後備選。一個最簡單的 index.php 可以只包含呼叫部落格文章的迴圈。
模板層級與常用模板檔案
WordPress 使用模板層級來決定為特定頁面使用哪個模板檔案。理解這一機制是主題開發的關鍵。你需要逐步建立以下核心模板檔案：
* header.php: 網站頭部，包含 <!DOCTYPE html>、<head> 區域和頁面頂部公共部分。
* footer.php：網站底部，包含版權資訊、指令碼引入等。
* functions.php: 主題的“大腦”，用於新增功能、註冊選單、側邊欄，引入指令碼和樣式。
* page.php用于显示单个页面。
* single.php: 用於顯示單篇部落格文章。
* archive.php: 用於顯示分類、標籤、作者等歸檔頁面。
* front-page.php: 當設定為靜態首頁時，此檔案將作為網站首頁。
* style.css: 主樣式表。
在主模板檔案中，使用 get_header()、get_footer()、get_sidebar() 等函式來模組化地引入這些部分。
核心功能與主題選項
通过 functions.php 檔案，你可以為你的主題注入強大的功能。
新增主題支援功能
使用
（注：此处"使用"指的是某种产品或服务的使用情况） add_theme_support() 函式來宣告主題支援的核心功能。例如，啟用文章縮圖、自定義徽標、HTML5 標記支援等。
function my_theme_setup() {
// 启用文章和页面特色图像
add_theme_support( 'post-thumbnails' );
// 启用自定义徽标
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
) );
// 启用 HTML5 对表单、搜索表单、评论列表等的支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 添加标题标签支持
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );註冊選單與側邊欄
WordPress 允許使用者通過後臺管理選單和小工具。你需要先在 functions.php 中註冊它們。
推荐阅读 《WordPress主题开发完全指南：从入门到精通的实战教程》。
註冊導航選單使用 register_nav_menus() 函式：
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-professional-theme' ),
'footer' => __( '页脚菜单', 'my-professional-theme' ),
) );然后，他又拿起那把刀，将她的喉咙割开了。 header.php 或者 footer.php 请将下文翻译成中文，并详细说明翻译过程： wp_nav_menu() 函数调用。
註冊小工具區域（側邊欄）使用 register_sidebar() 函式：
register_sidebar( array(
'name' => __( '主侧边栏', 'my-professional-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-professional-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );在模板中使用 dynamic_sidebar( 'sidebar-1' ) 來顯示。
安全引入指令碼與樣式
永遠不要直接在模板檔案中硬編碼引入 CSS 和 JS 檔案。應使用 wp_enqueue_scripts 鉤子來安全地排隊載入。
function my_theme_scripts() {
// 引入主题主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0.0' );
// 引入自定义 JavaScript 文件
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );模板標籤與迴圈
WordPress 的核心功能是動態顯示內容，而這主要透過模板標籤和“迴圈”實現。
理解主迴圈
“迴圈”是 WordPress 用於從資料庫中檢索內容並在頁面上顯示的 PHP 程式碼。其基本結構如下：
<!-- 在这里显示每篇文章的内容 -->
<h2></h2>
<div></div>
<p><?php _e( '抱歉，没有找到任何内容。', 'my-professional-theme' ); ?></p>這個迴圈會出現在 index.php、archive.php、single.php 等幾乎所有顯示內容的模板中。
常用模板標籤
模板標籤是用於輸出特定內容的 PHP 函式。例如：
* the_title(): 輸出文章/頁面標題。
* the_content(): 輸出文章/頁面主要內容。
* the_excerpt(): 輸出文章摘要。
* the_permalink(): 獲取文章/頁面的永久連結。
* the_post_thumbnail(): 輸出文章特色影象。
* the_category(): 輸出文章所屬分類。
* comments_template(): 引入評論模板。
自定義查詢與迴圈
有時你需要顯示主迴圈之外的內容，例如在首頁顯示一個特定分類的文章列表。這時你需要建立自定義的 WP_Query 迴圈。
<?php
$custom_query = new WP_Query( array(
'category_name' => 'featured',
'posts_per_page' => 3,
) );
if ( $custom_query->have_posts() ) :
while ( $custom_query->have_posts() ) : $custom_query->the_post();
// 显示每篇精选文章
endwhile;
wp_reset_postdata(); // 重置全局 $post 数据
endif;
?>总结
從零開始開發一個WordPress主題是一個系統性的工程，它要求開發者不僅掌握PHP、HTML、CSS和JavaScript等前端技術，更要深入理解WordPress的核心架構，如模板層級、鉤子機制和資料庫查詢。透過搭建專業開發環境、構建標準的檔案結構、在 functions.php 中穩健地新增功能、並熟練運用模板標籤與迴圈，你將能夠創造出完全符合設計需求、效能優異且易於維護的專業級主題。這個過程雖然有一定學習曲線，但帶來的靈活性、控制力和技能提升是使用現成主題無法比擬的。記住，遵循WordPress編碼標準和最佳實踐，是確保你的主題安全、相容且面向未來的關鍵。
常见问题解答（FAQ）
開發WordPress主題需要哪些程式語言基礎？
開發WordPress主題主要需要PHP、HTML、CSS和JavaScript的基礎知識。PHP用於處理邏輯和動態內容；HTML負責頁面結構；CSS控制樣式和佈局；JavaScript則用於實現互動效果。對MySQL有基本瞭解也有助於理解資料查詢。
主題的 functions.php 檔案有什麼作用？
functions.php 檔案是主題的功能核心。它用於新增或修改主題的功能，例如註冊選單和側邊欄、新增主題功能支援（如特色影象）、安全地引入CSS和JavaScript指令碼、定義自定義函式以及透過WordPress鉤子（Hooks）來擴充套件或修改核心行為。
怎样让我的主题支持多语言？
讓主題支援多語言（國際化i18n）主要涉及兩個步驟。首先，在 functions.php 中載入主題文字域，使用 load_theme_textdomain( 'my-theme', get_template_directory() . '/languages' )。其次，在主題的所有PHP檔案中，將所有需要翻譯的字串用 __( '文本', 'my-theme' ) 或者 _e( '文本', 'my-theme' ) 函式包裹。之後，可以使用Poedit等工具生成 .po 以及 .mo 翻譯檔案。
開發完成後，如何測試我的主題？
主題開發完成後，需要進行全面測試。包括：在不同瀏覽器（Chrome、Firefox、Safari、Edge）和不同裝置尺寸（響應式設計）上進行外觀測試；使用WordPress除錯模式（在 wp-config.php 设置中文环境 define( 'WP_DEBUG', true );）來查詢PHP錯誤、警告和通知；使用外掛如WP Theme Check來檢查主題是否符合WordPress官方標準；以及測試所有功能，如表單提交、選單、小工具、分頁、評論等。
下一步，该怎么做呢？
延伸阅读与实用知识
下方列出的内容与本文主题相关，适合继续深入阅读。建议先从与你当前问题最相关的文章开始阅读，然后逐步扩展到相关主题，这样效果通常会更好。