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

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

想要開始WordPress主題開發,一部配置咗本地PHP環境嘅電腦係首要條件。你可以揀XAMPP、MAMP、Local by Flywheel等工具嚟快速搭建。之後,你需要一個代碼編輯器,例如Visual Studio Code、PHPStorm或者Sublime Text,佢哋能夠提供語法高亮、代碼提示等功能,顯著提升開發效率。最後,請確保安裝並啟動咗最新版本嘅WordPress。

喺開始編碼之前,理解WordPress主題嘅目錄結構至關重要。一個最基礎嘅主題至少需要兩個檔案:style.css同埋index.php。但係喺實際開發中,我哋通常需要更多檔案嚟解耦功能。典型嘅現代主題結構可能如下所示:

your-theme/
├── style.css          # 主题样式和基本信息
├── index.php         # 主模板文件
├── header.php        # 头部模板
├── footer.php        # 底部模板
├── sidebar.php       # 侧边栏模板
├── functions.php     # 功能和特性定义
├── page.php          # 页面模板
├── single.php        # 文章模板
└── assets/
    ├── css/
    ├── js/
    └── images/

建立核心主題檔案

喺呢一步,我哋會創建主題嘅基石。呢啲檔案定義咗主題嘅身份同基本骨架。

推薦閱讀 WordPress主題開發終極指南:從零到一開始建立自訂主題

定義主題資訊同主樣式表

style.css個檔案唔單止係樣式表,更加係主題嘅「身份證」。佢頂部嘅註解區包含咗WordPress識別主題所需嘅所有元資訊。一個基本嘅頭部註解係咁樣:

UltaHost WordPress 主機
30日退款保證,無限頻寬同數據庫,免費DDoS防護,買3年優惠50%
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始构建的简单自定义主题,用于学习WordPress主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

其中,Text Domain用於國際化,係之後調用翻譯函數嘅關鍵識別。喺註解區之後,你就可以好似寫普通CSS咁,為你嘅主題加樣式。

構建主題嘅骨架模板

index.php係主題嘅預設主模板,亦係所有頁面嘅後備模板。一個良好嘅實踐係使用WordPress嘅模板函數嚟引入模組化嘅部分,而唔係將所有程式碼堆砌喺一個檔案入面。一個極簡但結構清晰嘅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>

分離頭部同底部模板

header.php檔案通常包含HTML文檔嘅頭部,直到內容區域開始之前。佢應該包含聲明、標籤區域(使用wp_head()鉤子)同埋網站標題同主導航。關鍵函數係wp_head(),佢容許插件同主題喺個頭度注入必要嘅程式碼(好似CSS同JS咁)。

footer.php檔案就包含內容區域完咗之後嘅所有嘢,好似頁腳小工具區域、版權資訊等等。佢必須以wp_footer()函數調用結束,呢個函數對於好多插件(好似分析代碼)嘅正常運作係必需嘅。

推薦閱讀 構建專業網站:從零開始創建自訂WordPress主題嘅完整指南

引入功能同增強主題

functions.php檔案係你主題嘅「控制中心」,佢唔係一個模板檔案,而係一個喺主題初始化時自動載入嘅PHP檔案。你可以喺度加入主題支援、註冊選單、樣式表同腳本,同埋定義各種自訂功能。

啟用核心主題功能

透過add_theme_support()函數,你可以為你嘅主題聲明對某啲WordPress核心功能嘅支援。例如,啟用文章縮略圖(特色圖像)同HTML5標記支援係現代主題嘅標準配備:

<?php
function my_theme_setup() {
    // 启用文章和评论的HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 启用文章缩略图功能
    add_theme_support( 'post-thumbnails' );
    // 设置默认缩略图尺寸
    set_post_thumbnail_size( 800, 400, true );
    // 启用标题标签支持(由WordPress自动生成<title>标签)
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

註冊選單同載入資源

註冊導航菜單位容許用戶喺後台「外觀」->「菜單」度管理佢哋。使用register_nav_menus()函數實現:

hosting.com 共享主機
高效能,配備 AMD EPYC 處理器、NVMe SSD 儲存同 LiteSpeed,提供全天候專業內部支援,採用先進安全措施,包括 SSL、暴力破解、惡意軟件同 DDoS 防護,可節省高達 73%。
function my_theme_menus() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-first-theme' ),
            'footer'  => __( '页脚菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_theme_menus' );

用正確嘅方式載入CSS同JavaScript檔案係良好效能嘅保證。你應該用wp_enqueue_style()同埋wp_enqueue_script()功能,並將佢哋安裝到wp_enqueue_scripts掛鈎上。咁樣可以確保依賴關係正確,同埋避免重複載入。

建立特定頁面模板

WordPress 跟從模板層級系統,即係話佢會根據而家睇緊嘅頁面類型,自動搵最夾嘅模板檔案。為唔同類型嘅頁面整專用模板,可以令版面同內容展示更加細緻。

為單篇文章同獨立頁面設計模板

single.php模板用嚟展示單篇文章。佢同index.php循環差唔多,但通常包含更完整嘅元資料,例如分類、標籤、作者、發佈時間同留言區。

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

page.php模板用嚟展示獨立嘅靜態頁面。通常唔會顯示文章元數據(例如分類、發佈時間),循環更簡單,專注於展示頁面編輯器嘅內容。

構建文章列表同歸檔頁面模板

archive.php模板用於顯示分類、標籤、作者、日期等歸檔頁面。通常有個標題(例如「分類:科技」)同一個文章列表。

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

home.phpfront-page.php用於定制博客首頁。如果存在front-page.php,佢會作為網站首頁;如果存在home.php,佢會作為文章目錄頁。

實現自訂搜尋同404頁面

search.php用嚟顯示搜尋結果。你可以喺度用the_search_query()用函式嚟輸出用戶嘅搜尋關鍵詞。

404.php當用戶訪問唔存在嘅地址時顯示。一個好嘅404頁面應該包含友善嘅提示、搜尋框同關鍵頁面嘅連結。

整合小工具同動態側邊欄

小工具係WordPress提供俾用戶靈活添加內容區塊(例如最新文章列表、分類目錄、搜尋框等)嘅功能。要令你嘅主題支援小工具,需要先註冊一個或多個「側邊欄」(實際上係小工具就緒區域),然後喺模板度顯示佢哋。

註冊小工具就緒區域

使用register_sidebar()函數嚟註冊一個側邊欄。你可以喺functions.php入面定義多個側邊欄,分別用於主側邊欄、頁腳區域等。

function my_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; '<h2 class="widget-title">',
            'after_title'   =&gt; '</h2>',
        )
    );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

喺模板度調用側邊欄

註冊之後,你喺模板檔案入面要用dynamic_sidebar()函數嚟輸出呢個區域。例如,喺sidebar.php入面:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php endif; ?>

跟住,喺index.phpsingle.php等需要側邊欄嘅模板入面,用get_sidebar()函数引入sidebar.php。用戶而家就可以喺WordPress後台嘅「外觀」->「小工具」頁面,向「主側邊欄」拖拽添加各種小工具喇。

摘要

由零開始構建一個WordPress自訂主題係一個系統性嘅學習過程,佢從理解基礎嘅檔案結構開始,逐步深入至模板層級、功能增強同動態內容區域。核心在於掌握style.cssindex.phpheader.phpfooter.php同埋functions.php呢幾個基石檔案嘅作用同寫法。透過add_theme_support()啟用功能,透過模板層級創建針對性嘅頁面模板,再透過register_sidebar()整合小工具,一個功能完整、結構清晰嘅主題就初具雛形。呢個唔單止係技術實現,更加係對WordPress內容管理邏輯嘅深刻理解。

常見問題

開發主題前必須使用子主題嗎?

唔一定。如果你係從零開始完全原創一個主題,可以直接創建父主題。使用子主題嘅最佳場景係:當你想對一個現有主題(父主題)進行定制同修改,並且希望將來可以安全咁更新父主題而唔會丟失你嘅自定義修改時。從零開始學開發,直接創建父主題更有利於理解整個架構。

點解我嘅主題喺後台「外觀」中唔顯示?

呢個通常係因為style.css檔案頂部嘅主題資訊註釋塊格式唔正確、缺失或者有語法錯誤導致嘅。請仔細檢查該檔案開頭嘅註釋塊係咪嚴格按照格式書寫,特別係Theme Name:呢一行必須存在而且正確。同時,確保你嘅主題文件夾已經放喺wp-content/themes/目錄下。

functions.php 同插件有咩分別?

functions.php文件入面嘅代碼同你嘅主題緊密綁定,當轉換主題嗰陣,呢啲功能通常會失效。佢適合擺放同主題外觀、佈局、模板功能直接相關嘅代碼。而插件就用嚟提供獨立於主題、可以跨主題使用嘅功能。一個簡單嘅原則係:如果功能係影響網站外觀或者佈局嘅,擺喺主題嘅functions.php入面;如果係添加獨立業務邏輯(例如聯絡表格、SEO優化)嘅,應該製作成插件。

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

令主題支援多語言(國際化同本地化)主要涉及兩個步驟。首先,喺style.css嘅註釋塊同functions.php喺所有需要翻譯嘅字串處,用像__( ‘文本’, ‘my-first-theme’ )噉嘅翻譯函數包住,其中‘my-first-theme’係你嘅文字域(Text Domain)。其次,你需要用好似Poedit噉嘅工具,掃描主題檔案生成.pot模板檔案,同埋為每種語言創建對應嘅.po同埋.mo翻譯檔案,將佢哋擺喺主題嘅/languages/目錄下。