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

WordPress主題開發：從零開始構建你第一個自定義主題

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

理解WordPress主題嘅核心結構

喺開始編寫代碼之前，必須先理解一個WordPress主題嘅基石：模板檔案同埋樣式表。WordPress透過調用一系列特定嘅檔案來渲染網站嘅唔同部分，呢啲檔案跟從標準化嘅命名約定。一個最精簡嘅主題只需要兩個檔案：index.php（主要模板檔案）同style.css（核心樣式表同主題資訊檔案），不過為咗建立功能豐富嘅網站，我哋需要更多嘅檔案。

style.css份文件唔單止包含CSS規則，佢檔案頭部嘅註釋區塊仲定義咗主題嘅後設資料，例如主題名稱、作者、描述同版本。呢個係WordPress識別一個主題嘅方式。舉個例，一段基本嘅頭部註釋如下：

/*
Theme Name: My First Custom Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A clean, custom-built WordPress theme for learning.
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

除咗核心檔案，一個典型嘅主題結構仲包括header.php（站點頭部）、footer.php（站點底部）、sidebar.php（側邊欄）同埋functions.php（主題功能函數檔案）。理解點樣將呢啲檔案透過模板標籤（例如get_header(), get_footer()）模組化咁組合，係高效開發嘅關鍵。

推薦閱讀 WordPress 主題開發入門指南：從零開始打造你嘅專屬網站介面。

建立主題檔案同目錄

首先，我哋需要喺WordPress安裝目錄下面wp-content/themes/喺個位置度開一個新嘅文件夾。呢個文件夾嘅名就係你個主題嘅識別符，建議用細楷字母、數字同連字號，例如my-first-theme。所有主題文件都會擺喺呢度。

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

創建核心樣式表檔案

正如之前強調嘅，style.css係必需嘅。喺主題文件夾度開呢個文件，同埋填寫完整嘅主題資訊標頭。之後，你就可以開始寫基本嘅CSS嚟定義網站嘅外觀。為咗避免瀏覽器預設樣式嘅干擾，通常會由重置樣式開始。

/* 在 style.css 的头部注释块之后 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
}

構建主模板檔案

跟住，建立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_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

分解模板：頭部、底部同埋側邊欄

為咗代碼嘅重用同埋清晰，WordPress主題通常會將頁面嘅通用部分分離到獨立文件入面。

實現網站頭部模板

創建header.php。呢個檔案包含HTML文檔嘅頭部（到標籤嘅開啟部分），同埋網站頂部嘅導航區域。關鍵模板標籤包括bloginfo()用嚟攞網站資訊，同埋wp_head()鉤子，佢容許插件同主題喺部分位置注入代碼。
一個基本嘅header.php示例：

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

<!DOCTYPE html>
<html no numeric noise key 1008>
<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 1005>
<?php wp_body_open(); ?>
<header class="site-header">
    <div class="site-branding">
        <h1 class="site-title"><a href="/yue/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p class="site-description"><?php bloginfo('description'); ?></p>
    </div>
    <nav class="main-navigation">
        'primary',
            'menu_id'        =&gt; 'primary-menu',
        ));
        ?&gt;
    </nav>
</header>

實現網站底部模板

創建footer.php。佢包含主要內容區結束之後嘅所有內容，例如頁腳版權資訊，同埋至關重要嘅wp_footer()鉤子調用，呢個對於好多插件（例如分析代碼）嘅正常運作係必需嘅。

<footer class="site-footer">
    <p>©  . All rights reserved.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

增強主題功能同自訂

functions.php係你個主題嘅「大腦」，用嚟加功能、註冊特性（例如導航選單、小工具區域）同埋排入腳本樣式，唔使改核心檔案。

註冊主題支援嘅功能

在functions.php入面，你可以用add_theme_support()函數嚟聲明主題支援嘅功能。例如，啟用文章縮略圖（特色圖像）同自訂標誌係現代主題嘅標準配備。

hosting.com 共享主機
高效能,配備 AMD EPYC 處理器、NVMe SSD 儲存同 LiteSpeed,提供全天候專業內部支援,採用先進安全措施,包括 SSL、暴力破解、惡意軟件同 DDoS 防護,可節省高達 73%。
hosting.com 標誌 瀏覽該頁面 
<?php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章特色图像
    add_theme_support('post-thumbnails');
    // 注册一个主菜单
    register_nav_menus(array(
        'primary' => __('主菜单', 'my-first-theme'),
    ));
}
add_action('after_setup_theme', 'my_first_theme_setup');
?>

排入樣式表同腳本

正確嘅樣式同腳本載入方式係用wp_enqueue_style()同埋wp_enqueue_script()功能,並將佢哋安裝到wp_enqueue_scripts掛鉤上面。咁樣可以確保依賴關係得到管理，同埋避免重複載入。

function my_first_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style('my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
    // 排入主JavaScript文件
    wp_enqueue_script('my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

摘要

由開設主題文件夾同style.css開始，到建立index.php、拆出header.php同埋footer.php等模板文件，再經由functions.php文件為你嘅主題加入核心功能同資源，呢個過程構成咗WordPress主題開發嘅基礎框架。每個步驟都強調咗WordPress模板層次結構嘅概念同最佳實踐，例如正確使用模板標籤同掛鉤。掌握咗呢啲基礎，你就擁有咗定制同擴展任何功能、滿足唔同項目需求嘅紮實起點。

常見問題

### 一個WordPress主題最少需要幾個文件？
一個可以運作嘅WordPress主題最少只需要兩個文件：index.php同埋style.css。其中，style.css文件頂部嘅註釋區塊必須存在並包含正確嘅主題資訊，呢個係WordPress識別主題嘅必需條件。

推薦閱讀 從零到一：WordPress主題開發終極指南與實踐教程。

點樣可以為我個主題加個小工具區域？

你需要透過functions.php檔案嚟註冊小工具區域（側邊欄）。用register_sidebar()函數，同埋指定佢嘅參數，好似名稱、ID同描述咁。之後，你就可以喺相應嘅模板檔案（例如sidebar.php）入面用dynamic_sidebar()用函數嚟調用佢。

點解我自訂嘅導航選單唔顯示？

通常係因為冇喺functions.php度正確登記選單位置。請確保你用咗register_nav_menus()函數嚟登記一個選單位置（例如‘primary’），同埋喺header.php中調用wp_nav_menu()嗰陣，‘theme_location’參數設定嘅值要同註冊時完全一致。最後，仲需要喺WordPress後台嘅「外觀 > 選單」設定中，將某個選單分配去呢個位置。

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

我应该在什么时候使用get_template_part()函数？

get_template_part()函數用於將可重用嘅代碼片段模組化，特別適合用喺文章循環中唔同格式嘅內容輸出。例如，你可以創建一個content.php檔案嚟定義每篇文章嘅通用HTML結構，然後喺index.php嘅循環中使用get_template_part(‘content’)嚟調用佢。咁樣提高咗代碼嘅重用性同可維護性，亦都令創建更專業嘅模板（例如content-page.php）成為可能。

下一步應該點做?

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

延伸閱讀及實用知識

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

標籤: