理解 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">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1001>
<h1>你好呀，WordPress主題開發！有咩可以幫到你？想問主題製作、功能修改，定係有代碼上嘅疑問呢？</h1>
<?php wp_footer(); ?>
</body>
</html>呢個時候，登入你本機 WordPress 後台，去「外觀」 -> 「主題」，你應該會見到你個主題已經出現。啟用咗佢，再訪問網站首頁，你就會睇到上面段 code 輸出嘅簡單資訊。咁就代表你嘅自訂主題已經初步行得通喇。
構建主題嘅核心模板檔案
有個可以行到嘅主題框架之後，下一步係將佢模組化，同埋用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">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1004>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
<h1 class="site-title"><a href="/yue/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p class="site-description"><?php bloginfo( 'description' ); ?></p>
</header>跟住，創建 footer.php 檔案，包含頁腳內容同結束標籤。
<footer id="colophon" class="site-footer">
<p>© . All rights reserved.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>然後，修改 index.php，用 WordPress 嘅模板引入函數嚟調用佢哋。
<?php get_header(); ?>
<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>建立文章同頁面模板
為咗實現文章同頁面嘅唔同佈局，可以創建 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 嘅運作機制，為更高級嘅主題同插件開發奠定穩固基礎。
常見問題
創建 WordPress 主題必須掌握邊啲程式語言？
要開發一個功能齊全嘅 WordPress 主題，你需要掌握幾項核心技術。PHP 係最關鍵嘅，因為 WordPress 本身係用 PHP 編寫嘅，所有模板文件同邏輯處理都離唔開佢。HTML 用於構建頁面結構，CSS 用於控制樣式同佈局，確保主題美觀同響應式設計。JavaScript（通常係 jQuery）就用於添加前端互動效果，例如菜單切換、輪播圖等等。
自訂主題同使用現成主題或者頁面構建器有咩主要分別？
自訂主題能夠提供最大程度嘅靈活性同獨特性，你可以完全控制網站嘅每一行代碼、每一個功能同性能表現，可以打造出完全符合特定品牌同業務需求嘅網站，而且代碼通常更精簡高效。而使用現成主題或者頁面構建器雖然上手快，但可能伴隨大量冗餘代碼、有限嘅定制選項、潛在嘅插件依賴，同埋較高嘅同質化風險。自訂主題更適合需要獨特品牌形象、特定功能或者高性能要求嘅項目。
點樣令我嘅自訂主題符合 WordPress 官方嘅標準？
為咗令你嘅主題符合 WordPress 核心標準，同埋有機會被收錄到官方目錄，你需要嚴格遵守《WordPress 主題開發手冊》。呢個包括：使用正確嘅模板層級結構、對所有動態數據輸出進行國際化（i18n）轉義同本地化處理、安全地處理所有用戶輸入同輸出、確保主題代碼跟從 WordPress 編碼標準、提供無障礙訪問（A11y）支援，同埋確保主題喺核心功能開啟同關閉時都能正常運作（主題單元測試）。
開發主題嗰陣，functions.php 檔案嘅主要作用係咩？
functions.php 呢個檔案係你主題嘅「功能工具箱」。佢唔係用嚟生成頁面上嘅直接輸出，而係用嚟定義主題嘅功能同行為。其主要作用包括：透過鉤子（Hooks）添加或修改 WordPress 核心功能、註冊導航菜單位置同側邊欄（小工具區）、為主題添加特色功能支援（例如文章縮略圖、自訂 Logo）、同埋安全地排入主題嘅樣式表同 JavaScript 腳本檔案。佢係連接你主題外觀同 WordPress 後台功能嘅關鍵橋樑。
下一步應該點做?
延伸閱讀及實用知識
以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。