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

WordPress主題開發終極指南：從零到一構建你的第一個定製主題

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

准备工作与环境搭建

在開始編寫代碼之前，一個穩定且高效的本地開發環境至關重要。這不僅能讓你離線工作，還能避免在線上服務器直接操作帶來的風險。首先，你需要安裝一個本地服務器環境，例如 XAMPP、MAMP 或更專業的 Local by Flywheel。這些工具會爲你配置好 Apache、MySQL 和 PHP，這是運行 WordPress 的基石。

接下來，你需要下載最新的 WordPress 核心文件，並將其安裝到本地服務器中。完成基礎安裝後，就可以着手創建你的主題目錄了。所有 WordPress 主題都位於 /wp-content/themes/ 目錄下。請在此處創建一個新的文件夾，例如 my-first-theme。這個文件夾的名稱就是你的主題標識。

一個有效的 WordPress 主題至少需要兩個核心文件：style.css 以及 index.php。style.css 文件不僅是樣式表，更是一個主題的“身份證”，其文件頭註釋包含了主題的所有元信息。

推荐阅读 打造專業網站：從零開始開發一個自定義WordPress主題的完整指南。

主題樣式表文件頭信息

style.css 文件的開頭必須包含一段特定的 CSS 註釋，用於向 WordPress 描述你的主題。這些信息會顯示在後臺的“外觀”->“主題”管理頁面中。

UltaHost WordPress 主機
30天退款保證，無限帶寬與數據庫，免費的 DDoS 防護，購買3年優惠50%
UltaHost LOGO 访问页面 
/*
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 用於國際化，應與你的主題文件夾名稱保持一致。而 index.php 是主題的默認模板文件，是所有頁面的後備模板。最初，它可以只是一個簡單的 HTML 結構，用於測試主題是否被 WordPress 正確識別。

理解模板層級與創建核心模板

WordPress 使用一套名爲“模板層級”的智能系統來決定爲特定的頁面請求加載哪個模板文件。理解這套規則是主題開發的核心。簡單來說，當用戶訪問一個頁面時，WordPress 會按照從最具體到最通用的順序尋找對應的模板文件。

例如，當訪問一篇 ID 爲 5 的博客文章時，WordPress 會依次尋找：single-post-5.php -> single-post.php -> single.php -> singular.php -> 最後纔是 index.php。如果找到了匹配的文件，就會使用它；否則，會繼續向下尋找。

创建文章单页模板

single.php 是用於顯示單篇博客文章的標準模板。在這個文件中，你將使用一系列 WordPress 核心的模板標籤和函數來輸出文章內容。

推荐阅读 入门级WordPress主题开发：从零到一搭建你的第一个主题。

<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1008>
            <header class="entry-header">
                <h1 class="entry-title"></h1>
                <div class="entry-meta">
                    发布于： | 作者：
                </div>
            </header>
            <div class="entry-content">
                
            </div>
            <footer class="entry-footer">
                &lt;?php the_tags(&#039;标签：&#039;, &#039;, &#039;, &#039;<br>'); ?&gt;
            </footer>
        </article>
        <?php
        // 输出上一篇、下一篇文章导航
        the_post_navigation();
    endwhile;
    ?>
</main>

這個模板使用了 the_post() 來設置全局 $post 變量，然後通過 the_title()、the_content() 等函數輸出文章數據。同時，它引入了模板部件：get_header(), get_sidebar(), get_footer()。

創建頁面模板

page.php 模板用於顯示靜態頁面。它的結構與 single.php 類似，但通常不包含分類、標籤等典型的文章元數據。你可以根據需要創建更多特定頁面模板，例如爲“關於我們”頁面創建一個名爲 page-about.php 的文件，WordPress 會自動將其應用於標題或別名（slug）爲“about”的頁面。

集成模板部件與導航菜單

爲了保持代碼的模塊化和可重用性，WordPress 主題通常將頁頭、頁腳、側邊欄等部分拆分爲獨立的“模板部件”文件。通過使用 get_template_part() 函數，你可以在不同模板中輕鬆引入這些部件。

hosting.com 共享主机
高性能配置，搭载 AMD EPYC 处理器、NVMe SSD 存储及 LiteSpeed 技术，提供全天候 24 小时专家内部支持，具备 SSL、暴力破解、恶意软件及 DDoS 防护等高级安全措施，节省成本高达 73%。
ホスティング.comのロゴ 访问页面

構建主題的頭部文件

header.php 文件包含了 HTML 文檔的頭部（ 區域）以及網站頂部的可視部分，如 logo 和主導航。

<!DOCTYPE html>
<html no numeric noise key 1010>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1007>

<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php
        if ( has_custom_logo() ) {
            the_custom_logo();
        } else {
            ?>
            <h1 class="site-title"><a href="/zh-hant/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
            <p class="site-description"></p>
            <?php
        }
        ?>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-primary',
                'menu_id'        =&gt; 'primary-menu',
                'container'      =&gt; false,
            )
        );
        ?&gt;
    </nav>
</header>

關鍵函數 wp_head() 允許 WordPress 核心、插件和其他腳本向頁面頭部添加必要的代碼（如 CSS、JS 鏈接）。wp_nav_menu() 函數用於輸出一個已註冊的導航菜單。

註冊導航菜單位置

導航菜單需要先在主題中“註冊”位置，用戶才能在後臺的“外觀”->“菜單”中分配菜單。這通常在主題的 functions.php 文件中完成。

推荐阅读 從零開始學習WordPress主題開發：打造個性化網站的完整指南。

function my_first_theme_setup() {
    // 注册一个主导航菜单
    register_nav_menus(
        array(
            'menu-primary' => esc_html__( '主导航', 'my-first-theme' ),
            'menu-footer'  => esc_html__( '页脚导航', 'my-first-theme' ),
        )
    );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
    // 支持文章和评论的 RSS feed 链接
    add_theme_support( 'automatic-feed-links' );
    // 支持标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() 函數註冊了兩個菜單位置。通過 add_theme_support() 函數，我們啓用了自定義 Logo、標題標籤等特性，這是現代 WordPress 主題開發的標準做法。

主題功能與樣式進階

functions.php 文件是你的主題“控制中心”，用於添加功能、修改默認行爲、加載腳本和樣式表。它與插件的作用類似，但專門作用於你的主題。

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

安全地引入樣式與腳本

正確的樣式和腳本加載方式是使用 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' );

這種方式確保了依賴關係正確，並且避免了重複加載。函數 get_stylesheet_uri() 返回主 style.css 的 URL，而 get_template_directory_uri() 返回主題目錄的 URL。

創建側邊欄小工具區域

小工具區域（Sidebar）允許用戶通過後臺拖拽的方式自定義內容區塊。註冊一個小工具區域同樣在 functions.php 中完成。

function my_first_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          =&gt; esc_html__( '主侧边栏', 'my-first-theme' ),
            'id'            =&gt; 'sidebar-1',
            'description'   =&gt; esc_html__( '在此添加小工具。', 'my-first-theme' ),
            'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
            'after_widget'  => '</section>',
            'before_title'  => '<h2 class="widget-title">',
            'after_title'   => '</h2>',
        )
    );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

註冊後，你就可以在 sidebar.php 模板部件中使用 dynamic_sidebar( 'sidebar-1' ) 函數來輸出這個區域了。

总结

本指南系統地介紹了 WordPress 主題開發的核心流程。從搭建本地開發環境、創建基本主題文件，到理解並實現 WordPress 強大的模板層級系統，再到集成模板部件、註冊導航菜單和小工具區域，並最終在 functions.php 中安全地擴展主題功能。遵循這些步驟，你已經成功構建了一個結構清晰、功能完整且符合 WordPress 編碼標準的自定義主題。這爲你日後開發更復雜、功能更豐富的主題奠定了堅實的基礎。記住，主題開發是一個持續學習的過程，不斷實踐並參考官方文檔是提升技能的關鍵。

常见问题解答（FAQ）

### 什麼是 WordPress 模板層級？
模板層級是 WordPress 用來決定不同類型頁面使用哪個模板文件的一套規則。它是一個從具體到通用的查找順序。例如，對於一篇特定的文章，WordPress 會優先尋找與該文章ID或文章類型匹配的特定模板，如果找不到，則逐級回退到更通用的模板，直到最後的 index.php。理解層級關係對於創建結構正確的主題至關重要。

爲什麼必須使用 wp_enqueue_style 來加載樣式？

使用 wp_enqueue_style() 以及 wp_enqueue_script() 是 WordPress 官方推薦的、標準化的資源加載方式。它能正確處理依賴關係（例如確保 jQuery 在自定義腳本之前加載），避免同一資源被重複加載，並且與緩存插件、子主題等生態系統良好兼容。直接在模板文件中使用 或者 標籤是一種不推薦的做法。

functions.php 文件與插件有什麼區別？

functions.php 文件是主題的一部分，其功能隨主題的激活而激活，隨主題的切換而失效。它主要用於添加與該主題視覺表現和功能緊密相關的特性。而插件提供的功能通常獨立於主題，即使更換主題，插件功能依然存在。一般來說，如果某個功能與主題的樣式或佈局強相關，可以放在 functions.php；如果它是通用功能，則更適合做成插件。

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

讓主題支持多語言，即國際化（i18n），主要涉及以下幾個步驟：首先，在 style.css 的頭部和所有 load_theme_textdomain() 調用中正確設置 Text Domain。其次，在 functions.php 中調用 load_theme_textdomain() 函數來指定語言文件目錄。最後，也是最關鍵的一步，在主題的所有 PHP 模板文件和 functions.php 中，對所有面向用戶的字符串使用 WordPress 的翻譯函數進行包裝，例如 esc_html__( ‘文本’, ‘my-first-theme’ ) 或者 _e( ‘文本’, ‘my-first-theme’ )。完成後，可以使用 Poedit 等工具生成 .pot 模板文件，供翻譯人員創建不同語言的 .po 以及 .mo 文件。

接下来，我该怎么做呢？

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

延伸阅读与实用知识

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

标签：