EP008. “创建 WordPress 主题（fictional-university-theme 诞生）”

首页 › WordPress 开发课程 › 主题基础与本地域名 · EP008

约 7 分钟· #EP008#主题基础与本地域名

📌 关于 EP007（A Note About URLs / My Address Bar）：这节课只有一句提醒，没有实际操作，所以并到这篇笔记开头。作者在后面视频里地址栏有时候显示 .local，有时候显示 .dev，是因为早期 Local by Flywheel 生成的本地域名后缀不一样，跟内容本身无关。看视频操作时不用纠结域名到底叫什么，重点是看清楚域名后面的部分（比如 /wp-admin），因为你自己电脑上的域名（例如 fictional-university.local）可能跟视频里不完全一样。

主题开发正式起步：创建 fictional-university 主题。WordPress 判断 wp-content/themes/ 下某个资料夹是不是一个"主题"，只看这个资料夹里有没有两个关键文件：style.css（顶部注释写主题信息）和 index.php（最基本的模板文件）。这一讲把这两个文件建出来，再加一张 screenshot.png 预览图，然后激活这个新主题，同时把 WordPress 自带的默认主题（Twenty Fifteen/Sixteen/Seventeen）都删掉，只留这一个。

[截图：wp-admin 后台"外观→主题"页面，Fictional University 主题已激活、显示 screenshot.png 预览图的画面]

涉及文件

wp-content/themes/fictional-university-theme/style.css （新建）
wp-content/themes/fictional-university-theme/index.php （新建）
wp-content/themes/fictional-university-theme/screenshot.png （新建，素材图片，建议尺寸 1200×900）

📌 说明：这一讲没有对应的 -end 代码快照资料夹可以核对——课程里最早的代码快照是 sources/Section 4/09-end，但那个快照已经是加入 The Loop、拆出 header.php / footer.php 之后的状态（对应 EP011/EP012 之后），拿来对照 EP008 会是「未来」的代码，反而不准确。所以这一讲的代码完全按 transcript 逐字确认，没有代码夹可以核对，这里如实说明。

代码实现

/* wp-content/themes/fictional-university-theme/style.css */

/*
Theme Name: Fictional University
Author: Brad
Version: 1.0
*/

// wp-content/themes/fictional-university-theme/index.php
// 注：这一讲还没有用到 PHP 标签，index.php 里就是纯文字占位内容

This is our completely amazing custom theme

screenshot.png 就是一张普通图片文件，直接放进主题资料夹，文件名必须精确是 screenshot.png。

Hook / Function 速查

这一讲还没有出现 PHP function 或 WordPress hook，是 WordPress 识别"主题"所需的三个基本文件规则：

名称	类型	用途
`style.css` 顶部注释块	WordPress 主题规范	用 `Theme Name` / `Author` / `Version` 等字段告诉 WordPress 主题信息，会显示在后台 Appearance 的主题详情里
`index.php`	WordPress 主题规范	一个主题最基本必须要有的模板文件，没有它 WordPress 不会把这个资料夹当成合法主题
`screenshot.png`	WordPress 主题规范	后台 Appearance 主题列表显示的预览图

常见坑

style.css 文件名必须精确写成 style.css，不能改成 main.css 或 screen.css，不然 WordPress 认不出这是主题。
预览图文件名必须精确是 screenshot.png，放错名字后台就看不到预览图。
这时候如果在 style.css 注释下面写普通 CSS 规则（比如把全部文字设成橙色），存档刷新也不会生效——不是写错了，是这个 CSS 文件还没有被正确加载到前端，后面的讲座才会教怎么正确加载（enqueue）。

延伸 / 后续讲座会用到

下一讲（EP009）开始讲 PHP function 是什么；再往后（Section 4，对应更晚的代码快照 09-end）才会正式加入 The Loop、拆出 header.php / footer.php，把这里的占位文字换成真正的动态内容。

Sources

Udemy：

Become a WordPress Developer: Unlocking Power With Code — Section 3, EP007
Become a WordPress Developer: Unlocking Power With Code — Section 3, EP008