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

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

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

要構建一個功能完整的WordPress主題，你需要準備一系列核心文件。這些文件構成了主題的骨架，每個文件都有其特定的作用。

最基本的文件包括：
* `style.css`：主題的樣式表，同時也是主題的“身份證”，包含主題名稱、作者、描述等元信息。
* `index.php`：主題的主模板文件，是默認的首頁和文章列表頁模板。
* `header.php`：網站的頭部模板，通常包含`<head>`部分和網站頂部的導航區域。
* `footer.php`：網站的底部模板，通常包含版權信息、腳本等。
* `functions.php`：主題的功能文件，用於添加自定義功能、註冊菜單、側邊欄等。

讓我們從創建`style.css`文件開始。在文件頂部，你需要添加一個主題信息頭部註釋。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个为学习WordPress主题开发而创建的简单自定义主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

接下來，創建`index.php`文件。在最基礎的版本中，它需要引入頭部和底部，並循環輸出文章。

<main id="main-content">
    
        
            <article id="post-<?php the_ID(); ?>">
                <h2><a href="/zh-hant/</?php the_permalink(); ?>"></a></h2>
                <div class="entry-content">
                    
                </div>
            </article>
        
    
        <p>暂无文章。</p>
    
</main>

`header.php`和`footer.php`文件則分別包含網站通用的頭部和底部HTML結構。`functions.php`文件則用於增強主題功能。

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

理解模板層級與循環

WordPress採用一套智能的模板層級系統來決定如何顯示不同的頁面內容。例如，當訪問一篇單獨的文章時，WordPress會優先尋找`single.php`；訪問一個分類頁面時，會尋找`category.php`；如果這些文件不存在，則會回退到`archive.php`，最終回退到`index.php`。

什麼是主循環

`the loop`是WordPress主題開發的核心概念。它是一段PHP代碼，用於從數據庫中獲取文章內容並將其顯示在網頁上。你在`index.php`中看到的`while ( have_posts() ) : the_post();`就是循環的開始。在循環內部，你可以使用一系列模板標籤來輸出文章信息，如`the_title()`, `the_content()`, `the_permalink()`等。

推荐阅读 WordPress主題開發完全指南：從入門到精通。

創建其他模板文件

爲了讓主題更加專業，你應該創建一些常用的模板文件。例如，創建`single.php`來單獨顯示文章：

<main>
    
        <article>
            <h1></h1>
            <div class="post-meta">
                发布于： | 作者：
            </div>
            <div class="post-content">
                
            </div>
        </article>
        
</main>

同樣，你可以創建`page.php`來定義頁面模板，`archive.php`來定義分類、標籤等存檔頁模板。

集成菜單與側邊欄

一個現代主題通常包含可自定義的導航菜單和側邊欄小工具區域。這些功能需要通過`functions.php`文件來註冊和激活。

註冊導航菜單

在`functions.php`中添加以下代碼，可以爲主題註冊一個菜單位置，例如“主菜單”。

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

註冊後，用戶就可以在WordPress後臺的“外觀”->“菜單”中，將菜單分配到這個位置。接着，在`header.php`中你需要顯示菜單的地方，添加以下代碼來調用這個菜單：

hosting.com 共享主机
高性能配置，搭载 AMD EPYC 处理器、NVMe SSD 存储及 LiteSpeed 技术，提供全天候 24 小时专家内部支持，具备 SSL、暴力破解、恶意软件及 DDoS 防护等高级安全措施，节省成本高达 73%。
ホスティング.comのロゴ 访问页面 
<nav id="site-navigation">
    <?php
    wp_nav_menu( array(
        'theme_location' => 'primary',
        'menu_id'        => 'primary-menu',
    ) );
    ?>
</nav>

添加小工具側邊欄

小工具是WordPress一個非常靈活的功能。要添加一個側邊欄，同樣需要在`functions.php`中註冊一個“小工具區域”。

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

然後，在你希望顯示側邊欄的模板文件（如`sidebar.php`）中，使用`dynamic_sidebar()`函數來輸出它。

<aside id="secondary" class="widget-area">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>

最後，別忘了在`index.php`或`single.php`中通過`get_sidebar();`來引入這個側邊欄文件。

推荐阅读 WordPress主題開發指南：從零開始構建自定義主題。

添加樣式與腳本

爲了保持代碼的整潔和可維護性，不應該直接在HTML中硬編碼樣式和腳本鏈接。正確的方式是通過`functions.php`文件，使用`wp_enqueue_style()`和`wp_enqueue_script()`函數將它們加入隊列。

引入樣式表

雖然`style.css`是必須的，但WordPress並不會自動加載它。你需要顯式地將其加入隊列。通常，我們還會將主樣式表和重置樣式表分開。

InterServer 共享主机服务
共享主机每月价格为 $2.50 美元，首月优惠价为 $0.1 美元，优惠码为 tryinterserver，提供 461 个云应用脚本，可一键安装。
InterServer 로고 访问页面 
function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );

// 引入一个自定义样式表 (假设位于 /assets/css/main.css)
    wp_enqueue_style( 'my-first-theme-main', get_template_directory_uri() . '/assets/css/main.css' );

// 引入一个自定义JavaScript文件 (假设位于 /assets/js/navigation.js)
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

使用現代CSS開發實踐

在2026年的前端開發中，關注響應式設計和可訪問性至關重要。在你的`style.css`或獨立的`main.css`中，應該使用媒體查詢來確保網站在不同設備上都能良好顯示。

/* 基础样式 */
body {
    font-family: sans-serif;
    line-height: 1.6;
}

/* 响应式导航菜单 */
@media screen and (max-width: 768px) {
    #primary-menu {
        display: none;
    }
    /* 移动端菜单样式 */
}

測試與調試

主題開發完成後，測試是必不可少的一環。你需要在不同環境、不同瀏覽器和設備上進行全面測試。

啓用調試模式

在開發過程中，務必開啓WordPress的調試模式。這能幫助你快速發現PHP錯誤、警告和通知。打開`wp-config.php`文件，找到或添加以下代碼：

推荐阅读 2026 年 WordPress 主題開發進階指南：從零到一構建響應式企業網站。

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不在页面上显示错误，更安全

主題單元測試

建議使用官方的WordPress主題單元測試數據來全面測試你的主題。這套數據包含各種類型的文章、頁面、媒體、評論等，可以確保你的主題在遇到各種內容時都能正確顯示，沒有遺漏的樣式或佈局問題。

总结

從創建基礎的`style.css`和`index.php`文件，到理解模板層級和循環，再到註冊菜單、側邊欄以及安全地加入樣式腳本，你已經走過了構建一個基礎但完整的自定義WordPress主題的全過程。記住，主題開發是一個迭代的過程，從最簡版本開始，逐步添加功能和完善細節是最佳實踐。持續學習模板標籤、動作鉤子和過濾器，將使你能夠創建出更強大、更靈活的主題。

常见问题解答（FAQ）

開發WordPress主題需要哪些基礎知識？

你需要掌握HTML、CSS和PHP的基礎知識。對JavaScript有一定的瞭解也會很有幫助，用於添加交互功能。此外，熟悉WordPress的基本概念，如文章、頁面、分類、標籤、小工具和菜單，是必不可少的。

爲什麼我的主題修改在後臺不生效？

這通常是由於瀏覽器緩存或WordPress緩存導致的。請先嚐試強制刷新瀏覽器（Ctrl + F5 或 Cmd + Shift + R）。如果問題依舊，請檢查你是否正確地將樣式和腳本加入了隊列，並確保`functions.php`文件沒有語法錯誤。在極少數情況下，可能需要清除服務器或插件的緩存。

如何讓我的主題支持多語言？

你需要做好主題的“國際化”準備。這意味着在代碼中所有需要翻譯的文本，都應使用翻譯函數（如`__()`， `_e()`）進行包裝，併爲`text-domain`設置一個唯一標識（在`style.css`的頭部已定義）。然後，你可以使用如Poedit這樣的工具創建`.po`和`.mo`翻譯文件，使你的主題能夠被輕鬆翻譯成其他語言。

自定義主題和子主題有什麼區別？

自定義主題是從零開始獨立開發的全新主題。而子主題則基於一個現有的“父主題”，它繼承父主題的所有功能、樣式和模板文件。子主題允許你只修改或添加需要的部分（通常是樣式和少數模板文件），而無需改動父主題。這在對流行主題進行定製或升級時，能確保你的修改不會被覆蓋，是一種更安全、更高效的做法。

接下来，我该怎么做呢？

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

延伸阅读与实用知识

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

标签：