WordPress 主题开发：从入门到实战

发布于2023年1月11日2026年7月30日作者:XQcms

WordPress 主题本质上是一套文件的集合，它们共同决定了你的网站长什么样、怎么工作。这些文件用 PHP、HTML、CSS 和 JavaScript 写成，WordPress 用它们把数据库里的内容转换成访客看到的网页。你想过为什么换个主题，网站内容还在吗？因为内容和样式是分开的。这套机制让更换“皮肤”变得异常简单。如果你只是个普通用户，会安装启用主题就够了；但如果你想自己动手做个独一无二的主题，那你得先搞清楚：WordPress 主题分两种——经典主题和区块主题。别急着学代码，先弄明白这条路到底怎么走，能省下不少弯路。

什么是 WordPress 主题？

往简单了说，主题就是你网站的“皮肤”和“骨架”。它不包含你的文章、页面、评论这些内容——那些都安全地存放在数据库里。主题只负责呈现：告诉 WordPress 网站标题放哪、导航菜单长什么样、文章列表怎么排列、页脚显示什么信息。

一个合格的 WordPress 主题，核心的有两个文件：

style.css：主样式表。它的头部注释里写了主题的名字、作者、版本、描述这些“身份信息”，WordPress 就是从这里读取数据，在后台“外观 > 主题”页面里展示给你的。后面跟着的 CSS 代码则控制字体、颜色、间距等视觉样式。
index.php：主模板文件。这是所有模板文件的“底牌”——如果找不到更具体的模板，WordPress 就用它来兜底。

除了这两个必需的，实际开发中你还会用到 header.php（页头）、footer.php（页脚）、sidebar.php（侧边栏）、functions.php（功能扩展）等文件。你可以把它们想象成乐高积木，每块负责一块区域，拼在一起就是一个完整的页面。

两种主题，两种思路

新手容易犯的错，就是没搞清楚经典主题和区块主题的区别就直接开干。其实在 WordPress 的里，这是两条完全不同的技术路线。你的选择直接决定了后续的学习方向和工作量。

经典主题（Classic Theme）

这玩意儿从 WordPress 诞生就有了，是大家熟悉的传统模式。它主要靠 PHP 模板文件来干活。

怎么工作的？ 举个实际例子：你要做一个网站首页。WordPress 会按“模板层级”的规则去找文件。先看看有没有 front-page.php，没有就找 home.php，再没有就用 index.php。找到之后，这个 PHP 文件里通常会用 get_header()、get_sidebar()、get_footer() 这些函数把页头、侧边栏、页脚拼接进来，中间用“WordPress 循环”（The Loop）从数据库里把文章一条条抓出来显示。

php

// 一个典型的 index.php 文件（经典主题）
<?php get_header(); ?>

<div class="content-area">
    <main id="main" class="site-main">
        <?php while ( have_posts() ) : the_post(); ?>
            <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
            <div><?php the_excerpt(); ?></div>
        <?php endwhile; ?>
    </main>
    <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

优点：灵活，开发者几乎能做任何事。缺点：想改个布局得改 PHP 代码，对普通用户不友好。

区块主题（Block Theme）

WordPress 5.9 开始支持的新模式，专为全站编辑（Full Site Editing, FSE）设计。它把所有东西——包括页眉、页脚、导航菜单——都变成了“块”。

怎么工作的？ 区块主题不再用 PHP 模板拼接页面，而是用 HTML 文件配合一个叫 theme.json 的配置文件。模板文件放在 /templates 文件夹（比如 index.html、single.html），可复用的头部、底部放在 /parts 文件夹。整个页面就是一块块 HTML 的嵌套组合，而 theme.json 统一管理全局样式：颜色、字体、间距等等。

html

<!-- 一个典型的 index.html 文件（区块主题） -->
<!-- wp:template-part {"slug":"header","theme":"mytheme"} /-->

<!-- wp:group {"layout":{"type":"constrained"}} -->
    <!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post"}} -->
        <!-- wp:post-template -->
            <!-- wp:post-title /-->
            <!-- wp:post-excerpt /-->
        <!-- /wp:post-template -->
    <!-- /wp:query -->
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","theme":"mytheme"} /-->

优点：可视化编辑，在 Site Editor 里拖拖拽拽就能改整个网站，不用碰代码。缺点：定制深度不如经典主题，而且你得熟悉各种“块”的用法。

怎么选？一个简单的判断标准

如果你是开发者，要做一个功能复杂、高度定制化的网站，或者打算把主题提交到 WordPress.org 官方目录去卖，经典主题这条路目前还是稳妥的选择。

如果你更看重易用性，希望客户或者不懂技术的用户可以自己拖拽修改网站布局，那区块主题是未来的方向。

注意：这两者不是“谁取代谁”的关系。WordPress 官方说得很清楚，两种主题会长期并存，因为各有各的适用场景。很多资深主题开发者也认为，在某些复杂的业务场景下，经典主题的 PHP 逻辑更有优势。

新手入门三部曲

不管你选哪条路，下面这三步是绕不开的。

1. 搭好本地开发环境

别在生产环境（也就是你的正式网站）上瞎折腾。用 Local（Flywheel 出品）、XAMPP 或 MAMP 在你电脑上搭一个“沙盒”环境。装好 WordPress，就可以放心大胆地改代码了。想尝鲜的话，还可以试试 WordPress Playground——直接在浏览器里跑 WordPress，连本地服务器都省了，特别适合快速测试想法。

2. 搞懂模板层级（Template Hierarchy）

这是 WordPress 的主题“宪法”。它规定了当用户访问某个页面时，系统该用哪个模板文件去显示。

比如，用户看一篇文章：WordPress 会按 single-{post-type}.php → single.php → singular.php → index.php 的顺序去找。明白这个规则，你才能精准地控制每一种页面的显示效果。你可以在主题里只放一个 index.php，但那样所有页面都长一个样，不够灵活。

3. 从简单的“样板”开始

别一上来就想做个全能主题。先写一个只有 style.css 和 index.php 的简主题，然后一步步加上 header.php、footer.php、sidebar.php。代码写好了，在后台“外观 > 主题”里激活你的作品，看看效果。

总结

做 WordPress 主题开发，关键是想清楚自己需要什么，然后选对路。经典主题用 PHP 搭积木，开发者说了算；区块主题用 HTML 搭积木，用户也能上手改。搞清楚“模板层级”这个游戏规则，从简单的文件开始动手，本地环境搭好，边做边学。两种模式都了解一下是好的——不是为了成为全才，而是为了真正理解这个系统的设计逻辑。有了这个基础，你就能判断什么场景用什么方案了。