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

WordPress 主題開發入門:從零開始打造你嘅第一個自訂主題

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

WordPress 主題開發基礎概念

喺開始寫程式碼之前，理解 WordPress 主題嘅基本結構係好重要㗎。一個主題本質上係一個文件夾，裏面包含咗一系列跟住特定規則嘅文件，呢啲文件一齊決定咗網站嘅外觀同部分功能。核心概念係「模板層級」，即係 WordPress 會根據而家訪問嘅頁面類型（例如首頁、文章頁、頁面）自動揀選同載入對應嘅模板文件。

每個主題一定要包含兩個核心文件：style.css 同埋 index.php。style.css 唔單止提供樣式，佢個文件頭部註解仲承載住主題嘅元信息，好似主題名、作者、描述等等，呢個係 WordPress 識別主題嘅唯一方式。index.php 係預設嘅模板文件，當其他更具體嘅模板唔存在嗰陣，WordPress 會退而求其次用返佢。

主題透過模板標籤（Template Tags）同 WordPress 核心互動。呢啲係 PHP 函數，用嚟從數據庫動態攞同顯示內容，例如 the_title() 輸出文章標題，the_content() 輸出文章正文。理解同正確使用呢啲函數係動態內容展示嘅關鍵。

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

搭建開發環境同創建主題結構

一個高效同隔離嘅開發環境係主題開發嘅第一步。推薦用本地伺服器軟件好似 XAMPP、MAMP 或者 Laragon，佢哋可以好快喺電腦度搭建 PHP 同 MySQL 環境。將 WordPress 核心檔案安裝到本地伺服器嘅根目錄（例如 htdocs 或 www）中。

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

跟住，喺 WordPress 安裝目錄嘅 wp-content/themes/ 路徑下，為你新主題創建一個文件夾，例如命名為 my-first-theme。喺呢個文件夾入面，創建第一個必需文件：style.css。其頭部註釋必須嚴格按照以下格式：

/*
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
*/

保存檔案後，入去 WordPress 後台嘅「外觀」->「佈景主題」頁面，你應該會見到你嘅佈景主題已經出現，而且可以啟用。

而家，創建第二個必需檔案：index.php。呢個係佈景主題嘅主模板檔案。初期可以只係放入基本嘅 HTML5 結構同一個簡單嘅循環嚟測試。

<!DOCTYPE html>
<html no numeric noise key 1008>
<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 1005>
    <header>
        <h1>我嘅自訂主題</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                ?>
                <article>
                    <h2><?php the_title(); ?></h2>
                    <div><?php the_content(); ?></div>
                </article>
                <?php
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>網站底部資訊</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

核心模板檔案同函數詳解

隨住佈景主題複雜度增加，你需要將唔同功能嘅程式碼分開到專門嘅模板檔案入面。WordPress 嘅模板層級系統會自動搵到同載入最適合當前頁面嘅模板。

推薦閱讀 手把手教你打造功能強大嘅自訂WordPress主題。

創建 header.php 檔案，將 index.php 中 <head> 部分同 <header> 將部分代碼剪貼入去。然後喺 index.php 頂部用 get_header() 函數嚟引入佢。同理，創建 footer.php 存放底部資訊，並用 get_footer() 引入。創建 sidebar.php，並用 get_sidebar() 引入。呢個實現咗代碼嘅模組化同重用。

對於唔同嘅頁面類型，可以創建特定嘅模板：
* single.php：用嚟顯示單篇文章。
* page.php：用嚟顯示單一頁面。
* front-page.php：如果存在，將會作為靜態首頁。
* home.php: 用嚟顯示博客文章索引（當首頁設定為「最新文章」嗰陣）。
* archive.php: 用嚟顯示分類、標籤、作者等歸檔頁面。
* 404.php: 用嚟顯示 404 錯誤頁面。

喺模板檔案入面，最核心嘅結構係「循環」（The Loop）。佢係 WordPress 用嚟從數據庫檢索並顯示文章嘅 PHP 代碼塊。基本結構如下：

hosting.com 共享主機
高效能,配備 AMD EPYC 處理器、NVMe SSD 儲存同 LiteSpeed,提供全天候專業內部支援,採用先進安全措施,包括 SSL、暴力破解、惡意軟件同 DDoS 防護,可節省高達 73%。
hosting.com 標誌 瀏覽該頁面 
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <!-- 在这里输出文章内容，使用 the_title(), the_content() 等函数 -->
<?php endwhile; else : ?>
    <p>對唔住，搵唔到任何內容。</p>
<?php endif; ?>

函數 bloginfo() 或 get_bloginfo() 用嚟攞網站嘅基本資料，例如 bloginfo( 'name' ) 輸出網站標題，bloginfo( 'stylesheet_url' ) 輸出主題樣式表嘅 URL。

樣式、腳本同主題功能擴展

為咗令主題樣式正確載入同避免撞，必須用 WordPress 提供嘅函數將樣式表同腳本檔案加入隊列，唔好直接喺 HTML 度寫 <link> 或 <script> 標籤。呢個係透過主題嘅 functions.php 檔案嚟實現嘅。

創建 functions.php 檔案，用嚟加主題特色功能、修改預設行為或者註冊腳本樣式。用 wp_enqueue_style() 同埋 wp_enqueue_script() 函數：

推薦閱讀 WordPress主題開發全攻略：從零打造高效能自訂主題。

<?php
function my_first_theme_scripts() {
    // 注册并排入主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 注册并排入一个自定义 CSS 文件
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom.css', array(), '1.0' );

// 注册并排入一个 JavaScript 文件，依赖于 jQuery
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>

在 functions.php 入面，仲可以用 add_theme_support() 函式嚟聲明主題支援嘅功能，例如文章特色圖像、自訂 logo、文章格式等等。

// 支持文章特色图像
add_theme_support( 'post-thumbnails' );

// 支持自定义 Logo
add_theme_support( 'custom-logo', array(
    'height'      => 100,
    'width'       => 400,
    'flex-height' => true,
    'flex-width'  => true,
) );

// 在文章编辑器中添加编辑器样式
add_editor_style( 'editor-style.css' );

主題嘅最終樣式通常寫喺 style.css 或者其他透過函數載入嘅 CSS 檔案入面。WordPress 會自動為 body 同文章加入好多有用嘅 CSS 類別，例如 home, single, page-id-{ID} 等等，你可以用呢啲類名嚟編寫針對性嘅樣式。

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

摘要

透過本文嘅步驟，你已經掌握咗由零開始構建一個基礎 WordPress 自訂主題嘅核心流程。由理解主題嘅基本概念同模板層級，到搭建環境、創建必需檔案，再到拆解核心模板、理解循環同模板標籤，最後學識點樣透過 functions.php 正確噉加入樣式、腳本同主題功能。呢個過程雖然係基礎，但係已經涵蓋咗主題開發嘅核心骨架。跟住落嚟，你可以進一步探索子主題開發、自訂文章類型、進階主題選項、WooCommerce 整合等等更深入嘅課題，不斷豐富同完善你嘅主題開發技能。

常見問題

開發主題係咪一定要識 PHP 呀

係呀，PHP 係 WordPress 嘅核心編程語言。主題檔案本質上係 PHP 檔案，當中混合咗 HTML 同 WordPress 嘅 PHP 函數（模板標籤）嚟動態生成頁面。就算用頁面構建器，理解 PHP 對於自訂進階功能同解決問題都係必不可少嘅。

主題嘅 style.css 檔案可唔可以改名呀

唔可以。style.css 係 WordPress 識別一個主題必須嘅文件，個名係固定嘅。主題所有嘅元信息（例如名稱、作者）都喺呢個文件嘅頭部註釋度定義。但你可以透過 functions.php 入面嘅函數註冊並載入其他名嘅 CSS 文件嚟補充樣式。

點樣令主題支援中文或者翻譯

首先，喺 style.css 嘅頭部註釋入面正確設定 Text Domain（例如 my-first-theme），並喺所有需要翻譯嘅字串度使用 __() 或 _e() 用函數包住。跟住，用好似 Poedit 咁嘅工具掃描主題生成 .pot 模板檔案，同整返對應語言（好似 zh_CN.po）嘅翻譯文件，最後編譯成 .mo 檔案放喺主題嘅 languages 喺文件夾入面。

自訂主題點樣加選單功能

首先，喺主題嘅 functions.php 檔案入面用 register_nav_menus() 函數註冊菜單位置。然後，喺模板檔案（例如 header.php）入面想顯示菜單嘅地方，用 wp_nav_menu() 函數調用已註冊嘅菜單。用戶就可以喺 WordPress 後台嘅「外觀」->「菜單」度配置呢啲位置嘅菜單內容啦。

下一步應該點做?

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

延伸閱讀及實用知識

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

標籤: