在當今的網站開發領域，WordPress 以其強大的靈活性和龐大的生態系統佔據著重要地位。一個 WordPress 網站的外觀和功能核心，正是其主題。學習如何從零開始開發一個 WordPress 主題，不僅能讓你完全掌控網站的設計，也是深入理解 WordPress 核心工作原理的絕佳途徑。本文將引導你完成構建一個基礎但功能完整的主題所需的全部步驟。
開發環境與基礎結構
在編寫第一行程式碼之前，搭建一個合適的本地開發環境至關重要。你可以使用 XAMPP、MAMP、Local by Flywheel 或 Docker 等工具。確保環境包含 PHP、MySQL 和 Apache/Nginx。之後，安裝一個全新的 WordPress 例項用於測試。
一个 WordPress 主题本质上是一个位于服务器上的文件夹，包含用于设计和布局网站的各种文件和资源。这些文件和资源包括 HTML 模板、样式表、图像、脚本等。 /wp-content/themes/ 目錄下的資料夾。這個資料夾的名字就是你的主題識別符號。在這個資料夾內，有兩個檔案是強制性的，它們構成了主題的基礎結構。
推荐阅读 WordPress 主题开发从入门到精通：打造高效的自定义网站。
主题信息公告文件
第一個必需的檔案是 style.css。它的作用不僅是存放樣式，更重要的是其檔案頭部的註釋塊，用於向 WordPress 宣告主題的元資料。這個資訊塊必須放在檔案的最頂部。
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
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 找不到更具體的模板檔案時，就會使用它來渲染頁面。即使它暫時是空的，也必須存在。
然而，一個更現代和標準的做法是建立一個 functions.php 檔案。這個檔案是你的主題的“功能外掛”，用於新增主題支援功能、註冊選單、側邊欄，以及排隊樣式和指令碼。雖然它不是強制性的，但幾乎是所有主題的標配。
<?php
// 主题功能定义
function my_first_theme_setup() {
// 让 WordPress 管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和评论的 RSS feed 链接
add_theme_support( 'automatic-feed-links' );
// 启用文章缩略图（特色图像）功能
add_theme_support( 'post-thumbnails' );
// 注册一个导航菜单
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>创建核心模板文件
WordPress 使用模板層級系統來決定為特定的頁面請求使用哪個模板檔案。理解並建立這些檔案是主題開發的核心。除了 index.php，你至少需要建立以下幾個基礎模板。
推荐阅读 WordPress主題開發入門指南：從零開始構建高階介面。
全站通用頭部與尾部
header.php 檔案包含每個頁面頂部的通用程式碼，如文件型別宣告、 區域、站點標題和主導航。使用 get_header() 函式在模板中呼叫它。
footer.php 檔案包含每個頁面底部的通用程式碼，如版權資訊、指令碼引用等。使用 get_footer() 函数调用。
一个典型的 header.php 開頭部分如下：
<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1005>
<header>
<h1><a href="/zh-tw/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
<nav>
'primary',
'menu_class' => 'primary-menu',
));
?>
</nav>
</header>wp_head() 以及 wp_footer() 是至關重要的鉤子，許多外掛和 WordPress 核心功能依賴它們來注入程式碼，務必確保它們存在。
文章迴圈與內容展示
single.php 用於顯示單篇部落格文章或自定義文章型別。其核心是“WordPress 迴圈”，這是用於從資料庫中檢索並顯示內容的機制。
一個基礎的 single.php 結構如下：
推荐阅读 零基础掌握 WordPress 主题开发：打造现代化网站实战指南。
<main>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
<h1></h1>
<div class="meta">
发布于：<?php the_date(); ?> | 作者：<?php the_author(); ?>
</div>
<div class="post-thumbnail">
</div>
<div class="content">
</div>
</article>
<?php comments_template(); ?>
<?php endwhile; endif; ?>
</main>page.php 用於顯示靜態頁面，其結構與 single.php 類似，但通常不顯示釋出日期和作者。
樣式、指令碼與側邊欄
一個美觀且功能正常的主題離不開 CSS 和 JavaScript 的加持，同時側邊欄為小工具提供了掛載點。
安全地新增樣式與指令碼
永遠不要直接在模板檔案中硬連結 CSS 和 JS 檔案。正確的方式是透過 functions.php 檔案，使用 wp_enqueue_style() 以及 wp_enqueue_script() 函式來“排隊”它們。這確保了依賴關係正確，並避免重複載入。
function my_first_theme_scripts() {
// 排队主题的主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 排队一个自定义 JavaScript 文件
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );註冊動態側邊欄
側邊欄（小工具區域）允許使用者透過 WordPress 後臺動態地新增內容。你需要先在 functions.php 中註冊它。
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' ) 函式來呼叫這個側邊欄，並在需要的地方透過 get_sidebar() 引入。
主题的国际化及发布准备工作
當你完成了主題的基本開發後，還有兩個重要的步驟：國際化（i18n）以便翻譯，以及為釋出做準備。
實現文字翻譯支援
國際化意味著將所有面向用戶的文字字串用特定的 WordPress 函式包裹起來，以便能夠被翻譯成其他語言。這主要使用 ()、_e() 函式以及 esc_html() 等變體。
你需要確保在 style.css 中設定了正確的 Text Domain并在 functions.php 嗯，我想我可能需要去趟洗手间。 after_setup_theme 動作中呼叫 load_theme_textdomain()。
function my_first_theme_load_textdomain() {
load_theme_textdomain( 'my-first-theme', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_first_theme_load_textdomain' );之後，使用類似 echo __( '阅读更多', 'my-first-theme' ); 的方式來輸出所有字串。開發者可以使用 Poedit 等工具生成 .pot 翻譯模板檔案。
建立主題截圖與檢查清單
在將主題提交到目錄或交付給客戶之前，需要建立一個主題截圖。這是一個名為 screenshot.png 的圖片，尺寸通常為 1200×900 畫素，展示你的主題外觀。將其放在主題根目錄。
此外，執行一次主題檢查是個好習慣。你可以安裝“Theme Check”外掛，它會根據 WordPress 主題目錄的最新標準對你的主題進行一系列測試，確保其程式碼質量、安全性和相容性。
总结
從零開始開發一個 WordPress 主題是一個系統性的工程，涉及從基礎檔案結構、模板層級到功能函式和國際化等多個方面。透過建立 style.css、functions.php 以及一系列模板檔案，你可以逐步構建出網站的骨架。理解並正確使用 WordPress 迴圈、模板標籤和鉤子函式是關鍵。遵循最佳實踐，如安全地排隊指令碼、註冊選單和側邊欄，以及為所有文字新增翻譯支援，將使你的主題更加專業、健壯且易於維護。這個過程不僅讓你獲得了定製網站外觀的能力，更讓你深入理解了 WordPress 這一強大內容管理系統的執行機制。
常见问题解答（FAQ）
開發WordPress主題必須掌握哪些程式語言？
開發 WordPress 主題主要需要掌握 PHP、HTML、CSS 和基礎的 JavaScript。PHP 用於處理邏輯和呼叫 WordPress 函式；HTML 構建頁面結構；CSS 負責樣式設計；JavaScript 則用於實現互動效果。對 WordPress 自身的函式和鉤子系統有深入理解至關重要。
如何讓我的主題支援古騰堡區塊編輯器？
為了讓你的主題更好地支援古騰堡（Gutenberg）區塊編輯器，你可以在 functions.php 中新增相關主題支援功能。例如，使用 add_theme_support( 'wp-block-styles' ) 來載入核心區塊的預設樣式；使用 add_theme_support( 'align-wide' ) 來啟用寬對齊和全寬對齊選項。你還可以為文章和頁面新增編輯器樣式，確保後臺編輯器的預覽效果與前臺一致。
主题的 functions.php 文件和插件有什么区别？
functions.php 檔案是主題的一部分，其功能與主題深度繫結，當切換主題時，其中的程式碼通常不再生效。它的主要作用是為特定的主題新增功能、樣式和指令碼。而外掛則是獨立於主題的功能模組，旨在提供可以在不同主題下使用的通用或特定功能。一個簡單的原則是：如果功能與網站外觀表現緊密相關，放在主題裡；如果是可重用的獨立功能，則做成外掛更合適。
如何除錯我在主題開發中遇到的PHP錯誤？
首先，確保在你的 wp-config.php 檔案中啟用了除錯模式。將 define( ‘WP_DEBUG’, true ); 這一行設定為 true。這將在頁面上顯示所有 PHP 錯誤、警告和通知。為了更安全（不向公眾顯示錯誤），你可以同時設定 define( ‘WP_DEBUG_LOG’, true ); 將錯誤記錄到 /wp-content/debug.log 檔案中。此外，使用瀏覽器的開發者工具（控制檯和網路選項卡）來檢查 JavaScript 錯誤和資源載入問題。
下一步，该怎么做呢？
延伸阅读与实用知识
下方列出的内容与本文主题相关，适合继续深入阅读。建议先从与你当前问题最相关的文章开始阅读，然后逐步扩展到相关主题，这样效果通常会更好。