主頁/知識/WordPress/內容詳情

WordPress主題開發入門指南：由零開始建立你嘅第一個自訂主題

2分鐘閱讀
2026-03-19
2026-06-04
2,752
當你透過以下連結購物,我會獲得佣金,對你嚟講冇額外成本。.

以WordPress主題開發為起點，即係話你唔再局限於用現成嘅主題，而係可以根據特定需求，創建獨一無二嘅網站外觀同功能。呢個指南會帶你完成構建一個基礎但功能完整嘅自訂主題所需嘅核心步驟，涵蓋由環境準備到模板文件組織嘅全過程。

WordPress主題嘅基本結構同檔案

一個最簡單嘅WordPress主題，只需要兩個檔案就可以喺後台被識別。理解呢啲核心檔案嘅作用係開發嘅第一步。

主題嘅樣式同資訊定義檔案

第一個必需嘅文件係style.css。佢唔單止係主題嘅樣式表，更加係一個「信息頭文件」，佢頂部嘅註釋區塊定義咗主題嘅元數據。冇呢啲信息，WordPress就冇辦法識別到你嘅主題。

推薦閱讀 由入門到精通：打造專業級WordPress主題嘅完整開發指南。

/*
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
*/

喺註釋區塊下面，你可以好似寫普通CSS咁樣加入樣式規則。

UltaHost WordPress 主機
30日退款保證，無限頻寬同數據庫，免費DDoS防護，買3年優惠50%
UltaHost 標誌 瀏覽該頁面

主題嘅核心索引模板

第二個必需嘅檔案係index.php。佢係主題嘅默認模板檔案，當WordPress搵唔到更具體嘅模板（例如single.php或page.php）嗰陣，就會用佢嚟渲染頁面。一個最簡單嘅index.php可以只包含調用博客文章嘅循環。

除咗呢兩個文件，一個功能健全嘅主題通常仲包括：header.php（頁頭）、footer.php（頁腳）、functions.php（功能函數）、single.php（文章頁）同埋page.php（頁面）等。

搭建本地開發環境

在开始编码前，建立一个本地开发环境至关重要。这允许你在不影响线上网站的情况下进行测试和调试。

使用本地服务器软件

推荐使用集成的本地服务器软件包，如Local by Flywheel、XAMPP或MAMP。这些工具一键式安装Apache/Nginx、PHP和MySQL，并提供了直观的管理界面。例如，Local by Flywheel 专门为WordPress优化，可以快速创建站点并配置SSL证书。

推薦閱讀 WordPress插件開發完全指南：從零開始構建專業擴展。

安装WordPress与代码编辑器

在本地服务器环境中，下载最新的WordPress安装包，按照指引完成安装。同时，你需要一个高效的代码编辑器。Visual Studio Code是一个绝佳的选择，它拥有丰富的扩展，如PHP Intelephense（代码智能提示）、WordPress Snippet（代码片段）和Live Server（实时预览），能极大提升开发效率。

将你的主题文件夹（例如命名为“my-first-theme”）放置在WordPress安装目录下的/wp-content/themes/中，并放入style.css同埋index.php，即可在WordPress后台的“外观”->“主题”中看到并启用它。

構建主題嘅核心模板檔案

主题通过一系列模板文件来组织不同页面的显示逻辑。理解模板层次结构是构建主题的关键。

hosting.com 共享主機
高效能,配備 AMD EPYC 處理器、NVMe SSD 儲存同 LiteSpeed,提供全天候專業內部支援,採用先進安全措施,包括 SSL、暴力破解、惡意軟件同 DDoS 防護,可節省高達 73%。
hosting.com 標誌 瀏覽該頁面

創建頁頭同頁腳模板

通常，我们会将网站头部和尾部的内容分离到独立的文件中，以便复用。创建header.php文件，其中应包含HTML文档头、区（调用wp_head()函数）以及网站顶部的公共部分（如Logo和导航菜单）。

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1002>
    <header id="masthead">
        <h1><a href="/yue/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    </header>

同樣地，建立footer.php，包含页脚内容并调用wp_footer()函数。然后在index.php入面，用get_header()同埋get_footer()函數嚟引入佢哋。

實現文章循環同內容顯示

WordPress的核心是“循环”（The Loop），它用于检查是否有文章，并在有文章时依次处理每篇文章。在index.php中，一个基础的循环结构如下：

推薦閱讀 點樣開發一款自訂化WordPress主題：由入門到精通指南。

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>">
            <h2><a href="/yue/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
    &lt;?php endwhile;
else :
    echo &#039;<p>暂无文章。</p>';
endif;
?&gt;

呢度用到咗the_title()、the_permalink()同埋the_excerpt()等模板标签来输出文章信息。

透過功能檔案增強主題

functions.php文件是你的主题的“控制中心”，用于添加功能、注册菜单、侧边栏，并排入样式表和脚本。

InterServer 共享主機
共享主機:每月1TB,只需£2.50;首月只需£0.10,使用優惠碼 tryinterserver。461個雲端應用程式腳本,一鍵安裝。
InterServer 標誌 瀏覽該頁面

註冊導航選單同側邊欄

为了使主题支持后台的可视化菜单管理，你需要在functions.php中注册菜单位置。使用register_nav_menus()函數嚟完成。

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

之后，你就可以在模板文件（如header.php）入面用wp_nav_menu( array( 'theme_location' => 'primary' ) )嚟顯示呢個菜單。

正確引入樣式同腳本

永远不要直接通过<link>或<script>標籤硬編碼資源。應該用wp_enqueue_style()同埋wp_enqueue_script()函數，並且掛載到wp_enqueue_scripts这个钩子上。这确保了依赖关系正确，并避免重复加载。

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    // 引入自定义的JavaScript文件
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/script.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

摘要

从创建包含基本信息头的style.css和基础循环的index.php开始，你已经迈出了WordPress主题开发的第一步。通过分解页头页脚、构建核心模板文件，并在functions.php中系统化地添加功能和资源，你可以逐步搭建起一个结构清晰、易于维护的定制主题。记住，主题开发是一个迭代过程，从满足基本功能开始，再根据需要不断扩展和细化。

常見問題

制作WordPress主题必须掌握PHP吗？

是的，PHP是WordPress的核心编程语言。要深入进行主题开发，理解PHP基础语法、WordPress核心函数（模板标签）、以及其钩子（Hooks）和循环（Loop）机制是必不可少的。尽管你可以从修改现有主题的CSS和简单模板开始，但定制化功能离不开PHP。

我可以在不修改代码的情况下测试主题吗？

强烈建议在本地开发环境或线上网站的临时/测试环境中进行主题开发与测试。永远不要直接在已正式运营的网站上开发新主题或进行重大修改，这可能导致网站暂时性功能异常或外观错乱。

为什么我的主题启用在后台看不到效果？

请首先检查主题文件夹是否被正确放置在/wp-content/themes/目錄下。然後，確認style.css文件顶部的主题信息注释块格式是否正确，任何拼写错误或缺失冒号都可能导致识别失败。最后，确保index.php文件存在。

如何为不同的页面类型创建不同的布局？

WordPress遵循一套模板层级规则。例如，要为单个博客文章页创建独特布局，你可以创建single.php文件；为静态页面创建布局，则创建page.php。当访问相应页面时，WordPress会自动优先使用这些更具体的模板文件，而不是默认的index.php。

下一步應該點做?

如果你正喺建立或優化 WordPress 網站,我哋建議你繼續閱讀有關效能優化、插件設定同主題自訂嘅內容。

延伸閱讀及實用知識

以下內容與本文主題相關,適合進一步閱讀。一般而言,最好由與你目前問題最緊密相關的文章開始,然後逐步擴展到周邊主題。

標籤: