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

WordPress主題開發入門指南：由零開始建立自己嘅主題

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

WordPress主題開發入門指南：由零開始建立自己嘅主題

乜嘢係WordPress主題同佢嘅核心結構

WordPress主題唔單止係網站嘅外觀，佢係一系列檔案嘅集合，呢啲檔案一齊運作，為你網站嘅內容提供視覺呈現同互動功能。一個主題定義咗網站嘅整體佈局、顏色、字體同樣式，同時透過模板檔案控制唔同類型內容嘅顯示方式。理解主題嘅構成係開發嘅第一步。

一個標準嘅WordPress主題至少包含兩個核心文件：style.css同埋index.php。style.css檔案唔單止包含主題嘅樣式表，更重要嘅係佢頂部嘅註釋塊，呢個係WordPress識別一個主題嘅關鍵。呢個註釋塊必須包含主題名稱、作者、描述、版本等元資訊。而index.php係主題嘅預設模板檔案，當冇其他更具體嘅模板匹配時，WordPress就會用佢嚟渲染頁面。

推薦閱讀 從零開始：掌握現代WordPress主題開發嘅核心流程同最佳實踐。

除咗呢兩個必需文件，一個功能完整嘅主題通常仲包括其他模板文件，例如用嚟顯示單篇文章嘅single.php，用嚟展示文章列表嘅archive.php，同埋用嚟顯示頁面嘅page.php。主題仲可以包含一個functions.php文件，用嚟添加主題特有嘅功能、註冊菜單、側邊欄等等，而header.php同埋footer.php就用嚟將網站嘅頭部同頁腳代碼模組化，方便維護同重用。

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

創建你嘅第一個基礎主題

建立主題目錄同核心檔案

首先，喺WordPress安裝目錄嘅wp-content/themes/喺路徑下面開一個新嘅資料夾，當係你嘅主題目錄。資料夾名要用細楷字母、數字同連字號，唔可以有空格。例如，我哋可以開一個叫做my-first-theme嘅文件夾。

跟住，喺呢個資料夾入面開style.css檔案，同埋喺檔案開頭加返需要嘅主題資訊註解。呢個就係主題嘅「身份證」。

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个用于学习的简单WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

構建基礎模板檔案

跟住，建立index.php文件。呢個係最基礎嘅模板，我哋會由最簡單嘅HTML結構開始，並嵌入關鍵嘅WordPress函數嚟動態載入內容。一個極簡嘅index.php可以如下所示：

<!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函數：wp_head()同埋wp_footer()用嚟等WordPress核心、插件等向頁面頭部同底部注入代碼（例如樣式、腳本）；the_post()同埋the_content()用喺循環度輸出文章數據。而家，將呢個主題文件夾上傳到伺服器，你就可以喺WordPress後台嘅「外觀」->「主題」度睇到同啟用佢啦。

推薦閱讀 網站建設全流程指南：從零搭建專業網站嘅完整步驟解析。

使用模板層級同模板標籤

理解模板層級系統

WordPress採用一套精密嘅模板層級（Template Hierarchy）系統去決定對於任何一個特定嘅頁面請求，應該用邊個模板檔案去渲染。呢套系統基於從最具體到最通用嘅原則進行配對。例如，當訪問一篇ID為123嘅文章時，WordPress會按順序搵：single-post-123.php -> single-post.php -> single.php -> singular.php -> index.php。開發者可以利用呢個特性，透過創建更具體嘅模板檔案去精確控制唔同內容嘅顯示。

掌握常用模板標籤

模板標籤（Template Tags）係WordPress內置嘅PHP函數，用喺主題模板度動態輸出各種數據。佢哋係主題開發嘅核心工具。除咗上面例子用過嘅the_title()同埋the_content()，仲有大量其他標籤。

譬如，the_permalink()用嚟輸出當前文章嘅固定連結；the_post_thumbnail()用於輸出文章嘅特色圖片；the_category()用於輸出文章所屬嘅分類列表。條件判斷標籤都好重要，例如is_home()、is_single()、is_page()、is_category()等，佢哋容許你根據當前頁面嘅類型執行唔同嘅代碼邏輯。

hosting.com 共享主機
高效能,配備 AMD EPYC 處理器、NVMe SSD 儲存同 LiteSpeed,提供全天候專業內部支援,採用先進安全措施,包括 SSL、暴力破解、惡意軟件同 DDoS 防護,可節省高達 73%。
hosting.com 標誌 瀏覽該頁面 
<?php if ( is_single() ) : ?>
    <div class="post-meta">
        发布于： | 分类：
    </div>
<?php endif; ?>

呢段代碼只喺單篇文章頁面顯示文章嘅發布日期同分類資訊。

增強主題功能同自訂

添加主題功能檔案

functions.php檔案係你主題嘅「工具箱」。喺呢度加嘅程式碼會隨住主題啟動而生效。佢一個常見用途係登記主題支援嘅功能，例如文章特色相、自訂菜單位置同自訂背景。

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );

    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );

    // 支持HTML5的标记格式
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

    // 为文章摘要添加更多标签支持
    add_filter( 'excerpt_more', 'my_first_theme_excerpt_more' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

function my_first_theme_excerpt_more( $more ) {
    return '...';
}
?>

引入樣式表同腳本

為咗保持程式碼整齊同跟最佳做法，應該將樣式表（CSS）同JavaScript檔案透過functions.php文件進行排隊加載，而唔係直接喺模板文件度用或者標籤。咁樣可以確保依賴關係被正確處理，避免重複加載。

推薦閱讀 WordPress主題開發完整指南：從零到一構建自訂主題實戰教程。

使用wp_enqueue_style()函數嚟加載你嘅主樣式表，通常我哋會將style.css作為依賴項。對於腳本，就用wp_enqueue_script()函數。

function my_first_theme_scripts() {
    // 加载主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );

    // 加载一个自定义的JavaScript文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

摘要

WordPress主題開發係一個將創意、設計同技術結合嘅過程。通過理解主題嘅核心文件結構，尤其係style.css同埋index.php，你已經踏出咗堅實嘅第一步。掌握模板層級系統令你能夠為網站唔同部分創建精確嘅展示邏輯，而靈活運用模板標籤就可以動態輸出所有內容。透過functions.php文件，你可以安全噉為主題添加各種功能同支援，並以標準化方式管理資源。從呢個簡單基礎開始，你可以逐步探索更高級主題，例如創建子主題、用Walker類自訂導航菜單、整合Customizer API進行即時預覽設定，甚至利用區塊編輯器（Gutenberg）開發模式構建全站編輯（FSE）主題。持續實踐，參考官方文檔同優秀主題嘅代碼，係提升開發技能嘅最佳途徑。

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

常見問題

開發WordPress主題需要咩技術基礎？

開發WordPress主題需要掌握HTML、CSS同PHP嘅基礎知識。HTML用嚟構建頁面結構，CSS用嚟控制樣式同佈局，而PHP係WordPress嘅核心編程語言，用嚟處理邏輯、調用數據同生成動態內容。對JavaScript有基本了解亦會對添加互動功能有幫助。

點樣喺我部本地電腦度測試主題開發？

強烈建議先喺本地環境度做主題開發。你可以用本地伺服器軟件包，例如XAMPP、MAMP、Local by Flywheel或者Laragon。呢啲工具可以喺你部電腦好快咁起好一個有齊Apache、MySQL同PHP嘅WordPress運行環境，等你喺唔影響線上網站嘅情況下做開發同除錯。

主題嘅functions.php檔案同插件有咩分別？

functions.php檔案入面嘅功能只會喺當前啟動嘅主題度生效。如果你轉咗主題，呢啲功能就會冇得用。而插件提供嘅功能就唔受主題影響，無論轉咗邊個主題，只要插件仲係啟動緊，佢嘅功能就會繼續有。一般嚟講，同網站視覺呈現同佈局緊密相關嘅功能就放喺主題嘅functions.php度，而提供獨立、通用功能（例如聯絡表格、SEO優化、快取）嘅程式碼就更適合整成插件。

乜嘢係子主題，點解要用佢？

子主題係一個依賴另一個主題（叫做父主題）嘅主題。佢容許你修改或者擴展父主題嘅功能同樣式，而唔使直接改父主題嘅檔案。最大嘅好處係當父主題更新嘅時候，你喺樣式同功能上嘅自訂（放喺子主題入面）唔會唔見咗。要創建子主題，只需要喺佢嘅style.css檔案度用「Template:」聲明嚟指定父主題嘅目錄名，然後你就可以淨係創建需要覆蓋嘅模板檔案或者加新功能。

下一步應該點做?

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

延伸閱讀及實用知識

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

標籤: