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

入门级 WordPress 主题开发指南：从零开始搭建你的第一个自定义主题

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

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

最基本的檔案包括：
* `style.css`：主題的樣式表，同時也是主題的“身份證”，包含主題名稱、作者、描述等元資訊。
* `index.php`：主題的主模板檔案，是預設的首頁和文章列表頁模板。
* `header.php`：網站的頭部模板，通常包含``部分和網站頂部的導航區域。
* `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-tw/</?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">
                发布于：<?php the_date(); ?> | 作者：<?php the_author(); ?>
            </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`中你需要顯示選單的地方，新增以下程式碼來呼叫這個選單：

hostng.com 共享主机
高效能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候 24 小时专业内部支持，先进的安全措施包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 731 TB/月的带宽成本。
hosting.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'          => __( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加小工具。', 'my-first-theme' ),
        'before_widget' => '<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 共享主机
虚拟主机的月费为1TB+5TB，价格为2.50美元。首月优惠价为1TB+5TB，价格为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网站，建议你继续阅读关于性能优化、插件配置和主题定制的相关内容。

延伸阅读与实用知识

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

标签：