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

WordPress主題開發入門指南：從零開始打造你嘅第一部作品

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

開發環境搭建同基礎知識

踏入WordPress主題開發嘅第一步，係準備好一個合適嘅本地開發環境。呢樣唔單止可以提高開發效率，仲方便測試同除錯。推薦使用好似XAMPP、MAMP或者Local by Flywheel呢啲集成環境，佢哋能夠一鍵安裝PHP、MySQL數據庫同Apache/Nginx伺服器，避免咗手動配置嘅麻煩。至於編輯器，Visual Studio Code、PhpStorm或者Sublime Text都係唔錯嘅選擇，佢哋對PHP、HTML、CSS同JavaScript有好好嘅語法高亮同代碼提示。

除咗環境，理解WordPress主題嘅基礎結構都好重要。一個最簡主題至少需要兩個核心文件：style.css 同埋 index.php。任何WordPress主題都位於/wp-content/themes/目錄下，並以其文件夾名（即主題標識符）進行區分。

主題信息頭部定義

主題嘅信息通過 style.css 檔案頭部嘅註釋嚟聲明。呢個區塊係主題嘅「身份證」，WordPress核心通過讀取佢嚟識別主題嘅名稱、作者、版本等元數據。一個典型嘅頭部信息示例如下：

推薦閱讀 深入理解WordPress插件開發：從零基礎到構建專業擴展。

/*
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用於國際化（i18n），係後續使用翻譯函數（例如__()或_e())時必須指定嘅標識符。index.php就係主題嘅默認入口模板檔案，即使其他模板檔案缺失，WordPress都會用佢嚟渲染頁面。

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

核心模板檔案結構

一個功能完整嘅WordPress主題跟一套叫做「模板層級」嘅規則。呢套規則決定咗喺唔同類型嘅頁面請求下，WordPress會自動揀邊個模板檔案嚟呈現內容。掌握呢個層級結構係開發靈活主題嘅關鍵。

入口檔案index.php位於模板階層嘅最後一級，作為所有頁面嘅預設後備。但係實際開發嗰陣，我哋會創建更具體嘅模板嚟提供定制化嘅展示。例如，當訪問一篇單獨嘅文章嗰陣，WordPress會優先搵single-post.php，如果唔存在就搵single.php最後先至回退到index.php。

常用模板文件同佢哋嘅作用

* header.php：網站頭部模板，通常包含<!DOCTYPE html>聲明、<head>區域同埋網站頂部嘅公共區域（例如Logo同主導航）。喺其他模板入面，使用get_header()函數引入。
* footer.php： 網站底部模板，包含版權資訊等等。用嚟get_footer()函數引入。
* sidebar.php： 側邊欄模板。用嚟get_sidebar()函數引入。
* functions.php： 主題嘅功能函數文件。佢唔係一個模板文件，而係喺主題初始化時自動載入，用嚟加主題特性、註冊菜單、側邊欄，同埋引入樣式同腳本。
* page.php: 用嚟顯示靜態頁面。
* single.php： 用嚟顯示單篇文章。
* archive.php： 用嚟顯示分類、標籤、作者、日期等等歸檔列表。
* front-page.php： 用嚟自訂網站嘅首頁（需要喺WordPress後台「設定」>「閱讀」度配置）。
* style.css： 除咗定義主題資訊，佢亦都係主題嘅主要樣式表。

透過呢種模組化嘅結構，開發者可以輕鬆咁重用公共部分（例如頁頭同頁尾），並喺唔同頁面類型上實現差異化嘅設計。

推薦閱讀 專業網站建設指南：從零到一打造高效、可擴展嘅互聯網門戶。

Functions.php同主題功能增強

functions.php文件係主題嘅「大腦」，喺呢度你可以透過代碼擴展或者修改WordPress核心功能，而唔使直接改核心文件。佢嘅強大之處在於能夠用WordPress提供嘅大量Action（動作）同Filter（過濾器）鈎子嚟介入程式嘅執行流程。

註冊主題支援嘅功能

在functions.php當中，你可以聲明主題支援邊啲WordPress內置功能。例如，令主題支援文章特色圖像、自訂菜單同自訂Logo，係現代主題嘅基本配置。呢樣可以透過add_theme_support()函數實現：

function my_theme_setup() {
    // 添加对文章特色图像（缩略图）的支持
    add_theme_support('post-thumbnails');

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

// 添加对自定义Logo的支持
    add_theme_support('custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ));
}
add_action('after_setup_theme', 'my_theme_setup');

上面嘅代碼入面，my_theme_setup係一個自訂函數，我哋透過add_action()將其掛載到after_setup_theme呢個動作掛喺鉤子上，確保佢喺主題初始化時執行。

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

引入樣式同腳本文件

正確嘅引入方式係保證前端資源可維護性同性能嘅關鍵。你應該用wp_enqueue_style()同埋wp_enqueue_script()函數，並且掛載到wp_enqueue_scripts呢個動作上。咁樣容許WordPress管理依賴關係、避免重複加載，同埋方便插件進行干預。

function my_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());

// 引入自定义JavaScript文件
    wp_enqueue_script('my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

模板標籤同循環系統

模板標籤係WordPress主題開發嘅核心工具，佢哋本質上係PHP函數，用喺模板檔案度動態輸出內容，好似文章標題、內容、作者、日期等等。佢哋令到將數據庫嘅內容顯示喺前端頁面變得非常簡單。

主循環嘅工作原理

WordPress用「循環」嚟從數據庫攞內容。佢基本結構係一個if語句包住一個while循環：

推薦閱讀 掌握 WooCommerce 自訂勾子：由入門到高階實戰完全指南。

<!-- 在这里使用模板标签输出单篇文章内容 -->
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>

have_posts()函數檢查目前查詢有冇文章。如果有，就進入while循環，the_post()函數負責設定全局變量同數據，令之後嘅模板標籤（例如the_title()、the_content()）可以正確噉輸出當前文章嘅資訊。

常用嘅內容輸出標籤

* the_title()： 輸出文章/頁面標題。
* the_content()： 輸出文章/頁面完整內容，包含<!--more-->標籤同分頁。
* the_excerpt()： 輸出文章摘要。
* the_permalink()： 輸出文章/頁面嘅永久連結地址，常用於<a>標籤嘅href屬性度。
* the_post_thumbnail(): 輸出文章嘅特色圖像。
* the_author()、 the_date()、 the_category()等：輸出相關元數據。

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

除咗輸出內容嘅標籤，仲有一類條件判斷標籤，例如is_single()、is_page()、is_home()、is_front_page()等，佢哋容許你喺模板檔案度根據目前頁面類型執行唔同嘅邏輯。

摘要

WordPress主題開發係一個將創意、設計同網頁技術結合嘅過程。由搭建本地環境、理解最細檔案結構開始，逐步深入掌握模板層級、利用functions.php增強主題功能，並熟練運用模板標籤同循環嚟動態展示內容。跟住「由外到內」嘅原則，先構建好頁頭、頁腳、側邊欄等骨架，再填充各個具體頁面嘅內容邏輯，係高效開發主題嘅方法。記住，實踐係最好嘅老師，親手創建一個最簡單嘅主題並不斷改進，係掌握呢啲知識最快嘅途徑。

常見問題

學習WordPress主題開發需要咩先決知識？

建議你具備基本嘅HTML同CSS知識，用嚟構建同美化頁面結構。同時，需要了解PHP嘅基礎語法，因為WordPress主題嘅核心邏輯同模板標籤都係用PHP編寫嘅。對JavaScript有初步了解都會對後期添加互動功能有幫助。

點解我嘅主題喺後台唔顯示或者無法啟用？

最常見嘅原因係style.css檔案中嘅主題信息頭部註釋格式唔正確、內容唔完整，或者該檔案唔存在。請嚴格檢查該檔案頂部嘅註釋塊，確保所有信息（尤其係Theme Name）填寫無誤。另外，確保你嘅主題資料夾直接放置喺/wp-content/themes/放喺目錄入面，而唔係擺喺另一個資料夾入面。

Functions.php 檔案出咗問題會導致乜嘢後果？

functions.php檔案入面嘅語法錯誤或者致命錯誤通常會令網站前台顯示「白屏」（即係致命錯誤頁面），或者喺後台主題管理頁度，你個主題隔離會出現「主題損壞」嘅提示。呢個時候WordPress會自動轉去預設主題，確保網站可以正常訪問。你需要透過FTP或者檔案管理員去修正functions.php入面嘅錯誤。

點樣可以令我嘅主題支援多語言（國際化）？

WordPress用GNU gettext框架嚟實現國際化。你需要喺style.css嘅頭同埋functions.php入面正確設定Text Domain，然後喺所有需要翻譯嘅文字位用翻譯函數，例如__('文本', 'my-theme-textdomain')或_e('文本', 'my-theme-textdomain')。之後，可以用Poedit呢啲工具生成.pot模板檔案，供翻譯者創建.po同埋.mo翻譯檔案。

子主題係咩嚟？點解我要建立子主題？

子主題係繼承另一個主題（父主題）所有功能同款式嘅主題。當你想修改一個現有主題（尤其係第三方主題）但又想保留將來安全更新嘅能力時，就必須創建子主題。子主題只包含一個style.css同可能嘅一啲自訂模板檔案。咁樣，當父主題更新時，你嘅自訂修改（喺子主題入面）就唔會被覆蓋。呢個係WordPress主題開發入面最佳實踐之一。

下一步應該點做?

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

延伸閱讀及實用知識

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

標籤: