WordPress开发笔记

WordPress块主题theme.json配置每一项参数详解及注释

theme.json简介

theme.json是一个配置文件，可让您定义主题的全局设置、样式等。该文件适用于块主题和经典主题。

在构建块主题时，可能是整个主题中最重要的文件。在某种程度上，它是渗透到所有其他组件的基础部分。

您可以使用的一些作包括（但不限于）：theme.json

在用户界面中启用块功能，例如颜色、排版和间距控件。
配置自定义调色板、双色调滤镜和背景渐变。
定义排版功能，如字体系列、捆绑 Web 字体等。
添加您自己的 CSS 自定义属性。
通过在核心样式系统内工作来调整整体设计。

您配置的设置和样式最终会反映在网站的前端和 WordPress 的内置编辑器上。

theme.json代表了您可能所说的“通用语言”，它允许 WordPress、您的主题、插件和用户进行有效沟通。因为它建立在标准化系统之上，所以每个组件都在使整个网站栩栩如生方面发挥着作用。

theme.json结构

该文件可以分为几个顶级部分，如以下代码片段所示：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {},
	"styles": {},
	"customTemplates": {},
	"templateParts": {},
	"patterns": []
}

你将了解这些属性，以及如何利用它们将想象中的设计转化为一个可行的主题。

直接在主题中自定义文件需要您熟悉 JSON 代码。您不需要成为专家（复制和粘贴可以让您走得更远），但掌握一些关于如何格式化 JSON 的基础知识肯定会有所帮助。

您还应该对 CSS 有一个基本的了解。虽然您不需要直接在中编写 CSS 代码，但许多功能都映射到 CSS 属性和值。从长远来看，了解设置和样式及其 CSS 对应物之间的关系将对您有所帮助。

theme.json性质

正如您在上一节中看到的，该文件具有多个顶级属性。其中一些只接受单个值，但大多数具有具有自己值的嵌套子属性。theme.json

这些是您可以在以下位置设置的当前顶级属性：theme.json

version:要生成的架构版本。theme.json
$schema:用于定义支持的JSON模式，该模式将与许多代码编辑器集成，实时提供提示和错误报告。
settings:用于定义出现的块控件、配置预设等。
styles:用于为网站和块应用颜色、字体大小、自定义CSS及其他样式。
customTemplates:自定义模板的元数据，定义在你的主题文件夹中。/templates
templateParts:模板部分的元数据，定义在你的主题文件夹中。/parts
patterns:一组模式字条，需从模式目录中注册。

关键注意事项

如果在theme.json文件中添加注释，会影响真实配置效果；最好不要添加注释。

settings.typography 文字排版

第一部分：部分参数集

这里为一些参数的作用和含义做了解释，但是不要直接复制使用（不要带有注释）

"customFontSize": true,  
 /*是否允许用户输入自定义字体大小。默认为true*/


"dropCap": true,  
/*用户是否可以为段落块的第一个字母启用首字下沉。默认为true*/


"fontStyle": true,  
/*用户是否可以选择自定义字体样式。默认为true*/


"fontWeight": true,  
/*用户是否可以选择自定义字体粗细。粗细范围映射到标准的“细”到“黑”字体粗细。默认为true*/


"letterSpacing": true,  
/*用户是否可以输入自定义字母间距值。默认为false*/


"lineHeight": false,  
/*用户是否可以为文本输入自定义行高。无法注册行高预设，因此此选项启用完全自定义的输入。默认为false*/


"textColumns": false,  
/*是否显示块文本的列选项。默认为 false*/


"textDecoration": true,  
/*用户是否可以为块的文本设置文本装饰。可用选项包括“无”、“下划线”和“删除线”。默认为 true*/


"textTransform": true,  
/*用户是否可以更改块文本的字母大小写。可用选项包括“无”、“大写”、“小写”和“大写”。默认为 true*/


"writingMode": true,  
/*是否在界面中启用文本方向，允许用户在水平和垂直文本之间进行选择。默认为 false*/


"defaultFontSizes": false,  
/*允许用户从默认字体大小预设中选择字体大小。默认为true。设置为false后，将隐藏默认字体大小并允许主题使用默认 slugs;设置为true后，将显示默认字体大小并防止它们被主题覆盖。*/


"fluid": true,  
/*启用流体排版并允许用户设置全局流体排版参数。默认为false*/

下面是一个可以复制使用的版本：

"customFontSize": true,
"dropCap": true,
"fontStyle": true,
"fontWeight": true,
"letterSpacing": true,
"lineHeight": false,
"textColumns": false,
"textDecoration": true,
"textTransform": true,
"writingMode": true,
"defaultFontSizes": false,
"fluid": true,

第二部分：字体

直接使用系统默认字体的方法：

"fontFamilies": [
	{
		"fontFamily": "'Microsoft YaHei',微软雅黑,Arial,'PingFang SC','Helvetica Neue',Helvetica,'Hiragino Sans GB','sans-serif'",
		"name": "默认首选",
		"slug": "primary"
	},
	...
	//其他字体
],

再添加一些其他开源字体：

"fontFamilies": [
	{
		"fontFamily": "'Microsoft YaHei',微软雅黑,Arial,'PingFang SC','Helvetica Neue',Helvetica,'Hiragino Sans GB','sans-serif'",
		"name": "默认首选",
		"slug": "primary"
	},
	{
		"fontFace": [
			{
				"fontFamily": ""Alibaba PuHuiTi 3.0"",
				"fontStyle": "normal",
				"fontWeight": "250",
				"src": [
					"file:./assets/fonts/alibaba-puhuiti-3-0/alibaba-puhuiti-3-0-250-normal.ttf"
				]
			},
			{
				"fontFamily": ""Alibaba PuHuiTi 3.0"",
				"fontStyle": "normal",
				"fontWeight": "300",
				"src": [
					"file:./assets/fonts/alibaba-puhuiti-3-0/alibaba-puhuiti-3-0-300-normal.ttf"
				]
			},
			{
				"fontFamily": ""Alibaba PuHuiTi 3.0"",
				"fontStyle": "normal",
				"fontWeight": "400",
				"src": [
					"file:./assets/fonts/alibaba-puhuiti-3-0/alibaba-puhuiti-3-0-400-normal.ttf"
				]
			},
			{
				"fontFamily": ""Alibaba PuHuiTi 3.0"",
				"fontStyle": "normal",
				"fontWeight": "500",
				"src": [
					"file:./assets/fonts/alibaba-puhuiti-3-0/alibaba-puhuiti-3-0-500-normal.ttf"
				]
			},
			{
				"fontFamily": ""Alibaba PuHuiTi 3.0"",
				"fontStyle": "normal",
				"fontWeight": "600",
				"src": [
					"file:./assets/fonts/alibaba-puhuiti-3-0/alibaba-puhuiti-3-0-600-normal.ttf"
				]
			},
			{
				"fontFamily": ""Alibaba PuHuiTi 3.0"",
				"fontStyle": "normal",
				"fontWeight": "700",
				"src": [
					"file:./assets/fonts/alibaba-puhuiti-3-0/alibaba-puhuiti-3-0-700-normal.woff"
				]
			},
			{
				"fontFamily": ""Alibaba PuHuiTi 3.0"",
				"fontStyle": "normal",
				"fontWeight": "800",
				"src": [
					"file:./assets/fonts/alibaba-puhuiti-3-0/alibaba-puhuiti-3-0-800-normal.ttf"
				]
			},
			{
				"fontFamily": ""Alibaba PuHuiTi 3.0"",
				"fontStyle": "normal",
				"fontWeight": "900",
				"src": [
					"file:./assets/fonts/alibaba-puhuiti-3-0/alibaba-puhuiti-3-0-900-normal.ttf"
				]
			},
			{
				"fontFamily": ""Alibaba PuHuiTi 3.0"",
				"fontStyle": "normal",
				"fontWeight": "1000",
				"src": [
					"file:./assets/fonts/alibaba-puhuiti-3-0/alibaba-puhuiti-3-0-1000-normal.ttf"
				]
			}
		],
		"fontFamily": ""Alibaba PuHuiTi 3.0"",
		"name": "阿里巴巴普惠体 3.0",
		"slug": "alibaba-puhuiti-3-0"
	},
	{
		"fontFace": [
			{
				"fontFamily": "Nabla",
				"fontStyle": "normal",
				"fontWeight": "400",
				"src": [
					"file:./assets/fonts/nabla/nabla-400-normal.ttf"
				]
			}
		],
		"fontFamily": "Nabla",
		"name": "Nabla",
		"slug": "nabla"
	},
	{
		"fontFace": [
			{
				"fontFamily": ""Alimama DongFangDaKai"",
				"fontStyle": "normal",
				"fontWeight": "400",
				"src": [
					"file:./assets/fonts/alimama-dongfangdakai/alimama-dongfangdakai-400-normal.ttf"
				]
			}
		],
		"fontFamily": ""Alimama DongFangDaKai"",
		"name": "阿里巴巴东方大楷",
		"slug": "alimama-dongfangdakai"
	},
	{
		"fontFace": [
			{
				"fontFamily": ""Alimama ShuHeiTi"",
				"fontStyle": "normal",
				"fontWeight": "700",
				"src": [
					"file:./assets/fonts/alimama-shuheiti/alimama-shuheiti-700-normal.ttf"
				]
			}
		],
		"fontFamily": ""Alimama ShuHeiTi"",
		"name": "阿里巴巴数黑体",
		"slug": "alimama-shuheiti"
	}
],

WordPress块主题theme.json配置的方法

WordPress开发笔记

经典主题

Function配置

块主题

搬家

多站点

插件配置

数据库

查询方法

块样式