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

WordPress主題開發完全指南：從零開始構建自訂主題

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

WordPress 主題開發基礎概念

喺開始寫程式碼之前，理解WordPress主題嘅基本構成同核心概念係至關重要嘅。一個WordPress主題本質上係一個位於/wp-content/themes/目錄下嘅文件夾，其中包含一系列文件，呢啲文件共同決定咗網站嘅外觀同功能。呢啲文件主要分為兩類：模板文件同樣式文件。

模板文件係主題嘅骨架，佢哋控制住唔同頁面內容嘅輸出結構。例如，index.php係默認嘅首頁模板，single.php控制單篇文章嘅顯示，page.php控制單頁面嘅顯示，而header.php、footer.php同埋sidebar.php就通常用嚟構建網站嘅公共區域。WordPress會跟特定嘅模板層次結構嚟為唔同嘅請求揀合適嘅模板文件，呢個為開發者提供咗極大嘅靈活性。

樣式檔案就負責主題嘅視覺呈現，其中最主要嘅係style.css。呢個檔案唔單止係定義所有CSS規則嘅地方，佢檔案頭部嘅註釋區塊仲承載住主題嘅後設資料，例如主題名稱、作者、描述同版本號。呢啲資訊對於WordPress識別同啟動主題係必不可少嘅。

推薦閱讀 點樣創建自訂WordPress主題：從零到一完整入門指南。

除咗呢啲，主題功能檔案functions.php扮演住核心角色。佢唔係一個模板檔案，而係一個喺主題初始化時自動載入嘅PHP檔案。開發者可以喺度加入自訂功能、註冊選單同側邊欄、引入腳本同樣式表，以及透過各種add_action同埋add_filter掛鉤嚟擴展或者修改WordPress嘅核心行為。理解呢啲基礎檔案嘅作用同協作方式係建立任何自訂主題嘅第一步。

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

構建主題框架同模板檔案

創建自訂主題嘅第一步係建立項目目錄同必需嘅核心檔案。喺你嘅本地開發環境或者測試伺服器嘅/wp-content/themes/路徑下，創建一個新嘅資料夾，例如命名為「my-custom-theme」。喺呢個資料夾入面，你需要即刻創建兩個基礎檔案：style.css同埋index.php。

style.css嘅檔案頭部必須包含特定嘅樣式表資訊。以下係一個最基礎嘅示例：

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-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-custom-theme
*/

呢啲註釋係好緊要，WordPress要靠佢哋喺後台嘅主題列表度顯示你個主題。跟住，創建index.php檔案。呢個係所有頁面請求嘅最終後備模板。一個最簡單有效嘅index.php可以淨係包含調用核心模板標籤嘅代碼：

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 默认输出文章内容
            the_content();
        endwhile;
    else :
        echo &#039;<p>暂无内容。</p>';
    endif;
    ?&gt;
</main>

呢段代碼好清楚噉展示咗WordPress嘅主題循環（The Loop）——透過have_posts()同埋the_post()函數遍歷並輸出文章。而get_header()、get_sidebar()同埋get_footer()函數則用於引入對應嘅模板部分。跟住，你應該創建呢啲被引入嘅模板部件檔案：header.php、sidebar.php同埋footer.php。

推薦閱讀 由零開始：掌握WordPress主題開發嘅完整指南同核心技術。

創建頭部模板檔案

在header.php入面，你需要擺放HTML文檔嘅頭部資訊，並調用關鍵嘅WordPress函數。

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1002>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <nav>'primary' ) ); ?&gt;</nav>
</header>

wp_head()個函數容許WordPress核心、插件同你嘅主題向頁面部分加入必要嘅代碼（例如樣式表連結）。body_class()個函數會為標籤輸出一個條件性CSS類名系列，方便進行精確嘅樣式控制。同樣道理，footer.php檔案入面必須包含wp_footer()函數調用，通常會擺喺閉合嘅標籤之前。

使用 functions.php 增強主題功能

functions.php文件係你主題嘅「控制中心」，用嚟加功能同整合WordPress特性。一個常見嘅起點係設定主題支援嘅功能、登記導航選單同正確載入資源。

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

加入主題功能支援

你可以用add_theme_support()函數用嚟聲明主題支援嘅唔同功能。例如，啟用文章精選圖片同HTML5對某啲元素嘅支援係好標準嘅做法。

function my_custom_theme_setup() {
    // 让主题支持特色图像
    add_theme_support( 'post-thumbnails' );

// 为评论表单、搜索表单等添加HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

// 添加标题标签支持，允许WordPress管理文档标题
    add_theme_support( 'title-tag' );

// 注册一个主菜单位置
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

呢度，after_setup_theme係一個喺主題初始化之後執行嘅掛鉤，係進行主題設定嘅標準位置。透過add_theme_support(‘title-tag’)，你就唔使再喺header.php中手動寫<title>標籤咗。

正確引入腳本同埋樣式

為咗效能、快取同埋依賴管理，必須要用WordPress提供嘅方法嚟載入CSS同埋JavaScript檔案，而唔係直接喺HTML度寫<link>或<script>标签。这通过wp_enqueue_style()同埋wp_enqueue_script()函數完成。

推薦閱讀 WordPress優化終極指南：由新手到專家嘅全面效能提升策略。

function my_custom_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 引入一个自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );

// 如果需要，为脚本局部化数据（传递PHP变量到JS）
    wp_localize_script( 'my-custom-theme-navigation', 'myThemeData', array(
        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
        'homeUrl' => home_url( '/' ),
    ));
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

wp_enqueue_scripts是用于在前端加载资源的正确钩子。使用get_stylesheet_uri()获取主题的style.css路径，使用get_template_directory_uri()攞主題目錄嘅URL。將版本號當做參數傳入有助於喺檔案更新之後打破瀏覽器快取。

實現模板層次結構同自訂樣式

WordPress嘅模板層次結構係一套用嚟自動揀選顯示頁面嘅正確模板檔案嘅規則系統。當訪問一個URL嗰陣，WordPress會跟住由最具體到最通用嘅順序去搵模板檔案。例如，對於一篇ID係123嘅文章，WordPress會依次搵：single-post-123.php -> single-post.php -> single.php -> singular.php -> 最後退返去index.php。

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

建立自訂頁面範本

除咗默認嘅模板，你可以為特定頁面創建自訂模板。呢個係通過喺新模板檔案嘅頂部加一個特別嘅模板名稱註解嚟實現。例如，創建一個叫做「全闊頁面」嘅模板：

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的全宽度页面模板。
 */
get_header(); ?>

<main id="primary" class="site-main full-width">
    &lt;?php
    while ( have_posts() ) :
        the_post();
        the_title( &#039;<h1 class="entry-title">', '</h1>' );
        the_content();
    endwhile;
    ?&gt;
</main>

&lt;?php
get_footer();

建立同保存呢個檔案（例如template-full-width.php）之後，喺WordPress後台編輯頁面嗰陣，你就可以喺「頁面屬性」嘅「模板」下拉選單度見到同用到「全寬頁面」呢個模板。

編寫響應式同模組化CSS

喺現代主題開發入面，響應式設計係必須嘅。喺style.css入面，你應該用媒體查詢（Media Queries）嚟適應唔同嘅屏幕尺寸。一個好嘅做法係採用移動優先嘅原則，先寫流動裝置嘅基礎樣式，然後逐步增強更大屏幕嘅樣式。

同時間，保持CSS嘅模組化同可維護性。為主題嘅唔同部件（例如頭部、導航、文章、頁腳）建立清晰嘅類名結構，例如使用BEM（Block Element Modifier）方法論。利用body_class()同埋post_class()函數自動生成嘅類名，可以極大地簡化你嘅CSS選擇器，避免過度嵌套同特異性過高嘅問題。

/* 移动端基础样式 */
.site-header {
    padding: 1rem;
}
.entry-title {
    font-size: 1.5rem;
}

/* 平板设备及以上 */
@media (min-width: 768px) {
    .site-header {
        padding: 2rem;
        display: flex;
        justify-content: space-between;
    }
    .entry-title {
        font-size: 2rem;
    }
}

/* 桌面设备 */
@media (min-width: 1024px) {
    .site-main.full-width {
        max-width: 1200px;
        margin: 0 auto;
    }
}

摘要

從零開始開發一個WordPress自訂主題係一個系統性嘅工程，佢要求開發者理解其核心架構：模板檔案控制結構，樣式檔案定義表現，而functions.php則集中管理功能。遵循模板層次結構能夠高效地創建唔同頁面類型嘅視圖，正確使用WordPress提供嘅函數同鉤子（例如wp_enqueue_scripts、add_theme_support）係確保主題兼容性、安全性同性能嘅關鍵。透過構建模組化嘅模板部件、編寫響應式CSS同埋利用主題功能檔案進行深度定制，你可以完全掌控網站嘅外觀同行為，創造出獨一無二嘅用戶體驗。呢個過程雖然需要投入時間學習，但佢賦予咗你構建任何類型網站嘅終極自由。

常見問題

主題同插件有咩分別？

主題（Theme）主要負責控制網站嘅前端表現，即用戶睇到嘅視覺設計同佈局。佢決定咗網站嘅顏色、字體、排版、頁面結構等等。

插件（Plugin）就係為網站添加特定功能或特性嘅模組，佢可以唔改變主題核心設計嘅情況下擴展網站嘅能力，例如添加聯絡表單、SEO優化、創建網上商店等等。一個網站只可以同時啟動一個主題，但可以安裝同啟動多個插件。

開發主題前必須安裝本地環境嗎？

係呀，強烈建議喺本地開發環境（例如Local、XAMPP、MAMP或者Docker）入面進行WordPress主題開發。

咁樣做可以令你喺安全嘅隔離環境度編寫同測試代碼，唔使擔心影響到線上網站。本地環境加載速度快，除錯方便，亦都更加容易用版本控制工具（例如Git）嚟管理代碼。等到主題開發測試完成之後，再部署到生產伺服器。

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

令主題支援多語言（國際化同本地化）主要涉及兩個步驟。首先，喺主題嘅所有文字輸出位置，用WordPress嘅翻譯函數嚟包住字串，例如用esc_html_e(‘Hello World’, ‘my-custom-theme’)或__('Hello World', 'my-custom-theme')。呢啲函數入面第二個參數「my-custom-theme」係你喺style.css中定義嘅文本域（Text Domain），必須保持一致。

其次，你需要用Poedit呢類工具，掃描主題中所有可翻譯字符串，生成.pot模板檔案，然後為每種語言創建相應嘅.po同埋編譯好嘅.mo文件，并將佢哋擺喺主題嘅/languages/目錄下。最後，喺functions.php入面用load_theme_textdomain()函數嚟載入翻譯文件。

點解我修改咗 style.css 但網站冇變化？

呢個通常係因為瀏覽器緩存造成嘅。瀏覽器會緩存CSS檔案以提升加載速度，導致你睇到嘅可能唔係最新嘅樣式。

你可以試下以下幾種方法解決：首先，喺wp_enqueue_style()函數度為樣式檔案加一個動態版本號參數，好似上面示例咁，每次檔案更新之後URL就會改變，逼瀏覽器重新下載。其次，喺瀏覽器度撳Ctrl+F5（或者Cmd+Shift+R）進行硬刷新。另外，檢查你嘅主題係咪正確激活，同埋確保你修改緊嘅係當前激活主題嘅style.css檔案。最後，確認你嘅CSS選擇器有足夠嘅特異性去覆蓋可能存在嘅其他樣式。

下一步應該點做?

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

延伸閱讀及實用知識

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

標籤: