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

WordPress 主題開發入門：從零開始構建你嘅第一款自訂主題

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

準備工作：建立一個完整嘅主題環境

喺編寫任何代碼之前，建立一個結構清晰嘅開發環境係成功嘅關鍵。首先，你需要喺本地或者遠端伺服器上安裝好 WordPress。建立一個準備存放主題嘅目錄，位置喺 WordPress 安裝目錄下嘅 /wp-content/themes/ 中。我哋會建立一個名為 my-first-theme 嘅新資料夾，呢個就係我哋自訂主題嘅核心目錄。

一个最基本的 WordPress 主题只需要两个文件即可被系统识别。第一个是样式表文件 style.css，它不仅仅定义了站点的外观，其头部注释信息更是主题的“身份证”，包含了主题的名称、作者、描述等元数据。第二个是核心模板文件 index.php，它是 WordPress 默认的入口模板文件。

让我们先创建 style.css 文件，在其中写入必要的头部信息。

推薦閱讀 WordPress主題開發：從零開始構建自訂主題嘅完整指南。

/*
Theme Name: My First Theme
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://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
*/

/* 以下是正式的样式内容 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

跟住，創建最基本嘅 index.php 文件，它可以非常简单，仅仅用于测试主题是否被正确识别。

UltaHost WordPress 主機
30日退款保證，無限頻寬同數據庫，免費DDoS防護，買3年優惠50%
UltaHost 標誌 瀏覽該頁面 
<!DOCTYPE html>
<html no numeric noise key 1004>
<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 1001>
    <h1>你好，世界！呢個係我第一個主題。</h1>
    <?php wp_footer(); ?>
</body>
</html>

完成这两个文件后，登录你的 WordPress 后台，进入“外观” -> “主题”页面，应该就能看到我们刚刚创建的“My First Theme”主题了。激活它，然后访问网站首页，你就能看到最简单的输出。这标志着你的主题框架已经搭建成功。

理解核心模板文件及其层次结构

WordPress 使用模板层级（Template Hierarchy）来决定针对不同的页面请求应该使用哪个模板文件来渲染显示。理解这套规则是主题开发的核心。简单来说，当用户访问一个特定页面时，WordPress 会按照一套优先级顺序去寻找匹配的模板文件。最基本的是 index.php，它是所有页面的最终回退选项。

例如，当访问博客文章的单篇内容时，WordPress 会首先寻找 single-post.php，如果冇嘅話，就會揾 single.php，如果还没有，才会使用 index.php。对于显示文章列表的页面，它会依次查找 home.php、front-page.php、index.php。

为了实现一个功能完整的博客主题，我们至少需要创建以下几个关键模板文件：header.php（网站页头）、footer.php（网站页脚）、sidebar.php（侧边栏，可选）、index.php（主内容索引）、single.php（單篇文章）、page.php（單頁）同埋 style.css（样式表）。

推薦閱讀 點樣由零開始開發一個自訂WordPress主題。

透過 get_header()、get_footer() 同埋 get_sidebar() 这些模板函数，我们可以将通用的代码模块化，实现代码复用。主模板文件如 index.php 的结构会因此变得非常清晰。

<?php get_header(); ?>

<main id="main-content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 循环输出文章内容
        endwhile;
    else :
        // 没有找到内容的提示
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

这种模块化的思想不仅使代码更易于维护，也让你能够轻松地为不同类型的页面创建特定的页头和页脚。

实践开发：创建主循环与调用文章内容

任何博客主题的核心都是“主循环”（The Loop）。它是 WordPress 用于从数据库中获取文章内容并显示在页面上的 PHP 代码结构。在循环内，你可以使用一系列模板标签（Template Tags）来输出文章标题、内容、作者、日期等信息。

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

让我们构建一个最基本的index.php文件，在主循环中展示文章列表。

<?php get_header(); ?>

<div class="content-area">
    <main class="site-main">
        <?php if ( have_posts() ) : ?>
            <header class="page-header">
                <h1 class="page-title">最新文章</h1>
            </header>
            <?php
            while ( have_posts() ) : the_post();
            ?>
                <article no numeric noise key 1011 id="post-<?php the_ID(); ?>">
                    <h2 class="entry-title">
                        <a href="/yue/</?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </h2>
                    <div class="entry-meta">
                        發佈於：<time datetime="<?php echo get_the_date( 'c' ); ?>"><?php echo get_the_date(); ?></time> | 作者：
                    </div>
                    <div class="entry-content">
                        <?php the_excerpt(); // 输出文章摘要 ?>
                    </div>
                </article>
            <?php
            endwhile;
            // 输出分页导航
            the_posts_navigation();
        else :
            ?>
            <p>對唔住，搵唔到任何文章。</p>
        <?php endif; ?>
    </main>
    <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

在上面的代码中，我们使用 have_posts() 同埋 the_post() 来构建循环。模板标签 the_title()、the_permalink()、the_excerpt() 等被用于输出相应的内容。post_class() 函数会为文章容器自动生成一系列非常有用的 CSS 类，方便我们进行样式设计。

对于单篇文章，我们需要创建 single.php。它的结构与索引页类似，但通常只循环一篇文章，并显示完整内容(the_content())。

推薦閱讀 WordPress主題開發入門指南：從零到一構建自訂主題。

<?php get_header(); ?>

<main id="primary">
    <?php
    while ( have_posts() ) : the_post();
        get_template_part( 'template-parts/content', 'single' );
    endwhile;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

这里引入了一个更强大的函数 get_template_part()。它用于加载位于主题目录下的另一个模板片段文件。例如，get_template_part( 'template-parts/content', 'single' ); 會優先載入 template-parts/content-single.php 文件，如果不存在，则加载 template-parts/content.php。这进一步提升了代码的组织性和可复用性。

主題功能增強與最佳實踐

一个基础主题成型后，我们可以通过添加主题功能文件和遵循最佳实践来让它变得更加强大和健壮。最关键的文件之一是 functions.php。

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

主題嘅functions.php文件不是必须的，但它允许你为你的主题添加功能、注册特性、与 WordPress 核心 API 进行交互。它相当于你主题的“插件”，但又与主题绑定。在这里，你应该做的是“注册”和“声明”，而不是直接输出内容。

一個標準functions.php应该包含以下几部分内容：

1. 注册菜单：使用 register_nav_menus() 函數。
2. 注册侧边栏：使用 register_sidebar() 函數。
3. 添加主题支持：使用 add_theme_support() 函数来启用如文章特色图像、自定义Logo等核心功能。
4. 加载样式和脚本：使用 wp_enqueue_style() 同埋 wp_enqueue_script() 函数，并正确地使用 wp_enqueue_scripts 鉤子。

__( '主导航菜单', '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() );
    // 加载谷歌字体
    wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=swap', array(), null );
    // 加载主 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' );

// 注册一个右侧边栏
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-first-theme' ),
        'before_widget' =&gt; '<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' );
?&gt;

遵循这些最佳实践——如通过钩子添加功能、正确地排队加载资源、使用翻译函数 __() 同埋 _e() 来使主题国际化——能确保你的主题安全、高效，并符合 WordPress 官方的开发标准。

摘要

從創建包含 style.css 同埋 index.php 的基本文件夹开始，你已经走过了构建一个自定义 WordPress 主题的主要旅程。我们深入探讨了模板层级系统，理解了 WordPress 如何智能地选择对应的模板文件来渲染不同页面。我们实践了主循环的构建，学会了使用各种模板标签来动态输出内容。最后，我们通过 functions.php 为主题注入了更强的功能和规范性。虽然这只是一个起点，但它为你打开了一扇大门，让你能够在此基础上继续探索，添加更多的模板文件、更丰富的样式、交互功能，最终打造出完全符合你或客户需求的独特网站。

常見問題

主题开发必须要懂 PHP 吗

是的，深入开发 WordPress 主题必须具备一定的 PHP 知识。因为 WordPress 本身是由 PHP 构建的，所有模板文件、函数调用和数据处理逻辑都离不开 PHP。对于初学者，掌握 PHP 的基础语法、变量、数组、循环、条件判断和函数是必不可少的。

如何使我的主题适应移动设备

使主题具备响应式设计是现代网站的基本要求。你需要通过 CSS 媒体查询（Media Queries）来根据不同的屏幕宽度调整布局和样式。在开发时，应始终采用“移动优先”的策略，先编写适用于小屏幕的样式，然后逐步通过媒体查询为更大屏幕添加或覆盖样式。

开发和测试主题的最佳方式是什么

强烈建议在本地开发环境中进行主题开发。使用如 Local by Flywheel、XAMPP、MAMP 或 Docker 等工具搭建本地服务器环境，可以让你在不影响线上网站的情况下快速迭代和测试。同时，启用 WordPress 的 WP_DEBUG 模式至关重要，它能将 PHP 错误和警告显示在屏幕上，帮助你及时发现并修复代码问题。

我需要掌握哪些前端技术

除了 PHP，你还需要熟练掌握 HTML 和 CSS，这是构建网页结构和样式的基础。对于更复杂的交互和动态效果，JavaScript 知识也非常重要。特别是学习如何在 WordPress 中安全、正确地引入和使用 JavaScript 文件（通过 wp_enqueue_script），以及学习使用 WordPress 自带的 JavaScript 库。

下一步應該點做?

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

延伸閱讀及實用知識

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

標籤: