主页/知识/WordPress/内容详情

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

2 分钟阅读
2026-03-14
2026-06-05
2,026
通过下方链接进行购物时，您无需支付额外费用，我就能获得佣金。.

WordPress 主題開發基礎概念

在開始編寫程式碼之前，理解 WordPress 主題的基本構成至關重要。一個主題本質上是一個資料夾，其中包含一系列遵循特定規則的檔案，這些檔案共同決定了網站的外觀和部分功能。核心思想是“模板層級”，即 WordPress 會根據當前訪問的頁面型別（如首頁、文章頁、頁面）自動選擇並載入對應的模板檔案。

每個主題必須包含兩個核心檔案：style.css 以及 index.php。style.css 不僅提供樣式，其檔案頭部註釋還承載著主題的元資訊，如主題名稱、作者、描述等，這是 WordPress 識別主題的唯一方式。index.php 是預設的模板檔案，當其他更具體的模板不存在時，WordPress 會回退使用它。

主題透過模板標籤（Template Tags）與 WordPress 核心進行互動。這些是 PHP 函式，用於從資料庫中動態獲取並顯示內容，例如 the_title() 輸出文章標題，the_content() 輸出文章正文。理解並正確使用這些函式是動態內容展示的關鍵。

推荐阅读 《WordPress主题开发完全指南：从入门到精通》。

搭建開發環境與建立主題結構

一個高效且隔離的開發環境是主題開發的第一步。推薦使用本地伺服器軟體如 XAMPP、MAMP 或 Laragon，它們能快速在電腦上搭建 PHP 和 MySQL 環境。將 WordPress 核心檔案安裝到本地伺服器的根目錄（如 htdocs 或者 www）中。

UltaHost WordPress 主機
30天退款保證，無限頻寬與資料庫，免費的 DDoS 防護，購買3年優惠50%
UltaHost LOGO 访问页面

接下來，在 WordPress 安裝目錄的 wp-content/themes/ 路徑下，為你新主題建立一個資料夾，例如命名為 my-first-theme。在這個資料夾內，建立第一個必需檔案：style.css。其頭部註釋必須嚴格按照以下格式：

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义 WordPress 主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

儲存檔案後，進入 WordPress 後臺的“外觀”->“主題”頁面，你應該能看到你的主題已出現並可以啟用。

現在，建立第二個必需檔案：index.php。這是主題的主模板檔案。初期可以只放入基礎的 HTML5 結構和一個簡單的迴圈來測試。

<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1005>
    <header>
        <h1>我的自定义主题</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                ?>
                <article>
                    <h2></h2>
                    <div></div>
                </article>
                <?php
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>网站底部信息</p>
    </footer>
    
</body>
</html>

核心模板檔案與函式詳解

隨著主題複雜度的增加，你需要將不同功能的程式碼分離到 specialized 的模板檔案中。WordPress 的模板層級系統會自動尋找並載入最匹配當前頁面的模板。

推荐阅读 手把手教你如何打造功能强大的自定义 WordPress 主题。

建立 （注：此处"建立"可能指某个组织、项目或机构的创立过程。） header.php 檔案，將 index.php 嗯，您能再说一遍吗？我没听清楚。 <head> 部分和 <header> 部分的程式碼剪下進去。然後在 index.php 頂部使用 get_header() 函式來引入它。同理，建立 footer.php 存放底部資訊，並使用 get_footer() 引入。建立 sidebar.php并使用 get_sidebar() 引入。這實現了程式碼的模組化和複用。

對於不同的頁面型別，可以建立特定的模板：
* single.php：用於顯示單篇文章。
* page.php：用於顯示單個頁面。
* front-page.php：如果存在，將作為靜態首頁。
* home.php：用於顯示部落格文章索引（當首頁設定為“最新文章”時）。
* archive.php：用於顯示分類、標籤、作者等歸檔頁面。
* 404.php：用於顯示 404 錯誤頁面。

在模板檔案中，最核心的結構是“迴圈”（The Loop）。它是 WordPress 用來從資料庫檢索並顯示文章的 PHP 程式碼塊。基本結構如下：

hostng.com 共享主机
高效能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候 24 小时专业内部支持，先进的安全措施包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 731 TB/月的带宽成本。
hosting.com标志 访问页面 
<!-- 在这里输出文章内容，使用 the_title(), the_content() 等函数 -->

    <p>抱歉，没有找到任何内容。</p>

函式 bloginfo() 或者 get_bloginfo() 用於獲取網站的基本資訊，如 bloginfo( 'name' ) 輸出網站標題，bloginfo( 'stylesheet_url' ) 輸出主題樣式表 URL。

樣式、指令碼與主題功能拓展

為了讓主題樣式正確載入並避免衝突，必須使用 WordPress 提供的函式將樣式表和指令碼檔案加入佇列，而不是直接在 HTML 中寫 <link> 或者 <script> 標籤。這是透過主題的 functions.php 檔案實現的。

建立 （注：此处"建立"可能指某个组织、项目或机构的创立过程。） functions.php 檔案，它用於新增主題特色功能、修改預設行為或註冊指令碼樣式。使用 wp_enqueue_style() 以及 wp_enqueue_script() 函式：

推荐阅读 WordPress主题开发全攻略：从零开始构建高效的自定义主题。

<?php
function my_first_theme_scripts() {
    // 注册并排入主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 注册并排入一个自定义 CSS 文件
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom.css', array(), '1.0' );

// 注册并排入一个 JavaScript 文件，依赖于 jQuery
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>

关于 functions.php 中，還可以使用 add_theme_support() 函式來宣告主題支援的功能，例如文章特色影象、自定義Logo、文章格式等。

// 支持文章特色图像
add_theme_support( 'post-thumbnails' );

// 支持自定义 Logo
add_theme_support( 'custom-logo', array(
    'height'      => 100,
    'width'       => 400,
    'flex-height' => true,
    'flex-width'  => true,
) );

// 在文章编辑器中添加编辑器样式
add_editor_style( 'editor-style.css' );

主題的最終樣式通常寫在 style.css 或其他透過函式載入的 CSS 檔案中。WordPress 會自動為 body 和文章新增許多有用的 CSS 類，如 home, single, page-id-{ID} 等，你可以利用這些類名來編寫針對性的樣式。

InterServer 共享主机
虚拟主机的月费为1TB+5TB，价格为2.50美元。首月优惠价为1TB+5TB，价格为0.1美元。优惠码为"tryinterserver"。平台提供461个云应用脚本，一键安装便捷。
InterServer 标志 访问页面

总结

透過本文的步驟，你已經掌握了從零開始構建一個基礎 WordPress 自定義主題的核心流程。從理解主題的基本概念和模板層級，到搭建環境、建立必需檔案，再到拆解核心模板、理解迴圈與模板標籤，最後學習如何透過 functions.php 正確新增樣式、指令碼和主題功能。這個過程雖然基礎，但涵蓋了主題開發的核心骨架。接下來，你可以進一步探索子主題開發、自定義文章型別、高階主題選項、WooCommerce 整合等更深入的主題，不斷豐富和完善你的主題開發技能。

常见问题解答（FAQ）

開發主題必須要懂 PHP 嗎

是的，PHP 是 WordPress 的核心程式語言。主題檔案本質上是 PHP 檔案，其中混合了 HTML 和 WordPress 的 PHP 函式（模板標籤）來動態生成頁面。即使使用頁面構建器，理解 PHP 對於定製高階功能和解決問題也是必不可少的。

主題的 style.css 檔案可以改名字嗎

不能这样做。style.css 是 WordPress 識別一個主題所必須的檔案，其名稱固定。主題所有的元資訊（如名稱、作者）都定義在這個檔案的頭部註釋中。但你可以透過 functions.php 中的函式註冊並載入其他名稱的 CSS 檔案來補充樣式。

如何讓主題支援中文或翻譯

首先，在 style.css 的頭部註釋中正確設定 Text Domain例如， my-first-theme），並在所有需要翻譯的字串中使用 __() 或者 _e() 函式進行包裹。然後，使用像 Poedit 這樣的工具掃描主題生成 .pot 模板檔案，並建立對應語言（如 zh_CN.po）的翻譯檔案，最後編譯為 .mo 檔案放在主題的 languages 文件夹里的。

自定義主題如何新增選單功能

首先，在主題的 functions.php 文件中使用了 register_nav_menus() 函式註冊選單位置。然後，在模板檔案（如 header.php）中希望顯示選單的地方，使用 wp_nav_menu() 函式呼叫已註冊的選單。使用者就可以在 WordPress 後臺的“外觀”->“選單”中配置這些位置的選單內容了。

下一步，该怎么做呢？

如果你正在搭建或优化WordPress网站，建议你继续阅读关于性能优化、插件配置和主题定制的相关内容。

延伸阅读与实用知识

下方列出的内容与本文主题相关，适合继续深入阅读。建议先从与你当前问题最相关的文章开始阅读，然后逐步扩展到相关主题，这样效果通常会更好。

标签：