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

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

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

準備工作：理解主題結構與基礎文件

在開始編寫代碼之前，我們需要理解一個標準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主題開發完全指南：從入門到精通。

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

延伸阅读与实用知识

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

标签：