WordPress主題開發基礎：環境與核心概念
在開始編碼之前，你需要搭建一個合適的開發環境和理解WordPress主題的基本結構。本地開發環境是標準選擇，你可以使用XAMPP、MAMP、Local by Flywheel或Docker等工具。這能讓你在不影響線上網站的情況下進行開發和測試。
一个WordPress主题本质上是一个位于特定位置的文件夹，里面包含了用于设计和管理WordPress网站的各种文件和资源。这些文件和资源包括模板文件、样式表、脚本文件、图像、字体等。/wp-content/themes/目錄下的資料夾。這個資料夾內必須包含至少兩個核心檔案：style.css以及index.php其中,style.css不僅是樣式表，它還承擔著主題的“身份證”功能，其檔案頭註釋定義了主題的名稱、作者、描述等元資訊。
理解WordPress的模板層級是開發的關鍵。WordPress會根據當前訪問的頁面型別（如首頁、文章頁、頁面、分類歸檔頁等）自動選擇對應的模板檔案來渲染內容。例如，當用戶訪問一篇單獨的文章時，WordPress會按順序尋找single-post.php、single.php最后是index.php。這套機制讓你可以為網站的不同部分設計獨特的佈局。
推荐阅读 WordPress主題開發終極指南：從入門到實戰的系統教程。
主題的基石檔案
functions.php檔案是你的主題“控制中心”。它不是一個必須存在的檔案，但幾乎每個主題都離不開它。你可以在其中新增自定義功能、註冊選單、側邊欄（小工具區域）、引入指令碼和樣式表，以及呼叫各種add_action以及add_filter鉤子來擴充套件或修改WordPress的核心行為。這個檔案在主題啟用時自動載入。
另一個至關重要的檔案是style.css。其檔案頭註釋是主題的宣告區域，格式如下：
/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 一个用于学习的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/其中的Text Domain用於主題國際化，是後續呼叫翻譯函式__()或者_e()時使用的識別符號。
構建主題的基本結構與模板
一個典型的主題檔案結構從最基礎的模板開始搭建。首先是header.php，它包含HTML文件的頭部、區域以及網站頂部的公共區域，如Logo和主導航。使用wp_head()函式輸出WordPress核心和外掛所需的指令碼與樣式是此檔案的關鍵。
對應的footer.php則包含網站的底部公共區域，並在末尾呼叫wp_footer()函式。網站的主體內容被包裹在這“頭”和“尾”之間。
推荐阅读 WordPress主題開發：從零構建自定義主題的完整指南。
組裝頁面的核心模板
index.php是你的主題最基礎的模板，也是當其他更具體的模板不存在時的最終備選。它的核心任務是將各個部分組裝起來。一個經典的index.php結構如下：
<?php get_header(); ?>
<main id="primary" 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(); ?>這個模板使用了WordPress核心的迴圈（The Loop）來遍歷並輸出文章列表。為了保持程式碼的模組化和可維護性，我們使用get_template_part()函式來呼叫獨立的內容模板檔案。
建立可複用的內容模板
通常，我們會在主題目錄下建立一個template-parts資料夾，並在其中存放像content.php這樣的檔案。這個檔案專注於如何呈現一篇文章或頁面的摘要或全文：
<article id="post-<?php the_ID(); ?>" no numeric noise key 1003>
<header class="entry-header">
<h2 class="entry-title">
<a href="/zh-tw/</?php the_permalink(); ?>" rel="bookmark"></a>
</h2>
</header>
<div class="entry-content">
</div>
</article>透過這種方式，你可以輕鬆地為不同的文章型別（如post、page）建立不同的內容模板（如content-post.php、content-page.php），系統會自動匹配。
為你的主題新增核心功能
功能檔案是你的主題從靜態模板轉變為動態應用的引擎。在functions.php中，你需要系統地掛載各種功能。
初始化主題的核心支援
第一步是使用after_setup_theme鉤子來宣告主題支援的功能。這告訴WordPress你的主題能夠使用哪些特性：
推荐阅读 深入解析WordPress主题开发：从入门到精通的完整实践指南。
add_action( 'after_setup_theme', 'my_theme_setup' );
function my_theme_setup() {
// 让主题支持自动生成<title>标签
add_theme_support( 'title-tag' );
// 支持文章特色图像
add_theme_support( 'post-thumbnails' );
// 支持HTML5的语义化标记
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 支持自定义Logo
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
) );
// 注册一个导航菜单位置
register_nav_menus( array(
'menu-1' => esc_html__( '主导航', 'my-custom-theme' ),
) );
}管理指令碼與樣式表
正確地將CSS和JavaScript檔案加入佇列是專業開發的要求。你應該使用wp_enqueue_scripts鉤子來完成這項工作，而不是直接在模板中寫標籤：
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
function my_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );
// 引入自定义的JavaScript文件
wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true );
// 如果需要使用jQuery（通常由WordPress核心提供），可以声明依赖
wp_enqueue_script( 'my-theme-custom', get_template_directory_uri() . '/js/custom.js', array('jquery'), wp_get_theme()->get('Version'), true );
}註冊小工具區域
側邊欄或頁尾小工具區域也需要在functions.php中註冊。使用widgets_init鉤子：
add_action( 'widgets_init', 'my_theme_widgets_init' );
function my_theme_widgets_init() {
register_sidebar( array(
'name' => esc_html__( '侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( '在此添加小工具。', 'my-custom-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' )或者get_sidebar()函式來呼叫它了。
進階開發與自定義功能
當基礎主題搭建完畢後，你可以透過更高階的技術來提升其專業性和靈活性。
创建自定义页面模板
頁面模板允許你為特定的頁面賦予獨一無二的佈局。建立一個檔案，例如page-fullwidth.php，在檔案頭部新增如下模板名稱註釋：
<?php
/**
* Template Name: 全宽页面
* Description: 一个没有侧边栏的全宽页面模板。
*/
get_header(); ?>
<main class="full-width">
<article id="post-<?php the_ID(); ?>" no numeric noise key 1004>
<h1></h1>
<div class="entry-content">
</div>
</article>
</main>建立或編輯頁面時，在“頁面屬性”中就可以選擇這個“全寬頁面”模板了。
實現主題定製器支援
WordPress定製器（Customizer）為使用者提供了實時預覽的配置介面。你可以透過customize_register鉤子輕鬆地新增設定選項，例如一個頁尾版權文字：
add_action( 'customize_register', 'my_theme_customize_register' );
function my_theme_customize_register( $wp_customize ) {
// 添加一个设置项
$wp_customize->add_setting( 'footer_copyright_text', array(
'default' => '© 2026 我的网站. 保留所有权利。',
'sanitize_callback' => 'sanitize_text_field',
'transport' => 'postMessage', // 支持实时预览
) );
// 为设置项添加一个控件（输入框）
$wp_customize->add_control( 'footer_copyright_text', array(
'label' => __( '页脚版权文本', 'my-custom-theme' ),
'section' => 'title_tagline', // 放到“站点身份”区域
'type' => 'text',
) );
}然后，他又拿起那把刀，将她的喉咙割开了。footer.php在中文中，我们可以用“使用”来表达“use”的意思。比如：“我使用了这个工具。”或者“他使用了那个方法。”get_theme_mod( 'footer_copyright_text' )来输出这个值。
引入現代前端工作流
對於複雜的主題，手動管理CSS和JS檔案會變得低效。你可以考慮在專案中引入Node.js和構建工具，如使用Webpack或Vite來打包資源、編譯Sass/Less、自動新增CSS瀏覽器字首、壓縮程式碼等。這通常涉及在主題根目錄建立package.json和構建配置檔案，並將最終生成的檔案輸出到主題的特定目錄（如/assets/dist/）中，然後在functions.php中引入這些構建後的檔案。
总结
WordPress主題開發是一個從理解核心模板層級和檔案結構開始，逐步構建模板檔案、整合功能、並最終透過高階定製和工具鏈最佳化來實現專業化的過程。關鍵在於遵循WordPress的編碼標準和最佳實踐，例如正確使用鉤子函式、將指令碼樣式加入佇列、以及利用模板部件保持程式碼整潔。從搭建一個簡單的index.php以及style.css開始，逐步新增header.php、footer.php请将下文翻译成中文，并详细说明翻译过程：
在functions.php中啟用核心功能，再到建立自定義模板和定製器選項，每一步都讓你的主題變得更加強大和易用。掌握這些技能後，你將能夠創建出滿足各種需求的、高質量的WordPress主題。
常见问题解答（FAQ）
开发WordPress主题必须掌握PHP吗？
是的，PHP是WordPress主題開發的基石語言。你至少需要掌握基礎的PHP語法、理解如何與WordPress的核心函式（如the_post()、the_title()）和全域性變數（如$post）互動，以及如何使用動作鉤子和過濾器鉤子。HTML和CSS是構建外觀所必需的，而JavaScript則用於互動功能。
為什麼我的主題更改在重新整理後看不到？
這通常是由於瀏覽器快取或WordPress物件快取導致的。首先，嘗試在瀏覽器中按Ctrl+F5（或Cmd+Shift+R）進行硬重新整理。其次，如果你在functions.php中引入了版本控制（如wp_get_theme()->get('Version')），請確保每次修改後都更新style.css檔案頭中的版本號。此外，檢查你的程式碼是否有語法錯誤導致functions.php檔案執行失敗。
怎样让我的主题支持多语言？
你需要做好兩件事：一是“國際化”，二是“本地化”。首先，在主題中所有需要翻譯的字串處，使用WordPress的翻譯函式，如esc_html__(‘文本’, ‘my-text-domain’)或者_e(‘文本’, ‘my-text-domain’)，並確保style.css请将以下中文简体句子翻译成中文简体，并详细解释其含义：
\n中定義的Text Domain與這裡的文字域一致。然後，使用Poedit這類工具掃描你的主題，生成.pot翻譯模板檔案，譯者可以據此建立對應語言的.po和编译后的.mo檔案，放在主題的/languages/目錄下即可生效。
主题和插件在功能上应该如何划分？
一個簡單的原則是：主題控制網站的外觀和展示，外掛控制網站的功能和行為。具體來說，與視覺呈現直接相關的（如佈局、顏色、字型、模板）應放在主題中。而可以獨立於主題存在的功能（如聯絡表單、SEO最佳化、電子商務、效能快取）則應做成外掛。這樣，使用者更換主題時，核心功能得以保留，提高了靈活性和程式碼的可複用性。
下一步，该怎么做呢？
延伸阅读与实用知识
下方列出的内容与本文主题相关，适合继续深入阅读。建议先从与你当前问题最相关的文章开始阅读，然后逐步扩展到相关主题，这样效果通常会更好。