主页/知识/WordPress/Content Details

入门 WordPress 主题开发：从零到一搭建你的第一个主题

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

準備工作與環境搭建

在開始編寫任何代碼之前，你需要一個合適的開發環境。這包括一個本地服務器環境（例如XAMPP、Local by Flywheel或MAMP）以及一個代碼編輯器（如VS Code、Sublime Text或PHPStorm）。確保你的本地環境已安裝好PHP、MySQL和Apache/Nginx。

接下來，你需要在本地服務器的wp-content/themes/目錄下創建一個新的文件夾。這個文件夾的名稱就是你的主題名，例如my-first-theme。這是你所有主題文件的“家”。

一個最基礎的WordPress主題只需要兩個文件：style.css以及index.php其中,style.css不僅是樣式表，更是一個主題的“身份證”，它頂部的註釋塊包含了主題的元信息。讓我們先創建這個文件。

推荐阅读 零基础学习WordPress主题开发：打造个性化网站的完整指南。

創建主題信息頭文件

style.css文件頂部的註釋塊是WordPress識別一個主題的關鍵。請在你的主題文件夾中創建style.css，並寫入以下內容：

UltaHost WordPress 主機
30天退款保證，無限帶寬與數據庫，免費的 DDoS 防護，購買3年優惠50%
UltaHost LOGO 访问页面 
/*
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
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

這些信息會顯示在WordPress後台的“外觀”->“主題”頁面中。Text Domain用於國際化，是後續加載翻譯文件的關鍵標識符。

創建基礎索引模板

接下來，創建主題的核心文件index.php。即使這個文件暫時只有一行代碼，它也能讓WordPress識別並激活你的主題。

<h1>Hello, WordPress Theme World!</h1>

get_header()以及get_footer()是WordPress的模板函數，它們會嘗試加載名為header.php以及footer.php的文件。雖然我們還沒創建它們，但先這樣寫是標準的做法。現在，你可以進入WordPress後台，在“外觀”->“主題”中找到並激活“My First Theme”了。刷新網站首頁，你將看到“Hello, WordPress Theme World!”這句話。

理解模板層級與創建核心文件

WordPress使用一套稱為“模板層級”的規則來決定針對不同的頁面請求（如首頁、文章頁、分類頁）該使用哪個模板文件來呈現內容。理解這個機制是高效開發主題的基礎。

推荐阅读 WordPress主題開發入門：一步步創建你的第一個自定義主題。

最通用的模板是index.php，它是所有頁面的最終備選。但為了更精細地控制不同頁面的外觀，我們應該創建更具體的模板文件。首先，我們來創建三個最基礎且重要的文件：header.php、footer.php以及functions.php。

構建網站頭部模板

header.php文件通常包含HTML文檔的頭部（<head>）和網站頂部的公共區域，如Logo和導航菜單。創建一個header.php文件：

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1004>
    <header id="site-header">
        <div class="container">
            <h1><a href="/zh-hk/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
            <p></p>
            <nav>
                'primary',
                    'menu_id'        =&gt; 'primary-menu',
                ) );
                ?&gt;
            </nav>
        </div>
    </header>
    <main id="main-content">

這裏有幾個關鍵函數：wp_head()鈎子允許WordPress核心、插件和主題自己向<head>區域插入必要的代碼（如樣式錶鏈接）；body_class()會輸出一系列CSS類名，方便你根據不同的頁面進行樣式控制；wp_nav_menu()用於顯示一個導航菜單。

hosting.com 共享主机
高性能配置，搭载 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed 技术，提供全天候 24 小时专业内部支持，具备 SSL、暴力破解、恶意软件及 DDoS 防护等高级安全措施，节省成本高达 73%。
hosting.com 标志 访问页面

構建網站底部模板

footer.php文件通常包含網站的公共底部區域，如版權信息，並關閉在header.php中打開的標籤。創建footer.php：

    </main><!-- #main-content -->
    <footer id="site-footer">
        <div class="container">
            <p>© <?php echo date('Y'); ?> <?php bloginfo( 'name' ); ?>. All rights reserved.</p>
        </div>
    </footer>
    
</body>
</html>

wp_footer()與wp_head()類似，是一個重要的鈎子，用於在</body>標籤前插入腳本或代碼。

現在，回到你的index.php，將其更新為使用我們新建的頭部和底部文件：

推荐阅读 如何選擇與訂製SEO友好的WordPress主題。

<article>
        <h2></h2>
        <div></div>
    </article>

    <p></p>

這段代碼構成了WordPress主題的核心循環（The Loop），它會檢查當前頁面是否有文章，然後循環輸出每篇文章的標題和內容。

通過函數文件增強主題功能

functions.php是你的主題的“控制中心”。它不是一個模板文件，而是一個在主題初始化時自動加載的PHP文件。你可以在這裏添加主題支持功能、註冊菜單位置、排隊樣式表和腳本等。創建functions.php：

InterServer 共享主机
虚拟主机每月价格为 1TB + 5TB，费用为 2.50 美元，首月优惠价为 1TB + 5TB，价格为 0.1 美元。优惠码为 "tryinterserver"，支持一键安装 461 款云应用脚本。
InterServer 标志 访问页面 
<?php
/**
 * My First Theme 的功能函数文件
 */

// 主题基础设置
if ( ! function_exists( 'my_first_theme_setup' ) ) :
    function my_first_theme_setup() {
        // 让WordPress管理文档标题
        add_theme_support( 'title-tag' );
        // 启用文章和页面的特色图片功能
        add_theme_support( 'post-thumbnails' );
        // 注册一个主导航菜单
        register_nav_menus( array(
            'primary' => esc_html__( 'Primary Menu', 'my-first-theme' ),
        ) );
        // 为文章摘录添加HTML支持
        add_filter( 'excerpt_more', 'my_first_theme_excerpt_more' );
    }
endif;
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 修改摘录末尾的“更多”链接样式
function my_first_theme_excerpt_more( $more ) {
    return '...';
}

// 注册并加载样式表
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载一个自定义样式表
    wp_enqueue_style( 'my-first-theme-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

這個函數文件做了幾件重要的事情：1) 通過add_theme_support()啓用了現代WordPress主題常用的功能；2) 通過register_nav_menus()註冊了一個菜單位置，這樣我們之前在header.php中調用的primary菜單就能在後台“外觀”->“菜單”中被分配了；3) 使用wp_enqueue_style()函數正確地、以依賴安全的方式將樣式表加入隊列。

創建獨立文章模板

為了讓單篇文章有更好的展示效果，我們可以創建一個專門的模板文件single.php。根據模板層級，當訪問一篇單獨的文章時，WordPress會優先使用single.php，而不是index.php。

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
    <header class="entry-header">
        &lt;?php the_title( &#039;<h1 class="entry-title">', '</h1>' ); ?&gt;
        <div class="entry-meta">
            <?php 
            printf( 
                esc_html__( '发布于 %s', 'my-first-theme' ), 
                get_the_date() 
            );
            ?>
        </div>
        
            <div class="post-thumbnail">
                
            </div>
        
    </header>
    <div class="entry-content">
        
    </div>
</article>

這個模板更詳細地展示了文章信息，如發佈日期和特色圖像（如果設置了的話）。post_class()函數會輸出針對文章類型的CSS類。

添加基礎樣式與響應式設計

現在，你的主題已經有了骨架和基礎功能，是時候讓它變得美觀了。我們將向style.css中添加一些基礎CSS，並確保它具備響應式設計。

在你的style.css文件（主題信息頭下方）添加以下樣式：

/* 基础重置与排版 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 头部样式 */
#site-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
}
#site-header h1 a {
    color: #333;
    text-decoration: none;
}

/* 导航菜单 */
#primary-menu {
    display: flex;
    list-style: none;
}
#primary-menu li {
    margin-right: 1rem;
}
#primary-menu a {
    text-decoration: none;
    color: #555;
}

/* 主内容区 */
#main-content {
    padding: 2rem 0;
}
article {
    background: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 底部样式 */
#site-footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    #primary-menu {
        flex-direction: column;
    }
    #primary-menu li {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    article {
        padding: 1rem;
    }
}

這些樣式提供了清晰、現代的視覺效果，並在小屏幕設備上提供了基本的響應式佈局。你可以創建/assets/css/custom.css文件來存放更多自定義樣式，它已經在functions.php中被排隊加載了。

总结

通過本文的步驟，你已經從一個空文件夾開始，成功構建了一個功能完整、結構清晰的WordPress主題。你瞭解了主題開發的最基本文件style.css以及index.php，學習了模板層級的概念，並創建了header.php、footer.php、single.php等核心模板文件。你還通過functions.php文件為你的主題添加了功能支持和資源管理能力，最後通過CSS賦予了它視覺生命。

這只是一個起點。接下來，你可以探索創建更多模板文件（如page.php、archive.php、404.php），深入學習WordPress的鈎子（Hooks）和動作（Actions）/過濾器（Filters）系統，並研究如何使你的主題支持小部件（Widgets）和自定義器（Customizer）。不斷實踐和探索，你將成為一名成熟的WordPress主題開發者。

常见问题解答（FAQ）

如何修改主題的Logo？

关于header.php文件中，找到顯示網站標題的代碼行。你可以用一個`

`標籤替換bloginfo( ‘name’ )，並鏈接到你的Logo圖片。更專業的做法是在functions.php请将下文翻译成中文，并详细说明翻译过程：add_theme_support( ‘custom-logo’ )來支持WordPress自定義器中的Logo上傳功能。

為什麼我的導航菜單不顯示？

首先，請確保你已經在functions.php通过了考试。register_nav_menus()註冊了菜單位置（例如primary）。然後，你需要登錄WordPress後台，進入“外觀” -> “菜單”頁面。創建一個新菜單，選擇好菜單項，並在“顯示位置”區域勾選你註冊的菜單位置（如“Primary Menu”），最後保存菜單。

如何為主題添加側邊欄？

首先，在……方面，我们应该采取以下措施：首先，……；其次，……；最后，……。functions.php请将下文翻译成中文，并详细说明翻译过程：register_sidebar()函數註冊一個側邊欄小部件區域。然後，在你希望顯示側邊欄的模板文件（如index.php或者single.php在（文档名称）中，使用了以下技术术语：dynamic_sidebar()函數調用這個區域。同時，你需要創建sidebar.php文件來定義側邊欄的具體HTML結構。

functions.php文件中的操作必須用鈎子掛載嗎？

是的，在大多數情況下，為了確保代碼在正確的時機執行，你應該將功能代碼包裝在函數內，並通過特定的鈎子（如after_setup_theme、wp_enqueue_scripts）掛載。直接寫在functions.php全局範圍內的代碼可能會在不恰當的時機執行或導致錯誤。

接下来，我该怎么做呢？

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

延伸阅读与实用知识

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

标签：