主頁/知識/WordPress/內容詳情

完全指南：點樣由零開始創建自訂WordPress主題

2分鐘閱讀
2026-03-21
2026-06-04
2,611
當你透過以下連結購物,我會獲得佣金,對你嚟講冇額外成本。.

準備工作同環境搭建

喺開始寫第一行代碼之前，你需要一個合適嘅開發環境。呢個包括一個本地伺服器、代碼編輯器同對WordPress核心文件結構嘅理解。推薦用XAMPP、MAMP或Local by Flywheel嚟快速搭建本地WordPress環境。咁樣可以令你喺安全、隔離嘅環境度進行開發同測試。

一個WordPress主題本質上係一個位於/wp-content/themes/目錄下嘅文件夾。呢個文件夾嘅名就係你嘅主題標識符。你需要創建一個新嘅文件夾，例如my-custom-theme。喺呢個文件夾入面，至少需要兩個核心文件：style.css同埋index.php。前者用嚟存放主題嘅樣式資訊同元數據，後者係默認嘅模板文件。

理解主題嘅核心信息文件

style.css文件唔單止用喺CSS樣式，佢頂部嘅註釋區塊更加係主題嘅「身份證」。你必須喺呢度聲明主題嘅名、作者、描述、版本等關鍵信息。呢啲信息會顯示喺WordPress後台嘅「外觀」->「主題」頁面度。

推薦閱讀 WordPress主題開發實戰：從零到一開始建立自訂主題嘅完整指南。

一個基本嘅style.css文件頭部示例如下：

UltaHost WordPress 主機
30日退款保證，無限頻寬同數據庫，免費DDoS防護，買3年優惠50%
UltaHost 標誌 瀏覽該頁面 
/*
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
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

其中，Text Domain用於國際化（多語言翻譯），務必同你嘅主題文件夾名稱保持一致。

建立基礎模板檔案結構

WordPress採用模板層級系統，決定為唔同類型嘅頁面載入邊個模板文件。理解同創建呢啲文件係構建主題嘅骨架。

創建必需嘅模板文件

除咗index.php，你應該逐步創建更具體嘅模板文件。例如，header.php用嚟擺放所有頁面嘅頭部（HTML head、網站導航等），footer.php用嚟擺放頁腳，sidebar.php用嚟側邊欄。透過WordPress內置嘅函數get_header()、get_footer()同埋get_sidebar()，你可以喺其他模板中輕鬆引入呢啲部分。

index.php係最後嘅後備模板。你應該創建更有針對性嘅模板嚟提升控制力，例如：
- front-page.php： 用喺靜態首頁。
- home.php： 顯示博客文章索引。
- single.php： 顯示單篇博客文章或者自訂文章類型。
- page.php: 顯示單個頁面。
- archive.php: 顯示分類、標籤、作者、日期等歸檔頁。
- 404.php: 顯示「搵唔到」頁面。
- search.php: 顯示搜尋結果。

推薦閱讀 WordPress主題開發終極指南：由零開始創建自訂WordPress網站主題。

理解循環機制

WordPress嘅核心係「循環」（The Loop）。呢段PHP代碼用嚟檢查有冇文章，有嘅話就循環輸出每篇文章嘅內容。最基本嘅循環結構如下，通常擺喺single.php或home.php入面：

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <div><?php the_content(); ?></div>
<?php endwhile; else : ?>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' ); ?></p>
<?php endif; ?>

其中，the_title()同埋the_content()等模板標籤用嚟輸出文章嘅具體數據。

整合WordPress核心功能

一個合格嘅主題必須正確整合WordPress嘅各種功能，包括菜單、小工具區域、文章特色圖像同主題支援功能。

hosting.com 共享主機
高效能,配備 AMD EPYC 處理器、NVMe SSD 儲存同 LiteSpeed,提供全天候專業內部支援,採用先進安全措施,包括 SSL、暴力破解、惡意軟件同 DDoS 防護,可節省高達 73%。
hosting.com 標誌 瀏覽該頁面

註冊導航菜單同小工具區域

你需要用register_nav_menus()函數喺主題嘅functions.php檔案入面註冊菜單位置。例如，註冊一個「主導航」菜單：

function my_custom_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-custom-theme' ),
        'footer'  => __( 'Footer Menu', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

跟住，喺header.php入面，用wp_nav_menu()函數嚟調用呢個菜單。

同樣，使用register_sidebar()函數可以創建小工具區域（側邊欄）。喺functions.php中註冊後，你就可以喺「外觀」->「小工具」後台進行拖拽管理，同埋喺模板度使用dynamic_sidebar()函數嚟顯示佢。

推薦閱讀 WordPress主題開發完整指南：從入門到精通構建自訂界面。

添加主題支援功能

透過add_theme_support()函數，你可以為你嘅主題啟用一系列核心功能。最常用嘅包括：
- post-thumbnails： 啟用文章特色圖像功能。
- title-tag： 等WordPress自動管理文檔標題（<title>標籤），係現代主題嘅最佳實踐。
- html5： 為主題嘅核心標記（例如評論表單、搜尋表單等）啟用HTML5支援。

啟用呢啲功能嘅代碼同樣應該擺喺functions.php檔案嘅after_setup_theme鉤子裏面。

InterServer 共享主機
共享主機:每月1TB,只需£2.50;首月只需£0.10,使用優惠碼 tryinterserver。461個雲端應用程式腳本,一鍵安裝。
InterServer 標誌 瀏覽該頁面

樣式、腳本同埋性能優化

現代主題需要正確處理CSS同JavaScript嘅加載，仲要考慮性能同響應式設計。

正確加入CSS同埋JavaScript

永遠唔好直接喺模板檔案入面硬連結CSS同JS檔案。應該用wp_enqueue_style()同埋wp_enqueue_script()函數，透過wp_enqueue_scripts掛鈎將佢哋加入隊列。咁樣可以確保正確嘅依賴管理同加載順序，避免衝突。

在functions.php嘅例子：

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 加载自定义JavaScript文件
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/script.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

注意，get_stylesheet_uri()返嘅係主題嘅style.css。對於JS文件，我哋會將true作為最後一個參數，表示喺頁腳加載，咁樣有助提升頁面加載效能。

實現響應式同基礎樣式

你嘅style.css應該包含一個響應式設計嘅基礎。採用移動優先（Mobile First）嘅策略，先為細屏幕編寫樣式，然後使用媒體查詢（Media Queries）逐步適配更大屏幕。同時，確保圖片等媒體元素具有max-width: 100%;屬性，防止其溢出容器。

摘要

從零創建自訂WordPress主題係一個綜合嘅學習過程，佢要求你同時理解PHP、HTML、CSS、JavaScript同埋WordPress嘅核心API。我哋從環境準備同核心文件style.css開始，逐步構建咗模板層級結構，理解咗「循環」機制。跟住，我哋整合咗導航選單、小工具、特色圖片等核心功能，並學識咗點樣以正確、高效嘅方式加入樣式表同腳本檔案。跟住呢啲步驟同最佳實踐，唔單止可以構建出功能完善嘅原創主題，仲可以確保佢嘅程式碼質量、可維護性同效能。記住，主題開發係一個持續迭代嘅過程，不斷測試並喺真實環境中獲取回饋至關重要。

常見問題

開發WordPress主題係咪一定要精通PHP？

你需要對PHP有基本嘅理解同運用能力，因為WordPress本身係由PHP構建嘅，主題模板檔案主要由PHP程式碼構成。你至少需要理解變數、函數、循環同條件語句，並知道點樣調用WordPress嘅模板標籤同函數。深入嘅主題開發會涉及更複雜嘅PHP面向物件編程。

可以喺現有主題嘅基礎上修改，嚟創建新主題嗎？

可以，呢種係一種常見嘅學習同起步方式，尤其係用官方嘅「Underscores」主題做起點。但係如果係發佈俾公眾用嘅主題，你一定要確保擁有原主題嘅修改同分發權限，並且遵守佢嘅許可證（通常係GPL）。更好嘅做法係理解咗佢嘅原理之後，從頭開始建立自己嘅結構同樣式。

主題嘅functions.php檔案同插件有咩分別？

functions.php檔案係主題嘅一部分，佢嘅功能同主題外觀同呈現緊密相關。外掛就係用嚟為網站增加獨立於主題嘅特定功能。一個簡單嘅規則係：如果功能係改變網站嘅外觀或者佈局，通常放喺主題裏面；如果係增加一種獨立嘅功能（例如聯絡表格、SEO優化），就更適合做外掛。咁樣即使換主題，核心功能都依然存在。

點樣令我嘅主題支援多語言翻譯？

你需要做好國際化（Internationalization， i18n）準備。即係話喺主題中所有面向用戶嘅字串都應該用WordPress嘅翻譯函數進行包裝，例如esc_html_e(‘Read More’， ‘my-custom-theme’);。你已經喺style.css中聲明咗Text Domain，呢度用嘅文字域必須同佢一致。之後，翻譯者可以用.po同.mo檔案嚟翻譯呢啲字串。

下一步應該點做?

如果你正喺建立或優化 WordPress 網站,我哋建議你繼續閱讀有關效能優化、插件設定同主題自訂嘅內容。

延伸閱讀及實用知識

以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。

標籤: