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

WordPress主題開發：從零開始創建自訂主題嘅完整指南

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

WordPress主題嘅基本結構

一個WordPress主題本質上係一個位於wp-content/themes/目錄下嘅文件夾，入面包含咗一系列用嚟控制網站外觀同功能嘅文件。理解呢啲核心文件嘅角色係開發嘅基礎。

主題必需嘅模板文件

每個主題必須包含兩個最基礎嘅檔案：style.css同埋index.php。其中，style.css唔單止用嚟存放CSS樣式，佢嘅文件頭部註釋塊仲承載住主題嘅元信息，WordPress就係靠呢啲信息嚟識別主題。

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

index.php係主題嘅默認模板檔案，當WordPress搵唔到更特定嘅模板時，就會用佢嚟渲染頁面。佢係所有頁面顯示嘅「安全網」。

推薦閱讀 打造優質網站：深入解析 WordPress 主題嘅定制與優化實戰指南。

常用嘅其他模板檔案

為咗更精細咁控制唔同頁面嘅顯示，你需要創建更多模板檔案。例如，header.php通常包含文檔類型聲明、<head>區域同網站嘅頁頭部分；footer.php就包含頁尾內容同埋閉合標籤；sidebar.php用嚟做側邊欄。透過WordPress內置嘅函數例如get_header()、get_footer()同埋get_sidebar()，你可以喺其他模板中輕鬆引入呢啲部分。

UltaHost WordPress 主機
30日退款保證，無限頻寬同數據庫，免費DDoS防護，買3年優惠50%
UltaHost 標誌 瀏覽該頁面

另外，你仲可以整single.php用喺單篇文章，page.phppage.html用於獨立頁面，archive.php用嚟做歸檔列表，同埋functions.php呢個特殊檔案係用嚟加主題功能同特性嘅。

整主題首頁模板

首頁係網站嘅門面，通常需要最獨特嘅設計。我哋會由整index.php開始，再探討點樣引入循環嚟顯示內容。

整合頁頭同頁尾

一個好嘅做法係將公共部分模組化。首先，喺你嘅主題資料夾度開個header.php同埋footer.php。喺header.php入面，你需要包含<!DOCTYPE html>聲明、<html>標籤嘅開始、<head>區域（使用wp_head()钩子等插件同主题可以喺度注入代码），同埋网站标志同主导航等开篇内容。

跟住，喺index.php嘅开头，用<?php get_header(); ?>嚟引入呢个页头。喺index.php嘅末尾，用<?php get_footer(); ?>嚟引入footer.php，其中應包含wp_footer()掛鉤調用同閉合嘅</body></html>標籤。

推薦閱讀 WordPress主題開發完整指南：從零到一構建高性能自訂主題。

使用循環輸出文章

WordPress嘅核心係「循環」（The Loop），佢係一段PHP代碼，用嚟檢查有冇文章存在，如果存在就依次顯示佢哋。喺index.php的get_header()之後，你可以插入以下基礎循環代碼：

<article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
            <h2><a href="/yue/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
    
    <p>對唔住，搵唔到任何文章。</p>
<?php endif; ?>

呢段代碼入面，have_posts()同埋the_post()函數驅動循環。the_title()、the_permalink()同埋the_excerpt()等模板標籤用於輸出文章嘅具體內容。咁樣，一個基本嘅文章列表頁面就完成咗。

為主題添加樣式同腳本

一個冇樣式嘅主題係冇吸引力嘅。你需要正確噉將CSS同JavaScript檔案加入隊列，呢個係WordPress推薦嘅做法，可以確保依賴關係正確並避免衝突。

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

正確引入樣式表

雖然style.css係必需嘅，但係你唔應該直接喺HTML度連結佢。正確嘅方法係喺functions.php檔案入面用wp_enqueue_style()函數。首先，喺主題根目錄建立functions.php檔案，然後加入以下代碼：

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

呢段代碼定義咗一個函數，佢話俾WordPress知要將主題嘅主樣式表（get_stylesheet_uri()攞到嘅路徑）用「my-theme-style」呢個句柄加入隊列。add_action()個鈎子將呢個函數掛載到wp_enqueue_scripts呢個動作上，確保喺頁面載入嗰陣執行。

引入自訂JavaScript

引入JavaScript檔案嘅方法差唔多，但係用wp_enqueue_script()函數。假設你有一個位於js/script.js嘅檔案，你可以咁樣加入：

推薦閱讀 從入門到精通：WordPress主題開發完全指南與實戰教程。

function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

呢度啲參數分別代表：腳本句柄、腳本URL、依賴數組（例如array('jquery')）、版本號、以及係咪喺頁腳加載（true表示喺</body>之前加載）。

擴展主題功能

functions.php係主題嘅「工具箱」，你可以喺呢度加各種功能去增強主題，而唔使修改核心模板檔案。

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

添加主題支援功能

WordPress提供咗好多內置功能，但需要主題明確聲明支援之後先可以啟用。呢個係透過add_theme_support()函數嚟實現嘅。例如，要支援文章縮圖（特色圖像）、自訂Logo同HTML5嘅標記，可以喺functions.php入面加：

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    add_theme_support( 'title-tag' ); // 让WordPress管理页面标题
}
add_action( 'after_setup_theme', 'my_theme_setup' );

add_action( 'after_setup_theme', 'my_theme_setup' )確保呢啲設定喺主題初始化時盡早運行。

登記導航菜單

為咗令用戶可以喺後台「外觀-選單」度設定導航，你需要預先註冊選單位置。使用register_nav_menus()函數：

function my_theme_register_menus() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'init', 'my_theme_register_menus' );

註冊之後，你就可以喺模板文件（如header.php）入面用wp_nav_menu( array( 'theme_location' => 'primary' ) )嚟顯示呢個選單喇。

摘要

從創建包含style.css同埋index.php嘅基礎資料夾開始，你逐步建立咗一個完整嘅WordPress主題。透過理解模板層次結構，你學會咗創建專門嘅模板文件嚟精確控制唔同類型嘅頁面。採用wp_enqueue_style()同埋wp_enqueue_script()嚟管理資源係保證主題兼容性同性能嘅最佳實踐。最後，利用functions.php檔案，你可以透過add_theme_support()同埋register_nav_menus()等函式安全地為主題添加強大嘅功能。掌握呢啲核心步驟，你就擁有獨立開發個人化WordPress主題嘅堅實基礎。

常見問題

開發WordPress主題需要咩先決知識？

你需要具備HTML同CSS嘅紮實基礎，用嚟構建網頁結構同樣式。同時，需要了解PHP嘅基本語法，因為WordPress主題模板主要由PHP驅動。對JavaScript有初步了解有助於添加互動功能。此外，熟悉WordPress嘅基本概念，例如文章、頁面、分類同標籤，會令你喺開發過程中更加得心應手。

點解必須使用wp_enqueue_style載入樣式表，而唔係直接用link？

直接使用<link>標籤硬編碼樣式表路徑存在多個問題。首先，佢冇辦法妥善處理依賴關係，例如你嘅樣式可能依賴某個框架嘅樣式。其次，wp_enqueue_style容許插件或者其他主題、子主題安全噉覆蓋或者修改你嘅樣式。最重要係，佢能夠同緩存同性能優化插件更好噉協作，確保資源加載嘅順序同效率，呢個係WordPress生態入面嘅標準做法。

functions.php同插件有咩分別？

functions.php入面定義嘅程式碼係同你嘅主題緊密綁定嘅，當用戶切換主題嗰陣，呢啲功能就會唔再可用。佢適合存放同主題視覺呈現同佈局直接相關嘅功能，例如註冊菜單、支援特色圖像、定義側邊欄等等。而插件提供嘅功能通常係獨立於主題嘅，旨在為網站添加某種通用特性（例如聯絡表單、SEO優化），就算用戶更換主題，呢啲功能依然會存在。如果某個功能同主題外觀冇關，考慮將佢做成插件通常係更靈活嘅選擇。

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

令主題支援國際化係走向全球市場嘅關鍵。首先，喺你所有嘅主題文字輸出處，使用WordPress嘅翻譯函數，例如__('文本', 'my-custom-theme')或_e('文本', 'my-custom-theme')，其中my-custom-theme係喺style.css中定義嘅文字域。然後，使用如Poedit咁樣嘅工具，掃描主題文件生成.pot模板文件，翻譯人員可以根據呢個創建唔同語言嘅.po同埋.mo文件。最後，喺functions.php入面，經由load_theme_textdomain()函數加載翻譯文件。

下一步應該點做?

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

延伸閱讀及實用知識

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

標籤: