WordPress主题开发基础及环境搭建
要開始WordPress主題開發，首先需要理解其核心概念。一個WordPress主題本質上是一組檔案，包括樣式表、模板檔案、影象和JavaScript檔案，它們共同決定了網站的外觀和功能。開發一個主題，意味著你正在建立一套完整的規則，告訴WordPress如何將資料庫中的內容呈現給訪客。
開發前的環境準備至關重要。你需要一個本地開發環境，這可以透過安裝XAMPP、MAMP、Local by Flywheel或Docker等工具輕鬆實現。本地環境允許你在不干擾線上網站的情況下進行開發、測試和除錯。此外，一個高效的程式碼編輯器是必備工具，例如Visual Studio Code、PhpStorm或Sublime Text，它們能提供語法高亮、程式碼提示和除錯功能，極大提升開發效率。
接下來，你需要了解主題的目錄結構。每個主題都位於/wp-content/themes/目錄下，並以一個獨立的資料夾存在。最基本的主題只需要兩個檔案：style.css以及index.php然而，研究人员也指出，在许多情况下，老年人的睡眠时间比年轻人要少。style.css的頭部註釋中，你需要提供主題的元資訊。
推荐阅读 深入解析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
*/這個style.css檔案不僅是樣式表，更是主題的“身份證”，WordPress透過讀取這些註釋來在後臺識別並顯示你的主題。
核心模板檔案與主題層次結構
WordPress採用一套名為“模板層次結構”的智慧系統來決定對於特定的頁面請求，應該使用哪個模板檔案來呈現內容。理解這個層次結構是主題開發的關鍵。
最核心的模板檔案是index.php，它作為所有頁面的終極備用模板。當WordPress找不到更具體的模板時，就會使用它。首頁通常由front-page.php或者home.php控制。文章單頁首選single.php，而針對特定文章型別，例如“產品”，WordPress會尋找single-product.php。頁面使用page.php，如果頁面有自定義模板，則會使用page-{slug}.php或者page-{id}.php。文章歸檔頁（如分類、標籤、作者、日期歸檔）則對應archive.php及其更具體的變體，如category.php、tag.php等等。
主題頭部與底部模板
為了遵循DRY（不要重複自己）原則，WordPress主題使用get_header()、get_footer()以及get_sidebar()等函式來引入公共部分。這意味著你需要建立header.php以及footer.php文件。
header.php檔案通常包含HTML文件頭、meta標籤、指向樣式表和指令碼的連結，以及網站的頂部導航區域。至關重要的是，它必須包含wp_head()函式呼叫，該函式允許WordPress核心、外掛和主題本身在<head>部分注入必要的程式碼。
推荐阅读 WordPress主題開發入門指南：從零開始構建你的網站。
footer.php檔案則包含網站的底部資訊、指令碼引用等，並以wp_footer()函式結束，這與wp_head()的作用類似，用於在頁面底部注入程式碼。
在模板檔案中，你可以這樣引入它們：
<?php get_header(); ?>
<!-- 主内容区 -->
<?php get_footer(); ?>主題功能與WordPress迴圈
一個主題的功能不僅限於外觀。透過functions.php檔案，你可以為你的主題新增功能、註冊特性、整合外掛。這個檔案在主題啟用時自動載入，相當於你的主題專屬外掛。
理解WordPress迴圈
WordPress迴圈是主題開發的核心邏輯。它是一段PHP程式碼，用於檢查當前頁面是否有文章（或帖子）需要顯示，如果有，則迴圈遍歷並輸出每一篇。基本的迴圈結構如下：
<!-- 在这里输出文章内容 -->
<h2></h2>
<div></div>
<p>没有找到任何文章。</p>在迴圈中，你可以使用一系列模板標籤來輸出文章資訊，例如the_title()輸出標題，the_content()輸出完整內容，the_excerpt()輸出摘要，the_permalink()獲取文章連結，the_post_thumbnail()輸出特色影象。
註冊選單與側邊欄
現代主題通常支援使用者通過後臺自定義選單和掛件。這需要在functions.php中進行註冊。
推荐阅读 WordPress主題開發入門指南：從零開始建立你的第一個自定義主題。
使用
（注：此处"使用"指的是某种产品或服务的使用情况）register_nav_menus()函式可以註冊一個或多個選單位置：
function mytheme_register_menus() {
register_nav_menus(
array(
'primary-menu' => __( '主导航菜单', 'my-first-theme' ),
'footer-menu' => __( '页脚菜单', 'my-first-theme' ),
)
);
}
add_action( 'init', 'mytheme_register_menus' );然後，在模板檔案（如header.php请将下文翻译成中文，并详细说明翻译过程：
（在此处插入用户提供的英文文本）wp_nav_menu()来显示菜单。
同樣，側邊欄（掛件區域）透過register_sidebar()函式註冊：
function mytheme_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', 'mytheme_widgets_init' );模板中使用了以下内容：dynamic_sidebar( 'sidebar-1' )來呼叫這個區域。
樣式、指令碼與主題定製器整合
為了讓主題更加專業和使用者友好，需要正確處理樣式和指令碼的載入，並儘可能整合WordPress自帶的定製器功能。
排隊載入樣式與指令碼
正確的方式是使用wp_enqueue_style()以及wp_enqueue_script()函式，將它們新增到functions.php的鉤子中。這確保了依賴關係正確，並避免重複載入。
function mytheme_enqueue_assets() {
// 主题主样式表
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
// 谷歌字体
wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
// 主JavaScript文件
wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );整合主題定製器
WordPress定製器允許使用者在實時預覽下調整主題設定。透過$wp_customize物件，你可以新增設定和控制元件。
例如，新增一個站點標題顏色的選項：
function mytheme_customize_register( $wp_customize ) {
// 添加一个设置（存储在数据库中）
$wp_customize->add_setting( 'header_color', array(
'default' => '#333333',
'sanitize_callback' => 'sanitize_hex_color',
) );
// 添加一个颜色选择器控件
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
'label' => __( '页眉颜色', 'my-first-theme' ),
'section' => 'colors',
'settings' => 'header_color',
) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );然後，在你的style.css或動態輸出的樣式中使用這個值：
function mytheme_customizer_css() {
?>
<style type="text/css">
.site-header {
background-color: <?php echo esc_attr( get_theme_mod( 'header_color', '#333333' ) ); ?>;
}
</style>
<?php
}
add_action( 'wp_head', 'mytheme_customizer_css' );总结
WordPress主題開發是一項將設計與程式設計相結合的有趣技能。它始於對核心檔案（如style.css以及index.php）的理解，並深入到模板層次結構、WordPress迴圈和functions.php的強大功能中。透過正確地組織模板檔案、使用模板標籤、註冊選單和掛件區域，以及採用排隊方式載入資源，你可以構建出結構清晰、效能良好的主題。更進一步，整合主題定製器能為終端使用者提供直觀的定製體驗。掌握這些基礎知識後，你將有能力將自己的設計轉化為功能完善的WordPress主題，併為學習更高階的主題框架（如Underscores或Genesis）以及Block主題開發奠定堅實基礎。
常见问题解答（FAQ）
開發WordPress主題需要精通PHP嗎？
雖然不需要達到專家級別，但紮實的PHP基礎是必須的。你需要理解PHP語法、變數、函式、迴圈和條件語句，因為WordPress核心和主題模板檔案都是用PHP編寫的。同時，對HTML、CSS和基本的JavaScript有很好的掌握也同樣重要。
如何讓我的主題符合WordPress官方的標準？
為了讓你的主題符合標準並可能被WordPress官方主題目錄收錄，你需要遵循《WordPress主題開發手冊》和《主題審查要求》。這包括使用安全的編碼實踐、進行國際化準備（使用文字域和翻譯函式）、確保響應式設計、不將關鍵功能硬編碼在主題中（推薦使用子主題或外掛），以及透過官方提供的Theme Check外掛進行測試。
為什麼我的主題更改在重新整理後看不到？
這通常是由瀏覽器快取或WordPress的快取機制導致的。首先，嘗試同時按下Ctrl + F5（Windows/Linux）或Cmd + Shift + R（Mac）進行硬重新整理，以清除瀏覽器快取。如果問題依舊，請確保你在本地開發環境下，並檢查是否安裝了快取外掛，嘗試臨時禁用它們。最後，確認你修改的是否是正確的模板檔案，並且檔案已成功儲存。
子主題和父主題有什麼區別，何時使用
父主題是一個功能完整、獨立的主題。子主題則依賴於父主題，它只包含少數檔案（至少需要一個style.css），用於覆蓋或擴充套件父主題的樣式和功能。當你想對一個現有主題進行自定義修改，但又希望在父主題更新時不丟失這些修改時，就應該建立子主題。這是升級和定製主題的最佳實踐。
如何為我的主題新增對古騰堡編輯器的完整支援？
為了完善支援古騰堡編輯器，你需要在functions.php请将下文翻译成中文，并详细说明翻译过程：add_theme_support()函式宣告一系列特性。例如，新增align-wide以及align-full支援、自定義顏色調色盤、漸變背景、字型大小控制等。同時，為文章和頁面編輯器建立獨立的樣式表，並使用add_editor_style()將其加入。對於更深入的自定義，你可能需要學習建立自定義區塊。
下一步，该怎么做呢？
延伸阅读与实用知识
下方列出的内容与本文主题相关，适合继续深入阅读。建议先从与你当前问题最相关的文章开始阅读，然后逐步扩展到相关主题，这样效果通常会更好。