當你開始學習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框架來構建更復雜、更現代的主題。持續實踐，並參考官方開發者文件，是提升技能的最佳途徑。
常见问题解答（FAQ）
開發主題必須使用子主題嗎？
不一定。從頭開始建立獨立主題是完全可以的，也是學習核心原理的最佳方式。使用子主題通常是在需要對一個現有父主題（如流行框架主題）進行定製和修改時的最佳實踐，因為它可以確保父主題更新時你的自定義修改不會被覆蓋。對於全新的開發專案，從零構建獨立主題更為常見。
怎样让我的主题支持多语言？
讓主題支援多語言（國際化）主要涉及兩個步驟。首先，在style.css的頭部和functions.php中所有需要翻譯的字串都使用WordPress的翻譯函式包裹，例如__( ‘文本’, ‘my-first-theme’ )或者_e( ‘文本’, ‘my-first-theme’ )。其次，你需要使用像Poedit這樣的工具來建立.pot翻譯模板檔案，然後為每種語言生成對應的.po以及.mo檔案，並將其放在主題的/languages请看下方目录。
主題開發完成後如何釋出？
在釋出之前，務必使用“Theme Check”外掛對你的主題進行嚴格測試，以確保它符合WordPress主題目錄的所有編碼標準和安全要求。清理所有除錯程式碼和註釋。然後，你可以選擇將主題提交到官方的WordPress.org主題目錄（需要稽核），或者將其打包成ZIP檔案，直接提供給客戶或在自己的網站上分發。如果自行分發，請確保提供清晰的安裝說明和文件。
為什麼我的自定義樣式在後臺更新後消失了？
這很可能是因為你直接修改了正在使用的父主題的檔案。當該父主題透過WordPress後臺更新時，所有核心檔案都會被新版本覆蓋，導致你的修改丟失。這就是為什麼對於任何定製化開發，強烈推薦使用子主題。子主題的樣式和函式會獨立於父主題載入，即使父主題更新，你的子主題檔案也能完好無損地保留所有自定義內容。
下一步，该怎么做呢？
延伸阅读与实用知识
下方列出的内容与本文主题相关，适合继续深入阅读。建议先从与你当前问题最相关的文章开始阅读，然后逐步扩展到相关主题，这样效果通常会更好。