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

WordPress主題開發入門：一步步創建你嘅第一個自訂主題

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

準備工作同環境配置

喺開始寫第一行 code 之前，你需要一個合適嘅開發環境。呢個包括一個本地伺服器環境同埋程式碼編輯器。推薦用 XAMPP、MAMP 或者 Laragon 嚟搭建本地伺服器，佢哋可以一鍵安裝同運行 Apache、MySQL 同 PHP。揀一個你鍾意嘅程式碼編輯器，例如 Visual Studio Code、Sublime Text 或者 PHPStorm，佢哋對程式碼高亮同自動補全嘅支援會大大提升你嘅開發效率。

跟住，你需要喺本地 WordPress 安裝度為你嘅新主題建立一個目錄。所有 WordPress 主題都放喺 /wp-content/themes/ 目錄下面。喺呢個資料夾入面，為你即將建立嘅主題新開一個資料夾，例如叫做 my-first-theme。呢個資料夾嘅名就係你嘅主題標識，佢會喺後台嘅主題列表度顯示出嚟。

同時，你需要了解 WordPress 主題開發嘅兩大基石：模板文件同埋樣式表文件。最基本嘅 WordPress 主題只需要兩個文件：style.css 同埋 index.php。style.css 唔單止控制住網站嘅視覺樣式，佢文件頂部嘅註釋區更係主題嘅「身份證」，包含咗主題名稱、作者、描述等元資料。index.php 就係默認嘅主模板文件。

推薦閱讀 WordPress主題開發完整指南：由零開始構建自訂主題。

建立核心主題檔案

定義主題樣式同資訊

一切從 style.css 開始。喺主題資料夾嘅根目錄下創建呢個檔案，並喺檔案頂部加一個格式化嘅註釋區塊。呢個註釋區塊係WordPress識別同加載主題嘅關鍵。下面嘅代碼展示咗一個基本嘅樣式表頭部：

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

其中，Text Domain 用於國際化（i18n），為將來嘅多語言翻譯做準備。創建好呢個檔案之後，登入WordPress後台嘅「外觀」->「主題」頁面，你應該就可以睇到你嘅主題喇，雖然佢而家仲未有任何功能。

構建基礎模板結構

跟住創建主題嘅骨架檔案 index.php。呢個係最基礎嘅模板，當WordPress搵唔到更具體嘅模板檔案（例如 single.php 或 page.php）嗰陣，就會用到佢。一個最簡單嘅 index.php 可以只係包含調用 WordPress 頭部、循環同尾部嘅基本函數。

<!DOCTYPE html>
<html no numeric noise key 1011>
<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 1008>
    <?php wp_body_open(); ?>
    <header>
        <h1><a href="/yue/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

<main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                // 文章内容输出
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无文章。</p>';
        endif;
        ?&gt;
    </main>

<footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

呢個檔案用咗 WordPress 嘅核心模板標籤，例如 bloginfo() 攞網站資訊，the_title() 同埋 the_content() 喺循環入面輸出文章標題同內容。wp_head() 同埋 wp_footer() 係極之重要嘅鉤子，佢哋容許WordPress核心、插件同其他腳本向頁面嘅 <head> 同埋 <footer> 區域注入代碼。

拆分模板同引入功能

模組化模板文件

将 index.php 將所有代碼寫喺一個檔案入面會令代碼難以維護。最佳實踐係將佢拆分成多個模板部件（Template Parts）。建立以下檔案嚟組織代碼結構：
* header.php：存放 <head> 區域同網站頂部導航等公共頭部內容。
* footer.php：用嚟擺網站底部版權資訊呢啲公共尾部內容。
* sidebar.php：用嚟擺側邊欄小工具區域（可以揀用唔用）。
* functions.php：主題嘅功能函數檔案。

推薦閱讀 從零開始：手把手教你開發一個自訂嘅WordPress主題。

跟住，用 get_header()、get_footer() 同埋 get_sidebar() 等函數喺 index.php 中引入佢哋。改裝後嘅 index.php 核心部分會變得非常簡潔：

<?php get_header(); ?>

<main>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <article>
            &lt;?php the_title( &#039;<h2>', '</h2>' ); ?&gt;
        </article>
    <?php endwhile; else : ?>
        <p><?php esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ); ?></p>
    <?php endif; ?>
</main>

注意我哋用咗 esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ) 嚟輸出翻譯就緒嘅文本，呢個係國際化嘅標準做法。

增強主題功能

functions.php 文件係你主題嘅「控制中心」。佢用嚟添加主題支持嘅功能、註冊菜單同側邊欄、載入樣式表同腳本等等。佢唔係一個模板文件，而係喺主題初始化時自動載入。

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

下面係一個基礎嘅 functions.php 示例：

__( '主导航菜单', 'my-first-theme' ),
    ) );

// 添加对 HTML5 标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 添加标题标签支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册侧边栏小工具区域
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-first-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_first_theme_widgets_init' );

// 加载主题的样式表
function my_first_theme_scripts() {
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?&gt;

喺呢個文件入面，我哋定義咗函數 my_first_theme_setup，並透過 add_action( ‘after_setup_theme’， ‘my_first_theme_setup’ ) 將佢掛載到 WordPress 初始化主題嘅特定動作鈎上。同樣，我哋用 register_sidebar 函數註冊咗一個小工具區域，並透過 wp_enqueue_style 函數正確引入咗主題樣式表。

創建專用模板同樣式

為唔同頁面類型度身訂造模板

WordPress 嘅模板層次結構容許你為唔同類型嘅頁面建立特定嘅模板檔案。例如：
* front-page.php：用嚟做靜態首頁。
* home.php：網誌文章列表頁。
* single.php：單篇文章詳情頁。
* page.php: 單頁面。
* archive.php：分類、標籤、作者等存檔頁面。
* search.php：搜尋結果頁面。
* 404.php：404 錯誤頁面。

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

創建 page.php 可以讓你獨立控制所有頁面嘅外觀，而唔影響文章頁。佢嘅結構同 index.php 類似，但通常唔需要顯示文章發佈嘅元數據（例如日期、作者）。

設計響應式佈局同互動

現代 WordPress 主題必須係響應式嘅。即係話你嘅 CSS 要適應由手機到桌面嘅所有屏幕尺寸。建議用移動優先（Mobile First）嘅 CSS 策略，即係先為細屏幕寫基礎樣式，然後用媒體查詢（Media Queries）為大屏幕加增強樣式。

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

同時，你嘅主題可能需要啲 JavaScript 來提供互動功能，例如下拉選單、輪播圖等等。正確做法係喺 functions.php 入面用 wp_enqueue_script() 函數度註冊同排隊腳本，並確保依賴關係（例如 jQuery）正確聲明。咁樣可以避免腳本衝突同重複加載，並兼容 WordPress 嘅腳本優化功能。

摘要

通過以上步驟，你已經完成咗一個最基本、可以運行嘅 WordPress 自訂主題。你學識咗點樣創建定義主題資訊嘅 style.css，構建基礎嘅 index.php 模板，將模板拆分為模組化嘅部件，同埋喺 functions.php 中增強主題功能。你亦都了解到 WordPress 強大嘅模板層次結構，呢樣嘢為創建更複雜嘅專用模板頁面鋪平咗道路。

主題開發係一個不斷迭代同深入嘅過程。跟住落嚟，你可以探索子主題（Child Theme）開發去安全噉修改現有主題，學習使用 WordPress 定制器（Customizer）API 令用戶能夠透過後台實時調整主題設定，或者深入研究 WordPress 嘅 REST API 去創建同前端框架結合嘅主題。保持對官方開發者文檔嘅關注，並積極參與社區，係持續提升嘅關鍵。

常見問題

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

係嘅，具備紮實嘅 PHP 基礎係 WordPress 主題開發嘅必要條件。因為 WordPress 本身係用 PHP 編寫嘅，所有模板文件（如 index.php、single.php）同功能檔案（functions.php）都需要使用 PHP 代碼來動態生成內容、調用 WordPress 函數同操作數據。

同時，你仲需要熟悉 HTML 同 CSS 來構建頁面結構同樣式，並對 JavaScript（特別係 jQuery，因為佢被包含喺 WordPress 核心入面）有基本嘅了解，以添加互動功能。

點解我嘅主題更改喺 WordPress 後台唔顯示？

呢個通常係由瀏覽器或者伺服器緩存造成嘅。首先，試下喺瀏覽器度撳 Ctrl + F5（Windows/Linux）或者 Cmd + Shift + R（Mac）進行強制重新整理，以清除瀏覽器緩存。

如果問題依舊，可能係伺服器端或者 WordPress 緩存插件（例如 W3 Total Cache, WP Super Cache）緩存咗舊檔案。請試下清空所有緩存插件嘅緩存。喺開發階段，建議暫時停用呢啲緩存插件，避免干擾。

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

令主題支援多語言（國際化同本地化，i18n 同 l10n）主要依賴 WordPress 嘅翻譯函數。喺主題入面，所有面向用戶嘅文字字串都唔應該直接寫出，而應該用翻譯函數包住。

例如，用 (‘文本’， ‘my-first-theme’) 進行翻譯，或者用 echo esc_html(‘文本’， ‘my-first-theme’) 進行輸出同轉義。你需要喺 style.css 嘅頭同埋 load_theme_textdomain() 函數調用度正確設定 Text Domain（文字域），然後用好似 Poedit 噉嘅工具嚟建立 .pot 翻譯模板同埋 .po/.mo 語言檔案。

主題嘅 functions.php 同插件嘅功能有咩分別？

functions.php 檔案入面嘅代碼功能同插件代碼功能差唔多，都係用嚟擴展WordPress。主要分別在於作用範圍同用途。

functions.php 嘅功能係同當前佈景主題緊密綁定嘅。當用戶轉換主題嗰陣，呢啲功能通常就唔再可用。佢適合加啲同主題視覺呈現、版面、模板直接相關嘅功能（例如登記菜單位置、加主題支援選項）。

而插件提供嘅功能就係獨立於主題嘅，無論用緊咩主題，只要插件啟用咗，佢嘅功能就會存在。佢適合加啲同主題外觀冇關嘅通用功能（例如聯絡表格、SEO優化、電商功能）。如果一個功能喺轉換主題之後仲需要保留，咁就應該將佢實現成一個插件。

下一步應該點做?

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

延伸閱讀及實用知識

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

標籤: