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

WordPress主題開發入門指南：從零開始構建自己的主題

3 分钟阅读时间
2026-03-17
2026-06-04
1,980
通过下方链接进行购物时，您无需支付额外费用，我就能获得佣金。.

WordPress主題開發入門指南：從零開始構建自己的主題

什麼是WordPress主題及其核心結構

WordPress主題不僅僅是網站的外觀，它是一系列檔案的集合，這些檔案共同工作，為您的網站內容提供視覺呈現和互動功能。一個主題定義了網站的整體佈局、顏色、字型和樣式，同時透過模板檔案控制不同型別內容的顯示方式。理解主題的構成是開發的第一步。

一個標準的WordPress主題至少包含兩個核心檔案：style.css以及index.php。style.css檔案不僅包含主題的樣式表，更重要的是其頂部的註釋塊，這是WordPress識別一個主題的關鍵。這個註釋塊必須包含主題名稱、作者、描述、版本等元資訊。而index.php是主題的預設模板檔案，當沒有其他更具體的模板匹配時，WordPress就會使用它來渲染頁面。

推荐阅读 零基础入门：掌握现代 WordPress 主题开发的核心流程与最佳实践。

除了這兩個必需檔案，一個功能完整的主題通常還包括其他模板檔案，例如用於顯示單篇文章的single.php，用於展示文章列表的archive.php，以及用於顯示頁面的page.php。主題還可以包含一個functions.php檔案，用於新增主題特有的功能、註冊選單、側邊欄等，而header.php以及footer.php則用於將網站的頭部和頁尾程式碼模組化，便於維護和重用。

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

建立你的第一個基礎主題

建立主題目錄和核心檔案

首先，在WordPress安裝目錄的wp-content/themes/路徑下建立一個新的資料夾，作為你的主題目錄。資料夾名稱應使用小寫字母、數字和連字元，且不能有空格。例如，我們可以建立一個名為my-first-theme的資料夾。

接下來，在該資料夾中建立style.css檔案，並在檔案開頭新增必要的主題資訊註釋。這是主題的“身份證”。

/*
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
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

构建基础模板文件

緊接著，建立index.php檔案。這是最基礎的模板，我們將從最簡單的HTML結構開始，並嵌入關鍵的WordPress函式來動態載入內容。一個極簡的index.php可以如下所示：

<!DOCTYPE html>
<html no numeric noise key 1011>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1008>
    
    <header>
        <h1><a href="/zh-tw/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
        <p></p>
    </header>

    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_title( '<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无内容。</p>';
        endif;
        ?>
    </main>

    <footer>
        <p>©</p>
    </footer>
    
</body>
</html>

這個檔案使用了多個核心WordPress函式：wp_head()以及wp_footer()用於讓WordPress核心、外掛等向頁面頭部和底部注入程式碼（如樣式、指令碼）；the_post()以及the_content()用於在迴圈中輸出文章資料。現在，將這個主題資料夾上傳到伺服器，你就可以在WordPress後臺的“外觀”->“主題”中看到並啟用它了。

推荐阅读 网站建设全流程指南：从零搭建专业网站的完整步骤解析。

使用模板層級和模板標籤

理解模板層級系統

WordPress採用一套精密的模板層級（Template Hierarchy）系統來決定對於任何一個特定的頁面請求，應該使用哪個模板檔案來渲染。這套系統基於從最具體到最通用的原則進行匹配。例如，當訪問一篇ID為123的文章時，WordPress會按順序尋找：single-post-123.php -> single-post.php -> single.php -> singular.php -> index.php。開發者可以利用這個特性，透過建立更具體的模板檔案來精確控制不同內容的顯示。

掌握常用模板標籤

模板標籤（Template Tags）是WordPress內建的PHP函式，用於在主題模板中動態輸出各種資料。它們是主題開發的核心工具。除了上面例子中用到的the_title()以及the_content()，還有大量其他標籤。

例如，the_permalink()用於輸出當前文章的固定連結；the_post_thumbnail()用於輸出文章的特色影象；the_category()用於輸出文章所屬的分類列表。條件判斷標籤也至關重要，如is_home()、is_single()、is_page()、is_category()等，它們允許你根據當前頁面的型別執行不同的程式碼邏輯。

hostng.com 共享主机
高效能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候 24 小时专业内部支持，先进的安全措施包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 731 TB/月的带宽成本。
hosting.com标志 访问页面 
<div class="post-meta">
        发布于：<?php the_date(); ?> | 分类：<?php the_category( ', ' ); ?>
    </div>

這段程式碼只在單篇文章頁面顯示文章的釋出日期和分類資訊。

增強主題功能與自定義

新增主題功能檔案

functions.php檔案是你的主題的“工具箱”。在這裡新增的程式碼會隨著主題的啟用而生效。它的一個常見用途是註冊主題支援的功能，例如文章特色影象、自定義選單位置和自定義背景。

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );

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

    // 支持HTML5的标记格式
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

    // 为文章摘要添加更多标签支持
    add_filter( 'excerpt_more', 'my_first_theme_excerpt_more' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

function my_first_theme_excerpt_more( $more ) {
    return '...';
}
?>

引入樣式表和指令碼

為了保持程式碼的整潔和遵循最佳實踐，應該將樣式表（CSS）和JavaScript檔案透過functions.php檔案進行排隊載入，而不是直接在模板檔案中使用或標籤。這確保了依賴關係被正確處理，並避免重複載入。

推荐阅读 WordPress主題開發完整指南：從零到一構建自定義主題實戰教程。

使用 （注：此处"使用"指的是某种产品或服务的使用情况）wp_enqueue_style()函式來載入你的主樣式表，通常我們會將style.css作為依賴項。對於指令碼，使用wp_enqueue_script()函数。

function my_first_theme_scripts() {
    // 加载主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );

    // 加载一个自定义的JavaScript文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

总结

WordPress主題開發是一個將創意、設計和技術結合的過程。透過理解主題的核心檔案結構，特別是style.css以及index.php，你已經邁出了堅實的第一步。掌握模板層級系統使你能夠為網站的不同部分建立精確的展示邏輯，而靈活運用模板標籤則能動態地輸出所有內容。透過functions.php檔案，你可以安全地為主題新增各種功能和支援，並以標準化的方式管理資源。從這個簡單的基礎開始，你可以逐步探索更高階的主題，如建立子主題、使用Walker類定製導航選單、整合Customizer API進行實時預覽設定，甚至是利用塊編輯器（Gutenberg）開發模式構建全站編輯（FSE）主題。持續實踐，參考官方文件和優秀主題的程式碼，是提升開發技能的最佳途徑。

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

常见问题解答（FAQ）

開發WordPress主題需要哪些技術基礎？

開發WordPress主題需要掌握HTML、CSS和PHP的基礎知識。HTML用於構建頁面結構，CSS用於控制樣式和佈局，而PHP是WordPress的核心程式語言，用於處理邏輯、呼叫資料和生成動態內容。對JavaScript有基本瞭解也會對新增互動功能有所幫助。

如何在我的本地電腦上測試主題開發？

強烈建議先在本地環境中進行主題開發。你可以使用本地伺服器軟體包，如XAMPP、MAMP、Local by Flywheel或Laragon。這些工具可以在你的電腦上快速搭建一個包含Apache、MySQL和PHP的WordPress執行環境，讓你在不影響線上網站的情況下進行開發和除錯。

主题的 functions.php 文件和插件有什么区别？

functions.php檔案中的功能只在當前啟用的主題下生效。如果你切換了主題，這些功能將不再可用。而外掛提供的功能獨立於主題，無論切換哪個主題，只要外掛處於啟用狀態，其功能就會保持。一般來說，與網站視覺呈現和佈局緊密相關的功能放在主題的functions.php中，而提供獨立、通用功能（如聯絡表單、SEO最佳化、快取）的程式碼則更適合做成外掛。

什麼是子主題，為什麼要使用它？

子主題是一個依賴於另一個主題（稱為父主題）的主題。它允許你修改或擴充套件父主題的功能和樣式，而無需直接修改父主題的檔案。這最大的好處是當父主題更新時，你對樣式和功能的定製（位於子主題中）不會丟失。要建立子主題，只需在它的style.css檔案中使用“Template:”宣告來指定父主題的目錄名，然後你可以只建立需要覆蓋的模板檔案或新增新的功能。

下一步，该怎么做呢？

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

延伸阅读与实用知识

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

标签：