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

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

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

準備工作：理解主題結構與基礎檔案

在開始編寫程式碼之前，我們需要理解一個標準WordPress主題的基本構成。一個最簡單的WordPress主題只需要兩個檔案：style.css 以及 index.php。然而，一個功能完善、結構清晰的主題則需要更多特定的模板檔案來定義網站的不同部分。

核心的模板檔案包括：
* index.php：主題的主模板檔案，是網站所有頁面的預設回退模板。
* style.css：主題的主樣式表，它不僅包含CSS規則，其檔案頭部註釋還定義了主題的元資訊，如主題名稱、作者、描述等，這是WordPress識別一個主題的關鍵。
* header.php：網站的頁頭模板，通常包含<head>部分、網站LOGO和主導航選單。
* footer.php：網站的頁尾模板，通常包含版權資訊、Widget區域等。
* functions.php：主題的功能檔案，用於新增主題功能、註冊選單、Widget區域，以及包含其他PHP檔案。

此外，還有用於特定頁面的模板，如 single.php（單篇文章）、page.php（獨立頁面）、archive.php（文章歸檔頁）等。瞭解這些檔案的作用是構建主題的基石。

推荐阅读 WordPress主題開發入門：從零開始構建你的第一款自定義主題。

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

開發環境的搭建同樣重要。你需要一個本地的PHP開發環境（如XAMPP、Local by Flywheel或DevKinsta），一個程式碼編輯器（如VS Code、PhpStorm），並確保你本地安裝的WordPress是最新版本。

建立主題檔案與目錄結構

首先，在你的WordPress安裝目錄下的 wp-content/themes/ 資料夾內，建立一個新的資料夾，並以你的主題名稱命名，例如 my-first-theme。所有主題檔案都將放置在這個資料夾內。

接下來，我們建立第一個也是必須的檔案：style.css。在這個檔案的頂部，你需要新增一段特定的註釋來告訴WordPress這是你的主題。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个用于学习WordPress主题开发的入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

現在，建立第二個必需檔案：index.php。初始階段，我們可以讓它非常簡單，僅僅輸出一個基礎的HTML結構。

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1002>
    <header>
        <h1>欢迎来到我的第一个WordPress主题！</h1>
    </header>
    <main>
        
    </main>
    <footer>
        <p>© 版权所有</p>
    </footer>
    
</body>
</html>

此時，如果你進入WordPress後臺的“外觀”->“主題”，你應該能看到你的“我的第一個主題”並可以啟用它。啟用後訪問網站首頁，你將看到文章內容被包裹在一個非常基礎的HTML頁面中。

推荐阅读 《WordPress主题开发完全指南：从入门到精通》。

hostng.com 共享主机
高效能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候 24 小时专业内部支持，先进的安全措施包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 731 TB/月的带宽成本。
hosting.com标志 访问页面

構建核心模板與功能

為了讓主題結構更清晰，我們需要將index.php拆分成更小的可複用部分。首先，建立 header.php 檔案，將<head>部分和頁頭內容移入。

<!DOCTYPE html>
<html no numeric noise key 1012>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    
</head>
<body no numeric noise key 1009>

<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php
        if ( is_front_page() && is_home() ) :
            ?>
            <h1 class="site-title"><a href="/zh-tw/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"></a></h1>
            <?php
        else :
            ?>
            <p class="site-title"><a href="/zh-tw/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"></a></p>
            <?php
        endif;
        ?>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
                'menu_id'        =&gt; 'primary-menu',
            )
        );
        ?&gt;
    </nav>
</header>

接著，建立 footer.php 文件。

<footer id="colophon" class="site-footer">
    <div class="site-info">
        <p><?php echo esc_html__( '由WordPress驱动', 'my-first-theme' ); ?></p>
    </div>
</footer>

</body>
</html>

現在，我們需要建立主題的“大腦”—— functions.php 檔案。在這裡，我們將設定主題支援的功能、註冊選單位置、新增樣式表和指令碼。

<?php
// 添加主题功能支持
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图（特色图像）
    add_theme_support( 'post-thumbnails' );
    // 注册一个主菜单
    register_nav_menus(
        array(
            'menu-1' => esc_html__( '主导航', 'my-first-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 注册前端样式表
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' );

最後，重構你的 index.php，使用WordPress模板標籤來引入頁頭和頁尾。

<?php get_header(); ?>
<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation();
    else :
        get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

新增樣式與互動功能

現在主題的骨架已經完成，是時候為其新增樣式和互動了。首先，在style.css檔案頭註釋之後，新增一些基礎的CSS來美化你的主題。

InterServer 共享主机
虚拟主机的月费为1TB+5TB，价格为2.50美元。首月优惠价为1TB+5TB，价格为0.1美元。优惠码为"tryinterserver"。平台提供461个云应用脚本，一键安装便捷。
InterServer 标志 访问页面 
/* 基础样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
    margin: 0;
    padding: 20px;
}
.site-header {
    background: #fff;
    padding: 1rem 2rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-navigation ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.main-navigation li {
    margin-left: 1.5rem;
}
.site-main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.site-footer {
    text-align: center;
    padding: 2rem;
    color: #666;
    border-top: 1px solid #eee;
}

為了處理移動端導航，我們可以建立一個簡單的JavaScript檔案。在主題根目錄下建立 /js/navigation.js。

推荐阅读 《WordPress 插件开发完全指南：从零基础到上线发布的实战教程》。

// 简单的移动端菜单切换示例
document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.createElement('button');
    menuToggle.textContent = '菜单';
    menuToggle.classList.add('menu-toggle');
    const primaryMenu = document.querySelector('#primary-menu');
    if (primaryMenu) {
        primaryMenu.parentNode.insertBefore(menuToggle, primaryMenu);
        menuToggle.addEventListener('click', function() {
            primaryMenu.classList.toggle('show');
        });
    }
});

並在CSS中新增對應的樣式：

.menu-toggle {
    display: none;
    background: #007cba;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    .main-navigation ul {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .main-navigation ul.show {
        display: flex;
    }
}

总结

透過以上步驟，我們完成了一個基礎但結構完整的WordPress主題。我們從理解主題的核心檔案開始，逐步建立了style.css以及index.php，然後透過拆分出header.php、footer.php和強大的functions.php檔案，使主題結構變得模組化和可維護。最後，我們添加了基礎樣式和簡單的JavaScript互動來提升使用者體驗。

這個主題具備了現代WordPress主題的基礎特徵：支援標題標籤、特色影象、導航選單，並擁有響應式設計的雛形。以此為起點，你可以繼續探索建立single.php、page.php等更多模板檔案，引入更復雜的CSS框架（如Bootstrap），或者使用WordPress的REST API來構建更動態的前端。主題開發的世界廣闊而有趣，關鍵在於動手實踐和不斷迭代。

常见问题解答（FAQ）

為什麼我的主題在後臺“主題”列表中不顯示？

請首先檢查你的主題資料夾是否放置在正確的路徑：wp-content/themes/。其次，確保style.css檔案頂部的主題資訊註釋塊格式完全正確，特別是“Theme Name:”這一行是必須的。任何拼寫錯誤或格式問題都可能導致WordPress無法識別該主題。

如何為我的主題新增小工具（Widget）區域？

你需要在functions.php文件中使用了register_sidebar()函式來註冊小工具區域。註冊後，你可以在相應的模板檔案（如sidebar.php或者footer.php请将下文翻译成中文，并详细说明翻译过程： （在此处插入用户提供的英文文本）dynamic_sidebar()函式來呼叫它。這是擴充套件主題側邊欄或頁尾功能的標準方法。

函式 get_template_part() 有什麼用？

get_template_part()是一個非常強大的模板標籤，用於在主題中載入可複用的程式碼片段。例如，在迴圈中呼叫get_template_part( 'template-parts/content', get_post_type() );會首先嚐試載入template-parts/content-post.php（假設文章型別是post），如果失敗則載入template-parts/content.php。這極大地提高了程式碼的模組化和可維護性。

開發主題時，如何確保其符合WordPress編碼標準？

WordPress為PHP、HTML、CSS和JavaScript制定了詳細的編碼標準。建議你在程式碼編輯器中安裝相應的 linting 工具（如PHP_CodeSniffer搭配WordPress編碼標準規則、ESLint等）。同時，定期參考WordPress官方手冊中的編碼標準文件，並在團隊開發中強制執行這些標準，以保證程式碼質量和一致性。

下一步，该怎么做呢？

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

延伸阅读与实用知识

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

标签：