理解 WordPress 主題的基礎架構
在開始編碼之前，理解一個 WordPress 主題的基本構成是至關重要的。一個主題不僅僅是一組樣式表，它是由一系列遵循特定標準的模板文件組成的有機整體。這些文件協同工作，告訴 WordPress 如何呈現你網站的內容。主題目錄通常位於 /wp-content/themes/，你創建的每個主題都應該擁有一個獨立的文件夾。
最基本的 WordPress 主題只需要兩個文件：style.css 以及 index.php其中,style.css 不僅負責樣式，其文件頭部註釋塊更是主題的“身份證”，用於向 WordPress 聲明主題的名稱、作者、描述等信息。而 index.php 是默認的主模板文件，當沒有更具體的模板匹配時，WordPress 會使用它來渲染頁面。
然而，一個功能完善的自定義主題會包含更多模板文件，每個文件對應特定的頁面或功能。例如，header.php 定義網站頭部區域，footer.php 定義底部區域，single.php 用於顯示單篇文章，page.php 用於顯示獨立頁面，functions.php 則用於添加主題特有的功能和註冊各種組件。
推荐阅读 WordPress主題開發入門：從零開始構建你的第一個自定義主題。
WordPress 採用模板層級系統來決定爲特定請求使用哪個模板文件。這意味着你不需要爲網站的每一個頁面都單獨寫代碼。通過創建不同層級的模板文件，你可以精確控制不同類型內容（如文章、頁面、分類目錄、作者頁面等）的顯示方式。掌握這個層級關係，是高效創建主題的關鍵。
搭建自定義主題的開發環境
在動手創建文件之前，建立一個本地開發環境是專業工作流程的第一步。這允許你在不影響線上網站的情況下進行開發和測試。你可以使用如 Local by Flywheel、XAMPP、MAMP 或 Docker 等工具快速在本地計算機上配置一個包含 Apache/Nginx、PHP 和 MySQL 的 WordPress 環境。
一旦本地環境就緒，你需要在 WordPress 安裝目錄的 wp-content/themes 文件夾下創建一個新的文件夾。這個文件夾的名稱就是你的主題的標識符，建議使用小寫字母、數字和連字符，並且儘量不與現有主題重名，例如 my-custom-theme。
接下來，創建第一個必需的文件：style.css。請務必在其頂部添加格式正確的主題信息註釋塊。
/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个从头开始创建的自定义 WordPress 主题。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/然後，創建同樣必需的 index.php 文件。最初，它可以非常簡單，甚至只包含一句 HTML。
推荐阅读 WordPress主題開發入門：從零開始構建自定義主題。
<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1001>
<h1>Hello, WordPress Theme Development!</h1>
</body>
</html>此時，登錄你的本地 WordPress 後臺，進入“外觀” -> “主題”，你應該能看到你的主題已經出現。激活它，訪問網站首頁，你將看到上面代碼輸出的簡單信息。這標誌着你的自定義主題已經初步運行。
構建主題的核心模板文件
擁有一個可運行的主題框架後，下一步是將其模塊化，並利用 WordPress 的核心功能來處理動態內容。模塊化的關鍵在於將可複用的部分拆分成獨立的模板文件。
創建頭部和底部模板
首先，我們將 index.php 中的頭部和底部代碼分離出去。創建一個新文件命名爲 header.php，將部分和的起始部分移動進去。
<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
</head>
<body no numeric noise key 1004>
<header id="masthead" class="site-header">
<h1 class="site-title"><a href="/zh-hant/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p class="site-description"></p>
</header>接着，創建 footer.php 文件，包含頁腳內容和結束標籤。
<footer id="colophon" class="site-footer">
<p>© . All rights reserved.</p>
</footer>
</body>
</html>然後，修改 index.php，使用 WordPress 的模板引入函數來調用它們。
<main id="primary" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 文章内容输出将在这里
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
_e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' );
endif;
?>
</main>
<?php get_sidebar(); // 如果存在侧边栏模板 ?>
<?php get_footer(); ?>創建文章和頁面模板
爲了實現文章和頁面的不同佈局，可以創建 single.php 來處理單篇文章，以及 page.php 來處理獨立頁面。它們的基本結構類似，但可以利用 WordPress 的條件標籤 is_single() 以及 is_page() 在必要時進行區分。
創建一個 functions.php 文件至關重要，它用於增強主題功能。在此文件中，你可以註冊菜單、側邊欄（小工具區域）、添加主題支持的功能（如文章縮略圖、定製標題標籤）以及排入樣式表和腳本文件。
推荐阅读 WordPress主題終極指南：從選擇、定製到開發的完整方案。
<?php
function my_custom_theme_setup() {
// 让 WordPress 负责管理文档标题标签
add_theme_support( 'title-tag' );
// 启用文章和页面特色图像
add_theme_support( 'post-thumbnails' );
// 注册一个主菜单
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );
function my_custom_theme_scripts() {
// 排入主样式表
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
// 排入自定义脚本
wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );
?>應用樣式與添加交互功能
即使是一個以功能爲主的主題，也需要基本的樣式來保證可用性和可讀性。你可以在 style.css 主樣式表的基礎上進行擴展，創建響應式佈局和美觀的界面。
實現基本的響應式設計
從設置一些 CSS 重置和基礎樣式開始，然後爲移動設備優先的響應式設計制定媒體查詢。
/* style.css */
/* 基础重置与样式 */
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 移动端响应式 */
.site-header, .site-footer {
padding: 1rem 0;
text-align: center;
}
/* 平板及以上设备 */
@media (min-width: 768px) {
.site-main {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
}
}創建導航菜單腳本
爲了讓移動端菜單可交互，你可以創建一個簡易的 JavaScript 文件。首先，在 header.php 中爲菜單按鈕添加 HTML 結構，然後在 /js/navigation.js 中添加控制邏輯。
// /js/navigation.js
document.addEventListener('DOMContentLoaded', function() {
const menuButton = document.querySelector('.menu-toggle');
const primaryMenu = document.querySelector('#primary-menu');
if (menuButton) {
menuButton.addEventListener('click', function() {
primaryMenu.classList.toggle('toggled');
this.setAttribute('aria-expanded',
this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'
);
});
}
});最後，你還可以利用 WordPress 的定製器 API 或創建主題選項頁面，爲用戶提供一些簡單的自定義選項，例如站點顏色或 logo 上傳。這通常通過在 functions.php 使用中文（简体） add_theme_support 和相關的 API 函數來實現。
总结
從零開始創建自定義 WordPress 主題是一個系統性的學習過程，它要求你同時掌握 PHP、HTML、CSS、JavaScript 的基礎知識以及對 WordPress 核心架構和 API 的理解。整個過程從搭建基礎的 style.css 以及 index.php 開始，通過模塊化分離出頭部、底部、側邊欄等模板文件，利用模板層級系統精準控制內容顯示，並在 functions.php 中集成主題功能和註冊各類組件。最終，通過響應式 CSS 和必要的 JavaScript 腳本，使主題變得美觀且交互友好。遵循這一路徑，你不僅能打造出獨一無二的網站外觀，更能深入理解 WordPress 的運作機制，爲更高級的主題和插件開發奠定堅實基礎。
常见问题解答（FAQ）
創建 WordPress 主題必須掌握哪些編程語言？
創建一個功能完整的 WordPress 主題，你需要掌握幾項核心技術。PHP 是最核心的，因爲 WordPress 本身是用 PHP 編寫的，所有模板文件和邏輯處理都離不開它。HTML 用於構建頁面結構，CSS 用於控制樣式和佈局，確保主題的美觀和響應式設計。JavaScript（通常是 jQuery）則用於添加前端交互效果，如菜單切換、輪播圖等。
自定義主題與使用現有主題或頁面構建器有何主要區別？
自定義主題能提供最大程度的靈活性和獨特性，你可以完全控制網站的每一行代碼、每一個功能和性能表現，可以打造出完全符合特定品牌和業務需求的網站，並且代碼通常更精簡高效。而使用現有主題或頁面構建器雖然上手快，但可能伴隨大量冗餘代碼、有限的定製選項、潛在的插件依賴，以及較高的同質化風險。自定義主題更適合需要獨特品牌形象、特定功能或高性能要求的項目。
如何讓我的自定義主題符合 WordPress 官方的標準？
爲了讓你的主題符合 WordPress 核心標準並有可能被收錄到官方目錄，你需要嚴格遵守《WordPress 主題開發手冊》。這包括：使用正確的模板層級結構、對所有動態數據輸出進行國際化（i18n）轉義和本地化處理、安全地處理所有用戶輸入和輸出、確保主題代碼遵循 WordPress 編碼標準、提供無障礙訪問（A11y）支持，以及確保主題在覈心功能開啓和關閉時都能正常工作（主題單元測試）。
開發主題時，functions.php 文件的主要作用是什麼？
functions.php 文件是你的主題的“功能工具箱”。它不用於生成頁面上的直接輸出，而是用於定義主題的功能和行爲。其主要作用包括：通過鉤子（Hooks）添加或修改 WordPress 核心功能、註冊導航菜單位置和側邊欄（小工具區）、爲主題添加特色功能支持（如文章縮略圖、自定義Logo）、以及安全地排入主題的樣式表和 JavaScript 腳本文件。它是連接你的主題外觀和 WordPress 後臺功能的關鍵橋樑。
接下来，我该怎么做呢？
延伸阅读与实用知识
以下内容与本文主题相关，适合继续深入阅读。建议先从与你当前问题最相关的文章开始阅读，之后再逐步扩展到相关主题，这样通常效果会更好。