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

從零開始：手把手教你開發一個自訂嘅WordPress主題

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

開發一個自訂嘅WordPress主題，係深入理解WordPress框架同提升前端開發技能嘅最佳途徑。同用現成主題唔同，由零開始構建讓你擁有完全控制權，能夠創建出獨一無二、完全符合項目需求嘅網站。本文將引導你完成構建一個基礎但功能完整嘅WordPress主題嘅全過程。

開發環境與主題結構配置

喺開始編寫代碼之前，你需要一個本地嘅開發環境。呢個通常包括一個本地伺服器套件（例如XAMPP、MAMP或Local by Flywheel）、一個代碼編輯器（例如VS Code）以及最新版本嘅WordPress。

首先，喺WordPress嘅 <code>wp-content/themes</code> 目錄下，為你嘅新主題創建一個文件夾，例如 <code>my-custom-theme</code>。一個最基本嘅WordPress主題至少需要兩個核心檔案。

推薦閱讀 WordPress主題開發完整教程：從零開始構建自訂主題。

度整一個樣式表檔案

第一個必需嘅文件係 style.css。呢個檔案唔單止定義咗主題嘅樣式，佢嘅檔案頭註解仲包含咗向WordPress描述主題嘅元數據。請喺檔案頂部加入以下註解：

UltaHost WordPress 主機
30日退款保證，無限頻寬同數據庫，免費DDoS防護，買3年優惠50%
UltaHost 標誌 瀏覽該頁面 
/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

“「文字領域」用嚟做國際化，一定要同你嘅主題資料夾名稱保持一致。之後，你就可以喺呢個檔案度編寫所有嘅CSS規則。

建立核心功能檔案

第二個必需嘅檔案係 functions.php。呢個係主題嘅「大腦」，用嚟引入樣式表、JavaScript檔案，註冊選單、側邊欄等功能，同埋加入各種功能支援。

一個基礎嘅 functions.php 開頭通常係咁樣，用嚟將樣式表加入佢嘅處理清單度：

<?php
// 将主题样式表加入队列
function my_custom_theme_enqueue_styles() {
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue_styles' );

而家，雖然仲未有咩模板檔案，但你嘅主題已經可以喺WordPress後台嘅「外觀」->「主題」列表度見到同埋啟動。啟動之後，網站前台會顯示一個空白頁面，因為仲未有模板檔案去定義頁面結構。

推薦閱讀 WordPress主題開發入門實戰指南：從零打造自訂主題架構與模板。

構建核心模板檔案

模板檔案控制住網站唔同部分嘅顯示方式。WordPress會透過模板層次結構去決定而家個請求要用邊個模板。

建立全站頁首同頁尾

最佳做法係將公共嘅頁首同頁尾代碼分開出嚟。建立 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">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1004>
    <header>
        <h1><a href="/yue/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
        <nav>
            'primary' ) ); ?&gt;
        </nav>
    </header>
    <main>

相應地，創建 footer.php 嚟閂返喺 header.php 度打開嘅主容器同標籤。

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

wp_head() 同埋 wp_footer() 係關鍵嘅掛鈎，容許WordPress核心、插件同主題本身喺呢啲位置插入必要嘅代碼（例如樣式、腳本）。

建立索引同文章模板

index.php 係模板層次結構嘅最終後備檔案，亦都係我哋主題嘅起點。佢用 get_header() 同埋 get_footer() 嚟引入分離嘅模組。

<article>
            <h2><a href="/yue/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div><?php the_excerpt(); ?></div>
        </article>
    
    <p>暫時冇文章。</p>

為咗單獨顯示單篇文章，建立 single.php。佢嘅結構同 index.php 類似，但用 the_content() 嚟顯示全文。

推薦閱讀 WordPress主題開發入門 — 從零開始打造你嘅第一個自訂主題。

<article>
            <h1><?php the_title(); ?></h1>
            <div><?php the_content(); ?></div>
        </article>

增強主題功能

有咗基礎結構之後，我哋通過 functions.php 嚟加多啲實用功能，令主題更加專業、易用。

註冊導航菜單同側邊欄

在 functions.php 入面加以下代碼，登記一個主導航菜單區域同一個側邊欄（小工具區域）：

InterServer 共享主機
共享主機:每月1TB,只需£2.50;首月只需£0.10,使用優惠碼 tryinterserver。461個雲端應用程式腳本,一鍵安裝。
InterServer 標誌 瀏覽該頁面 
// 注册导航菜单
function my_custom_theme_register_menus() {
    register_nav_menus( array(
        'primary' =&gt; __( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_register_menus' );

// 注册侧边栏小工具区域
function my_custom_theme_register_sidebar() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-custom-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
 'after_widget'  =&gt; '</section>',
 'before_title'  =&gt; '<h3 class="widget-title">',
 'after_title'   =&gt; '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_custom_theme_register_sidebar' );

登記之後，你需要喺模板度叫佢哋出嚟。例如，喺 header.php 入面我哋已經用 wp_nav_menu 叫咗「primary」菜單出嚟。要喺側邊欄顯示小工具，可以喺 sidebar.php 喺中創建側邊欄模板，並喺 index.php 或 single.php 入面用 get_sidebar() 引入。

加入主題功能支援

WordPress提供好多內置功能，需要明確聲明支援後先可以喺主題度用。例如，加文章縮圖（特色圖像）支援、自訂Logo同HTML5標記支援：

// 添加主题功能支持
function my_custom_theme_setup() {
    // 支持文章缩略图
    add_theme_support( 'post-thumbnails' );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
    // 对搜索表单、评论表单等使用HTML5标记
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 在管理后台提供<title>标签支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

加咗「post-thumbnails」支援之後，你就可以喺文章循環度用 the_post_thumbnail() 函數嚟輸出特色圖像喇。

樣式設計與響應式佈局

一個美觀且適應唔同設備嘅主題至關重要。你可以喺 style.css 中編寫所有樣式。建議採用流動優先嘅策略。

基礎樣式與排版

首先，設定一啲重置樣式同基礎排版，確保喺唔同瀏覽器上面有一致嘅表現。

/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 头部样式 */
header {
    background: #f8f9fa;
    padding: 2rem 0;
    border-bottom: 1px solid #dee2e6;
}

/* 导航菜单样式 */
.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.main-navigation a {
    text-decoration: none;
    color: #007bff;
}

實現響應式設計

使用媒體查詢嚟調整唔同屏幕尺寸下嘅佈局。例如，當屏幕變細嗰陣，將導航選單改為垂直排列。

/* 移动端样式 */
@media (max-width: 768px) {
    .main-navigation ul {
        flex-direction: column;
        gap: 0.5rem;
    }

.container {
        padding: 0 15px;
    }

article {
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid #eee;
    }
}

確保圖片都係響應式嘅：

img {
    max-width: 100%;
    height: auto;
}

摘要

通過以上步驟，你已經成功創建咗一個功能完整嘅自訂WordPress主題。我哋從配置開發環境同創建最基本嘅 style.css 与 functions.php 檔案開始，逐步構建咗核心嘅模板檔案（header.php, footer.php, index.php, single.php），並增強咗主題嘅實用功能，例如註冊菜單、側邊欄同支援特色圖像。最後，我哋為主題添加咗基礎樣式同響應式佈局，令佢可以喺各種設備上良好顯示。呢個只係一個起點，你可以喺呢個基礎上繼續探索，創建頁面模板（page.php）、歸檔模板（archive.php）、搜尋模板（search.php），甚至利用子主題進行定制，從而打造出更加強大同專業嘅網站。

常見問題

開發WordPress主題必須掌握邊啲技術

開發一個基礎嘅WordPress主題，你需要掌握HTML、CSS同PHP。HTML用嚟構建頁面結構，CSS用嚟樣式設計同佈局，PHP就係驅動WordPress動態內容嘅核心。另外，對JavaScript有基本了解有助於添加互動功能。理解WordPress嘅核心概念，例如模板層次結構、循環（The Loop）、鈎子（Hooks）同函數，係成功開發主題嘅關鍵。

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

functions.php 個文件係WordPress佈景主題嘅功能中心。佢嘅主要作用包括：將CSS同JavaScript檔案加入隊列、註冊導航選單同側邊欄小工具區域、聲明主題支援嘅功能（例如文章縮圖、自訂Logo）、定義自訂函數、以及透過動作掛勾同過濾器掛勾嚟修改WordPress嘅預設行為。佢令你唔使修改WordPress核心檔案嘅情況下，都可以大大擴展同自訂主題嘅功能。

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

令主題支援多語言（國際化）主要涉及兩個步驟。首先，喺 style.css 嘅「Text Domain」同所有使用翻譯函數嘅地方，用一致嘅文本域（Text Domain），通常同主題資料夾名稱一樣。其次，喺準備俾翻譯嘅字串時，使用WordPress嘅翻譯函數，例如 __()、_e() 或 _x()。跟住，你可以用好似Poedit呢類工具嚟建立 .pot 模板檔案，並生成對應嘅 .po 同埋 .mo 翻譯檔案。將翻譯檔案放喺主題嘅 /languages 喺目錄下，WordPress會根據網站嘅語言設定自動載入佢哋。

創建子主題同直接修改父主題相比有咩優勢

創建子主題係修改或擴展現有父主題功能嘅最佳實踐。其核心優勢在於更新安全性：當父主題發佈更新時，你可以安全噉更新父主題，而你對子主題所做嘅自定義修改（樣式、功能、模板）唔會消失。子主題只需要一個 style.css 同一個可選嘅 functions.php 檔案就可以運作。喺子主題嘅 style.css 入面，透過 @import 或者更好嘅排隊方式引入父主題樣式，然後加返你自己嘅CSS規則去覆蓋。子主題嘅 functions.php 會同父主題嘅同名檔案一齊載入，而唔係覆蓋，咁你就可以安全地加新功能。

下一步應該點做?

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

延伸閱讀及實用知識

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

標籤: