主题体系与模板层级

这一课你将能做到

1. 画出模板层级（Template Hierarchy）的匹配顺序，看到任意 URL 就能说出它会加载哪个模板文件
2. 创建规范的子主题，安全地定制 Twenty Twenty-Five 等开箱主题而不怕升级覆盖
3. 用 theme.json 给站点配置全局色板、字号与间距，并理解它与站点编辑器的关系

为什么要学

主题是 WordPress 的「路由 + 视图」层：URL 进来，WP 按模板层级决定用哪个 PHP 文件渲染。不改主题就无法定制任何前台页面；不懂得用子主题，一次主题升级就能把你的改动全部抹掉。

人话：模板层级像 Spring MVC 的路由分发——同一个「/分类/Java」请求，WP 会按优先级去找 category-java.php → category.php → archive.php → index.php，找到第一个就停。会读这条链，你就拿到了前台排障的地图。

先建立图像

模板匹配的决策树（自上而下，命中即止）：

首页        front-page.php → home.php → index.php
单篇文章    single-post.php → single.php → singular.php → index.php
静态页面    page-{slug}.php → page-{id}.php → page.php → singular.php → index.php
分类归档    category-{slug}.php → category.php → archive.php → index.php
搜索结果    search.php → index.php
404         404.php → index.php

底线规则：任何主题必须有 index.php，它是所有请求的兜底。

跟着做

步骤 1：装一个 6.x 开箱主题

后台「外观 → 主题 → 安装新主题」，搜索安装 Twenty Twenty-Five（WP 6.7 起的默认区块主题）并启用。进「外观 → 编辑器」感受一下：整站页头、页脚、模板都能在浏览器里改——这就是区块主题 + 全站编辑（FSE）。

步骤 2：创建子主题骨架

在 wp-content/themes/ 下新建 tt25-child/，两个文件：

/* style.css —— 子主题的身份证，头部注释不能少 */
/*
Theme Name:   TT25 Child
Template:     twentytwentyfive
Description:  课程站子主题示例
Version:      1.0
Requires PHP: 8.2
*/

<?php
// functions.php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'tt25-child',
        get_stylesheet_uri(),          // 子主题 style.css
        array( 'tt25-style' ),         // 依赖父主题样式句柄
        wp_get_theme()->get( 'Version' )
    );
} );

Template: 的值必须是父主题目录名（区分大小写）。后台启用「TT25 Child」。

步骤 3：用模板覆盖验证层级

在子主题里新建 single.php：

<?php get_header(); ?>
<main>
    <p style="color:red">我来自子主题 single.php</p>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <h1><?php the_title(); ?></h1>
        <div><?php the_content(); ?></div>
    <?php endwhile; endif; ?>
</main>
<?php get_footer(); ?>

打开任意一篇文章，看到红色提示即证明：子主题同名模板优先于父主题。删掉这个文件，页面自动回落到父主题——层级规则亲测一遍，比背十遍都有用。

步骤 4：theme.json 全局样式

子主题根目录新建 ：