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

WordPress 主题开发入门指南：从零开始构建自己的主题

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

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-hant/</?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()等，它們允許你根據當前頁面的類型執行不同的代碼邏輯。

hosting.com 共享主机
高性能配置，搭载 AMD EPYC 处理器、NVMe SSD 存储及 LiteSpeed 技术，提供全天候 24 小时专家内部支持，具备 SSL、暴力破解、恶意软件及 DDoS 防护等高级安全措施，节省成本高达 73%。
ホスティング.comのロゴ 访问页面 
<?php if ( is_single() ) : ?>
    <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 共享主机服务
共享主机每月价格为 $2.50 美元，首月优惠价为 $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网站，建议接下来继续阅读关于性能优化、插件配置和主题定制的相关内容。

延伸阅读与实用知识

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

标签：