主页/知识/ワードプレス/内容详情

WordPress主題開發入門指南：從零開始構建你的第一個主題

3 分钟阅读时间
2026-03-11
2026-06-03
2,611
當您透過下方連結購物時，我會獲得佣金，而您無需支付額外费用。.

準備工作與環境配置

在開始編寫代碼之前，你需要一個合適的開發環境。本地開發環境可以讓你在不影響線上網站的情況下進行測試和調試。推薦使用 XAMPP、MAMP 或 Local by Flywheel 等集成軟件包，它們能一鍵安裝 Apache、MySQL/MariaDB 和 PHP。

確保你的 PHP 版本在 7.4 或以上，這是 WordPress 官方推薦的最低版本。同時，你需要一個代碼編輯器，如 Visual Studio Code、Sublime Text 或 PHPStorm，它們能提供語法高亮和代碼提示功能，大大提高開發效率。

創建 WordPress 主題的基礎結構

一个 WordPress 主题本质上是一个位于 的模板文件集合。 wp-content/themes/ 目錄下的文件夾。這個文件夾的名字就是你的主題標識符，建議使用小寫字母、數字和連字符，且不能有空格。例如，你可以創建一個名爲 my-first-theme 的文件夾。

在這個文件夾內，至少需要兩個核心文件：style.css 以及 index.php。style.css 不僅僅是樣式表，它更重要的作用是提供主題的元信息，這些信息會顯示在 WordPress 後臺的“外觀”->“主題”頁面中。

編寫主題信息頭

于 style.css 文件的頂部，你需要添加一個特定的註釋塊來定義主題信息。這是一個示例：

UltaHost WordPress 主機
30天退款保證，無限帶寬與數據庫，免費的 DDoS 防護，購買3年優惠50%
UltaHost LOGO 访问页面 
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个简洁、轻量级的入门级 WordPress 主题，用于学习主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

其中,Text Domain 用於國際化（多語言支持），它必須與你的主題文件夾名稱一致。index.php 文件則是主題的默認模板文件，是所有頁面的後備模板。最初，你可以先在其中寫入簡單的 HTML 結構來測試。

核心模板文件與模板層次結構

WordPress 使用一套名爲“模板層次結構”的規則來決定對於特定的頁面請求，應該使用哪個模板文件來渲染。理解這個結構是主題開發的關鍵。其核心思想是：WordPress 會從最具體的模板文件開始尋找，如果找不到，則回退到更通用的文件，最終回退到 index.php。

推荐阅读 WordPress主題開發入門：從零開始構建你的第一款自定義主題。

常用模板文件及其用途

  • header.php： 網站的頁頭部分，通常包含 `` 區域、網站標識和主導航。
  • footer.php： 網站的頁腳部分，通常包含版權信息、輔助鏈接等。
  • sidebar.php： 側邊欄區域。
  • index.php： 主模板，作爲所有頁面的最終後備。
  • single.php： 用於顯示單篇博客文章。
  • page.php： 用於顯示單個頁面（如“關於我們”、“聯繫”）。
  • archive.php： 用於顯示文章歸檔列表（如分類、標籤、作者、日期歸檔）。
  • front-page.php： 用於定義網站首頁（如果設置了一個靜態頁面作爲首頁）。
  • home.php： 用於顯示博客文章索引頁（如果設置了靜態首頁，這個模板顯示最新的文章列表）。
  • 404.php： 用於顯示“404 未找到”錯誤頁面。
  • search.php： 用於顯示搜索結果。
  • functions.php： 這不是一個模板文件，而是主題的功能文件，用於添加功能、註冊菜單、側邊欄等。

模板標籤與循環

在模板文件中，你會頻繁使用“模板標籤”。這些是 WordPress 提供的 PHP 函數，用於輸出動態內容，如 bloginfo('name') 輸出網站標題，the_title() 輸出文章標題。

最核心的概念是“WordPress 循環”。它是一個 PHP 代碼結構，用於檢查當前頁面是否有文章（或文章列表）需要顯示，並循環輸出它們。一個最基本的循環如下：

<h2></h2>
    <div class="entry-content">
        
    </div>

    <p></p>

這段代碼的意思是：如果有文章，就循環（while）每一篇，在循環中顯示文章標題和內容；如果沒有文章，則顯示一條錯誤信息。`_e()` 是一個用於國際化的翻譯函數。

主題功能與樣式集成

functions.php 是你的主題的“大腦”，所有不屬於模板渲染的核心功能都應在此添加。這個文件在主題初始化時被自動加載。

註冊主題功能

于 functions.php 中，你可以通過 WordPress 提供的各種“鉤子”（Hooks，如動作鉤子和過濾器鉤子）來擴展功能。首先，通常需要聲明主題對某些功能的支持。例如，添加文章縮略圖（特色圖像）和菜單支持：

hosting.com 共享主机
高性能配置，搭载 AMD EPYC 处理器、NVMe SSD 存储及 LiteSpeed 技术，提供全天候 24 小时专家内部支持，具备 SSL、暴力破解、恶意软件及 DDoS 防护等高级安全措施，节省成本高达 73%。
ホスティング.comのロゴ 访问页面 
<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面使用“特色图像”
    add_theme_support( 'post-thumbnails' );

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

// 让 WordPress 管理文档标题标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

`add_action()` 將你的函數 my_first_theme_setup 掛載到 WordPress 的 after_setup_theme 這個動作鉤子上，確保它在合適的時機執行。

引入样式和脚本

現代主題應該將樣式表（CSS）和 JavaScript 文件正確地通過 wp_enqueue_style() 以及 wp_enqueue_script() 函數加入隊列，而不是直接在模板文件中寫 `` 或 `` 標籤。這樣做的好處是管理依賴、避免重複加載、並遵循 WordPress 的最佳實踐。

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

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

`get_stylesheet_uri()` 指向你的 style.css 文件，`get_template_directory_uri()` 返回當前主題目錄的 URL。

推荐阅读 入门级 WordPress 主题开发指南：从零开始构建你的自定义主题。

構建頁面佈局與模板部件

一個標準的網頁通常由頁頭、主體內容和頁腳組成。WordPress 鼓勵你將可重用的部分拆分成獨立的文件，然後在主模板中通過特定的函數引入。

拆分模板部件

创建 header.php、footer.php 以及 sidebar.php中。 header.php 中，你需要包含完整的 `` 部分，並以一個明顯的頭部容器（如 `` 標籤）結束。在 footer.php 中，通常以 `` 和 `` 標籤結束。

InterServer 共享主机服务
共享主机每月价格为 $2.50 美元，首月优惠价为 $0.1 美元，优惠码为 tryinterserver，提供 461 个云应用脚本，可一键安装。
InterServer 로고 访问页面

組裝完整頁面

在頁面模板（如 index.php、single.php）中，你可以使用以下函數來引入這些部件：

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    // 这里放置 WordPress 循环
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

`get_header()`、`get_sidebar()` 和 `get_footer()` 會分別加載對應的模板文件。你還可以使用 `get_template_part()` 函數來加載更細粒度的模板部件，例如 `get_template_part( 'template-parts/content', 'page' );` 會嘗試加載 template-parts/content-page.php 文件，如果不存在則加載 template-parts/content.php。這極大地提高了代碼的複用性和可維護性。

总结

從零開始構建一個 WordPress 主題是一個系統性的學習過程。你首先需要建立正確的本地開發環境並理解主題的基礎文件結構。核心在於掌握 WordPress 的模板層次結構，它決定了不同內容如何被渲染。通過 functions.php 文件，你可以爲主題添加強大的功能和特性，並遵循最佳實踐來管理樣式與腳本。最後，通過將頁面拆分爲頁頭、頁腳、側邊欄等模板部件，並使用 WordPress 提供的函數將它們組裝起來，你可以創建出結構清晰、易於維護的主題代碼。遵循這些步驟，你不僅能夠創建出你的第一個主題，更能爲未來開發更復雜、更專業的項目打下堅實的基礎。

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

常见问题解答（FAQ）

開發 WordPress 主題必須掌握 PHP 嗎？

是的，PHP 是 WordPress 的核心編程語言。主題的模板文件（如 index.php、page.php）和功能文件（functions.php）都是 PHP 文件。你需要掌握 PHP 的基礎語法、條件判斷、循環以及函數的使用，才能動態地輸出和操作 WordPress 中的數據。

主題開發中，`page.php` 和 `front-page.php` 有什麼區別？

page.php 用於渲染 WordPress 中創建的單個“頁面”（Page），例如“關於我們”、“聯繫方式”等。而 front-page.php 是專門用於渲染網站“首頁”的模板。在 WordPress 後臺的“設置”->“閱讀”中，如果你選擇“一個靜態頁面”，並將“首頁”設置爲某個頁面，那麼 WordPress 就會優先使用 front-page.php 來顯示這個頁面。如果 front-page.php 不存在，則會使用 page.php。

爲什麼推薦使用 `wp_enqueue_style()` 來加載 CSS，而不是直接在 HTML 中寫 `` 標籤？

使用 wp_enqueue_style() 是 WordPress 官方推薦的方法。它能確保樣式表只被加載一次，即使多個插件或主題部分引用了同一個文件。它可以方便地處理樣式表的依賴關係（例如，你的樣式依賴於某個基礎框架）。此外，它還能與緩存和插件更好地兼容，並允許子主題輕鬆地覆蓋父主題的樣式。

怎样让我的主题支持多语言（国际化）？

讓主題支持多語言主要涉及兩個步驟。首先，在主題的所有文本字符串中，使用 WordPress 的翻譯函數，如 ()、_e() 或者 esc_html()，併爲它們指定在 style.css 中定義的 Text Domain。例如：_e( 'Hello World', 'my-first-theme' )。其次，使用 Poedit 這類工具，掃描你的主題代碼，生成 .pot 模板文件，翻譯人員可以據此創建不同語言的 .po 以及编译后的内容 .mo 文件。將語言文件放在主題的 /languages/ 目錄下，WordPress 會根據網站的語言設置自動加載對應的翻譯。

接下来，我该怎么做呢？

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

延伸阅读与实用知识

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

标签：