介绍
在本课中，我们将探讨模板的构成，并一窥 WordPress 的幕后机制。在前几课中，你已经学习了管理菜单中几乎所有的页面。既然你已经熟悉了各种选项，现在是时候进入尚未探索的代码世界了。在本课中，你将了解模板页面在后台的样子，更深入地理解 WordPress 网站的构建模块，并学会识别和阅读一些代码。
幕后机制
首先，让我们对你的主题进行“X 光检查”，并查看主题文件。导航到“工具”，然后点击“主题文件编辑器”。你会看到一个警告信息，建议你不要直接编辑主题。这只是一个简短的介绍性访问，所以你可以安全地点击“我理解”按钮。你面前的是你主题的骨架，一张揭示模板、模板部分、模式和样式如何编码的“X 光片”。让我们看一个例子。在右侧边栏的“主题文件”下，点击“模板”，然后点击“page.html”。这个文件负责显示你网站上的页面。第一行调用了页眉模板部分。最后一行调用了页脚。中间是主要部分，包含一个组容器，里面放置了页面标题和内容块，由几个间距块分隔开。花点时间阅读这些标记。识别重复出现的模式。注意有些行以小于号、感叹号和两个连字符开头，后面跟着 WP 和冒号。另一个你会看到的重复模式是小于号、感叹号和两个连字符，后面跟着 /wp 和冒号。然后，你可以暂停这个视频，使用 WordPress Playground 或其他测试网站探索其他文件。
编程语言
由于不建议通过仪表盘编辑器修改主题，让我们打开页面编辑器，尝试一个安全的例子。这样我们可以返回仪表盘，转到“文章”，并打开一篇文章。你会注意到我添加了一些额外内容。下一步是切换到代码编辑器。点击右上角的三个垂直点，然后点击“代码编辑器”，或者使用键盘组合：Mac 上按 Command、Option、Shift 和 M，Windows 上按 Control、Alt、Shift 和 M。我将点击“代码编辑器”，你会看到三种编程语言的组合。第一种是 HTML，即超文本标记语言的缩写。第二种是 CSS，即层叠样式表的缩写。第三种是 JSON，即 JavaScript 对象表示法的缩写。
HTML 是用于构建页面的基本网络语言。它由元素组成，比如左尖括号、P、右尖括号表示段落，li 表示列表项，h2 表示二级标题，img 表示图像。回到代码编辑器，我们可以看到这些元素的实际应用。顶部有一个段落，然后是一个 h2 标题，接着是一个列表，最底部是一张图像。另一方面，CSS 定义了网页及其元素的样式。让我们看一个例子。标签 h3 带有颜色十六进制代码 #8d26d1，代表紫色副标题“带链接的段落”。
接下来我们可以谈谈 JSON。JSON 是一种使用键值对的数据格式。WordPress 既生成也解释这些键值对，确保它们被渲染成相关的样式。当我们返回代码编辑器时，可以看看图像的例子，有两个值得提及的键值对。第一个是“align”:“wide”，第二个是“className”:“is-style-rounded”。但它们是什么意思呢？“align”:“wide”意味着图像对齐设置为宽幅，“className”:“is-style-rounded”意味着图像有圆角。然后，我们可以看另一个例子，向上滚动到第一个段落。我们还会看到键值对 {“dropCap”:true}。这意味着段落块中单词的首字母更大，也称为首字下沉。在下一课“样式如何生成”中，我们将更详细地介绍这一点。同时，如果你对此感到好奇，可以查看“WordPress 开发者入门学习路径”，特别是“WordPress 编程语言”模块中的 HTML 课程。
演示
接下来，是时候动手实践了。既然代码不再像完全陌生的语言，就该练习你学到的东西了。我们将创建一个新文章。打开代码编辑器。然后，从文字记录中粘贴代码。接着，我们要做一些调整。第一件事是将某个标题的颜色从紫色改为红色，通过替换顶部和底部的十六进制颜色代码。然后，保存草稿并返回可视化编辑器，查看更改效果。接着，我会打开列表视图，进入大纲查看标题结构。我们会看到这个标题是 h3。然后，返回代码编辑器。我想将标题结构从 h3 更新为 h2。这里，我将在三个不同位置进行修改。再次保存并返回可视化编辑器。然后，进入大纲，看到标题级别从 h3 变成了 h2。我要做的最后一个更改是编辑外部链接的 URL。所以返回代码编辑器，将 URL 从 WordPress.org 更新为 learn.wordpress.org。然后，返回可视化编辑器查看更改效果。当我们点击链接文本并选择编辑时，会看到链接或 URL 已经更新。最后，值得注意的是，如果出现问题，别担心。点击撤销并重新开始。你所做的更改仅限于这个特定文章，不会影响其他文章或主题文件。所以放心大胆尝试吧。