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

WordPress主題開發入門指南：由零開始創建你嘅第一個主題

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

理解WordPress主題嘅基本結構

喺開始寫程式碼之前，理解WordPress主題嘅構成係好重要嘅。一個最基本嘅主題至少需要兩個檔案：一個係用嚟定義主題資訊嘅樣式表，另一個係用嚟顯示網站內容嘅PHP模板檔案。呢啲檔案一齊構成咗主題嘅骨架，並且跟住特定嘅目錄結構同命名規範。

核心檔案係style.css，佢唔單止包含CSS樣式，佢檔案頭部嘅註解區塊更加係主題嘅「身份證」。呢個區塊向WordPress系統聲明咗主題嘅名稱、作者、描述、版本等元資訊。冇正確格式化嘅style.css，WordPress 將無法識別同啟動你嘅主題。

另一個必不可少嘅檔案係index.php。呢個係主題嘅主要模板檔案，當 WordPress 搵唔到更特定嘅模板檔案（例如single.php或page.php）嗰陣，就會預設用佢嚟渲染頁面。佢係所有模板檔案嘅後備選擇。

推薦閱讀 揭秘WordPress主題開發：從零開始構建客製化網站嘅關鍵技術。

主題資訊聲明文件

主題嘅樣式表style.css頭部必須包含特定嘅註釋。以下係一個最基礎嘅示例：

UltaHost WordPress 主機
30日退款保證，無限頻寬同數據庫，免費DDoS防護，買3年優惠50%
UltaHost 標誌 瀏覽該頁面 
/*
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用於國際化，係後續進行翻譯時使用嘅標識符。呢個檔案通常亦包含你所有嘅CSS樣式代碼。

核心模板檔案

index.php文件係主題嘅入口。一個最簡單嘅index.php可以只包含調用WordPress核心函數嘅基本循環，用嚟攞同顯示文章列表。

<!DOCTYPE html>
<html no numeric noise key 1005>
<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 1002>
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title( &#039;<h1>', '</h1>' );
            the_content();
        endwhile;
    endif;
    ?&gt;
</body>
</html>

呢段代碼入面，wp_head()同埋wp_footer()係兩個關鍵嘅掛鉤，佢哋容許WordPress核心、插件同其他腳本喺頁面嘅同末尾插入必要嘅代碼，好似樣式、腳本同元標籤咁。

搭建本地開發環境

喺將主題部署到線上伺服器之前，建立一個本地開發環境係最高效同安全嘅方式。本地環境容許你自由噉測試代碼、除錯，而唔會影響到線上網站。

推薦閱讀 全面掌握WordPress主題開發：從入門到精通嘅完整指南。

選擇本地伺服器軟件

對於初學者，集成化嘅本地伺服器軟件係最佳選擇。佢哋將Apache/Nginx、PHP同MySQL數據庫打包埋一齊，一鍵安裝就可以用。例如XAMPP、Local by Flywheel或者DevKinsta都係流行嘅選擇。呢啲工具模擬咗真實嘅網絡伺服器環境，令你可以喺自己部電腦上運行WordPress。

安裝WordPress並創建主題目錄

喺本地伺服器運行之後，你需要安裝一個全新嘅WordPress。下載最新嘅WordPress壓縮包，解壓到本地伺服器嘅網站根目錄（例如XAMPP嘅htdocs資料夾）。跟住透過瀏覽器訪問本地地址（例如http://localhost），完成出名嘅「五分鐘安裝」。

安裝完成之後，進入WordPress嘅wp-content/themes目錄。喺呢度，為你即將開發嘅主題創建一個新嘅資料夾，例如命名為「my-first-theme」。你之前創建嘅style.css同埋index.php啲文件就應該放喺呢個文件夾入面。呢個時候，你登入WordPress後台，喺「外觀」->「主題」度，應該就會見到你嘅主題㗎喇，雖然佢而家功能仲係好簡單。

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

構建基礎模板文件體系

僅有index.php嘅主題係遠遠唔夠㗎。一個功能完整嘅主題需要一套模板文件嚟應付唔同嘅顯示場景，例如單篇文章、獨立頁面、文章歸檔等等。WordPress嘅模板層級系統會自動揀最匹配嘅模板文件嚟渲染當前請求嘅頁面。

文章同頁面範本

single.php範本用嚟顯示單篇網誌文章。當用戶點擊閱讀某篇文章嘅全文嗰陣，WordPress就會用呢個範本。通常會包含更詳細嘅文章資訊，例如分類、標籤、作者同留言區域。

page.php範本就用嚟顯示獨立嘅靜態頁面（例如「關於我哋」、「聯絡」頁面）。同文章範本唔同嘅地方在於，通常唔會顯示發佈時間、分類呢啲屬於網誌文章嘅元素。

推薦閱讀 詳解WordPress主題開發：從入門到精通嘅完整指南。

頁頭同頁尾範本

為咗跟從DRY（唔好重複自己）原則，WordPress主題通常會將頁面嘅頭部（Header）同底部（Footer）部分分開做獨立檔案。

header.php檔案包含由開始到頁面主要內容區域之前嘅所有代碼，包括區域、網站標識、主導航選單等等。喺index.php、single.php等其他模板入面，用get_header()函數嚟引入佢。

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

同理，footer.php文件包含页脚嘅所有內容，例如版權資訊、輔助導航等，並透過get_footer()函數引入。另外，sidebar.php（側邊欄）亦經常被分離，使用get_sidebar()調用。

重構之後index.php會變得非常簡潔：

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 文章内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

整合樣式同腳本

現代主題需要正確且高效噉載入CSS樣式表同JavaScript腳本。WordPress提供咗專門嘅函數嚟管理呢啲資源，確保佢哋以正確嘅依賴順序載入，而且避免重複引入或者衝突。

使用函數隊列添加樣式

正確嘅方式係透過wp_enqueue_style()函數將樣式表加入隊列。你需要喺主題度創建一個名為functions.php嘅文件，呢個文件係主題嘅功能核心，用嚟添加各種特性、功能同修改默認行為。

在functions.php當中，你可以掛載一個函數到wp_enqueue_scripts呢個動作鈎上：

function my_first_theme_scripts() {
    // 为主题的主样式表排队
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入一个Google字体
    wp_enqueue_style( 'google-font', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

get_stylesheet_uri()函數會自動獲取主題嘅style.css文件路徑。通過呢種方式加載，WordPress可以更有效噉管理資源。

使用函數隊列添加腳本

加載JavaScript腳本同樣需要用隊列，對應嘅函數係wp_enqueue_script()。你可以喺同一個函數入面加埋佢哋。

function my_first_theme_scripts() {
    // ... 加载样式的代码同上 ...

// 加载主题的主JavaScript文件，依赖于jQuery，并放在页脚
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

呢度，array( 'jquery' )聲明咗呢個腳本依賴核心嘅jQuery庫，WordPress會確保jQuery先被載入。最後一個參數true表示將腳本放喺頁面底部（之前），咁樣有助提升頁面載入速度。

摘要

由零開始開發一個WordPress主題係一個系統性嘅學習過程，涵蓋咗從理解基礎檔案結構、搭建本地環境、建立模板體系到正確整合資源等多個關鍵步驟。透過親手建立style.css、index.php、header.php、footer.php同functions.php等核心檔案，你唔單止構建咗一個可運行嘅主題，更深入理解咗WordPress模板層級同掛鉤系統嘅運作原理。記住，主題開發嘅核心在於遵循WordPress嘅約定同標準，咁樣可以確保你嘅主題兼容、高效且易於維護。以呢個為起點，你可以繼續探索更高級嘅功能，例如自訂文章類型、主題定制器、小工具區域等，逐步打造功能強大嘅個人化主題。

常見問題

開發主題係咪一定要識PHP

係嘅，識PHP係WordPress主題開發嘅必備條件。因為WordPress本身係用PHP寫嘅，所有模板文件（例如index.php、single.php）都係PHP檔案，佢哋透過PHP代碼調用WordPress核心函數嚟動態生成頁面內容。同時，用嚟添加功能嘅functions.php檔案亦完全由PHP代碼構成。HTML同CSS用嚟定義結構同樣式，而PHP就係實現動態功能同數據交互嘅靈魂。

主題嘅functions.php文件有咩作用

functions.php呢個文件係你主題嘅「功能中心」。佢唔係一個模板文件，唔會直接生成頁面上嘅某一部分。相反，佢用嚟存放所有用於修改同擴展主題功能嘅PHP代碼。常見用途包括：註冊導航菜單位置、定義小工具區域、通過wp_enqueue_scripts鉤子添加CSS同JavaScript文件、為主題添加主題支援功能（如文章縮圖、自訂背景）、以及定義各種自訂函數。呢個文件喺主題啟動時會自動載入。

點樣可以令我嘅主題支援多語言

要令主題支援多語言（國際化同本地化）主要分兩個步驟。第一步係喺主題入面所有需要翻譯嘅文字度用特定嘅WordPress翻譯函數，例如__('文本', 'text-domain')或_e('文本', 'text-domain')，其中text-domain一定要同style.css入面聲明嘅Text Domain一致。第二步係用好似Poedit呢類工具，掃描主題程式碼生成.pot模板檔案，翻譯者會基於呢個創建對應語言（例如中文）嘅.po同埋編譯好嘅.mo檔案，並將佢放喺主題嘅/languages/目錄下。WordPress會根據網站嘅語言設定自動載入對應嘅翻譯。

主題同插件有咩分別

主題同插件喺WordPress度擔當住完全唔同嘅角色。主題（Theme）主要控制網站嘅前端表現形式，即係用戶睇到嘅視覺外觀、版面、樣式同模板結構。佢決定咗個網站「睇落係點樣」。而插件（Plugin）就係用嚟為網站加啲特定功能，無論用咩主題，呢啲功能都可以正常運作，例如整聯絡表格、優化SEO、加網購購物車等等。佢決定咗個網站「有咩功能可以做到」。一個好嘅實踐原則係：同視覺呈現同版面相關嘅程式碼放喺主題度，而同核心功能相關嘅程式碼就應該盡量整成插件，咁樣可以確保換主題嗰陣，網站嘅重要功能唔會冇咗。

下一步應該點做?

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

延伸閱讀及實用知識

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

標籤: