样式如何生成

引言

在本课中,我们将探讨样式是如何生成的。如果你已经完成了中级WordPress用户学习路径中的自定义模块,你会记得WordPress通过站点编辑器提供了两种修改颜色、字体和布局的方式。一种是使用全局样式,另一种是使用样式手册,它能直观展示你正在修改的区块。但这些内置样式从何而来,又在哪里定义呢?

Theme.json

答案就在一个名为theme.json的文件中,这也是本课的重点。但首先,什么是theme.json?theme.json文件用于定义主题的全局和基于区块的样式。从颜色、排版到间距和尺寸,每个属性的每个视觉方面都在其中。这种方法通常被称为单一事实来源。在这种情况下,theme.json是负责指定和组织主题所有设计方面的主要文件,使得更新、修改和管理更加容易。那么,我们在哪里找到theme.json呢?在本章的第一课中,我们曾窥探过站点的主题文件。让我们回到那个页面,导航到工具,然后选择主题文件编辑器。你会看到一个警告信息,建议你不要直接编辑主题。这只是一次简短的介绍性访问,所以你可以安全地点击“我了解”按钮。在右侧边栏的主题文件下,点击主题样式和区块设置。如果你学习了上一课《WordPress模板的构建块》,你可能已经注意到theme.json主要包含JSON,这是一种通用的数据格式。JSON以键值对的形式表示数据。

示例

在这个示例中,我们有一个按钮区块。键是按钮区块的属性,例如背景颜色、文本颜色和边框圆角。值则是其样式和设置。让我们再看两个例子。在这个示例中,JSON定义了一个调色板。调色板数组或列表中的每个对象代表调色板中的一种颜色,具有以下属性:十六进制代码、颜色的人类可读名称以及颜色的别名或简短标识符。在最后一个布局示例中,我们会看到一个名为内容大小的键,其值为620像素。这意味着该主题的内容宽度设置为620像素。当你通过编辑器自定义样式时,例如在本例中我们将内容宽度改为650像素,WordPress会将这些更改生成为JSON,确保它们被渲染成CSS样式,从而在浏览器中正确显示。花点时间浏览一下Theme.json。向下滚动,搜索你在编辑器中熟悉的词汇,比如颜色、布局、按钮、边框等。注意,例如颜色在文件中出现了多次,而布局只指定了一次。所有这些属性都描述了主题的预定义样式,这些样式由创建主题的设计师和开发者决定。

Theme.json与编辑器

虽然你可以直接在theme.json中更改这些默认样式,但无论是对于用户还是扩展者来说,这都不是推荐的方法。通过编辑器自定义设计是一种更实用、更直观的方法。深入探讨JSON的具体细节超出了本课的范围。要继续你的网页制作之旅,请查看初学者WordPress开发者学习路径,特别是《WordPress主题开发入门》模块中的全局设置和样式课程。

结论

那么接下来呢?如果你已经在站点编辑器中对样式进行了更改,例如像本例中更改图像区块的圆角,或者为某个区块选择了不同的颜色,你不会在theme.json中找到这些更改。这是因为这些自定义内容存储在数据库中,而不是主题文件中。要了解数据库和主题文件之间的区别,以及如何更新主题的theme.json以包含你的修改,请查看模块《WordPress如何保存你的内容》以及课程《使用创建区块主题插件进行导出和主题变体》。

WordPress模板的基础构成

介绍

在本课中,我们将探讨模板的构成,并一窥 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 已经更新。最后,值得注意的是,如果出现问题,别担心。点击撤销并重新开始。你所做的更改仅限于这个特定文章,不会影响其他文章或主题文件。所以放心大胆尝试吧。