theme.json是一个文件，允许块主题开发人员在编辑器中控制块的设置和样式。
在本视频中，您将了解向经典主题添加theme.json文件时会发生什么。
学习成果
- 了解添加主题.json如何影响经典主题
- 使用theme.json启用块编辑器支持
理解问题
- 在经典主题中添加theme.json的主要好处是什么？
- 可以使用theme.json替换的PHP功能的名称是什么？
- 在向经典主题添加主题.json时，您应该注意什么？
查看成绩单
嘿，欢迎学习WordPress。
在本课中，您将学习向经典主题添加theme.json文件时会发生什么。
theme.json是一个文件，允许块主题开发人员在编辑器中控制块的设置和样式。这允许集中配置点，同时在配置主题设置和样式时提供更一致的体验。要了解有关主题json文件和块主题以及如何使用它的更多信息，请查看learn.wordpress.org上的theme.json教程简介。
让我们看看通过向Twenty Twenty-one主题添加一个主题，将一个主题.json文件添加到经典主题时会发生什么。为此，让我们首先熟悉页面的布局，以及使用Twenty Twenty-One时的一些块编辑器设置。正如您在块编辑器中看到的那样，页眉及其内容是固定宽度的，并且居中对齐。呈现页面时，页眉和内容结构由主题style.css文件中应用的样式决定。如果我们想在编辑器中更改某些东西的颜色，比如文本颜色，那么列出的唯一颜色就是主题设置的颜色。在这种情况下，这是通过为编辑器调色板功能添加主题支持，并在数组中传递主题颜色来实现的。现在，让我们向Twenty Twenty-One主题添加一个theme.json文件。要做到这一点，请切换到像Visual code Studio这样的代码编辑器，并在主题文件夹的根目录中创建一个名为theme.json的新文件。
接下来，使用花括号启动一个新的JSON对象，并添加模式和版本键及其各自的值。如果刷新块编辑器的页面，首先会注意到编辑器内容有点不对齐。这是因为通过向主题添加一个theme.json，WordPress附带的默认theme.jon现在被激活了。theme.json没有配置settings.layout.contentSize设置，因此您需要创建它.settings.layout.contSize并将其设置为650。如果刷新页面，则所有内容都设置正确。幸运的是，这不会影响页面的前端呈现，因为这仍然使用主题style.css文件中的样式。然而，您可能会发现一些默认的WordPress theme.json设置和样式与现有的CSS规则冲突或重复。因此，检查并修复任何导致问题的问题都是一个好主意。如果你想检查默认的WordPress theme.json文件，你可以在wp-includes文件夹中的WordPress安装中找到它。例如，如果您要更改段落文本的颜色，您会注意到可用的颜色包括默认WordPress theme.json指定的颜色。
在经典主题中使用theme.json文件的主要优点之一是能够添加对块编辑器功能的支持，而无需在themes functions.php文件中使用add_theme_support函数。例如，让我们看看编辑器的调色板功能。在Twenty Twenty-One主题中，主题颜色是使用add_theme_support函数在functions.php文件中设置的。然而，使用主题.json文件，所有这些代码都可以在设置调色板键下复制。现在，如果您从functions.php文件中删除调色板，但在theme.json文件中指定它们，您可以看到编辑器中仍然可以使用所有颜色。
也可以将此设置以及theme.json教程中详细介绍的块编辑器设置和样式的所有其他设置和样式添加并应用于您的theme.j森文件。有关可以由theme.json启用并因此从functions.php中删除的主题功能的完整列表，请查看块编辑器手册中“全局设置和样式如何指南”的“向后兼容添加主题支持”部分。
快乐编码
介绍
嘿，欢迎学习WordPress。
在本课中，您将学习向经典主题添加theme.json文件时会发生什么。
theme.json是什么？
theme.json是一个文件，允许块主题开发人员在编辑器中控制块的设置和样式。
这允许集中配置点，同时在配置主题设置和样式时提供更一致的体验。
要了解有关块主题中的theme.json以及如何使用它的更多信息，请查看theme.json教程简介学习WordPress。
在经典主题中添加theme.json会发生什么
让我们看一看当您向经典主题添加一个theme.json文件时会发生什么，方法是向Twenty-Twenty one主题中添加一个。为此，让我们先熟悉一下页面的布局，以及使用Twenty-Twenty One时的一些块编辑器设置。
如您所见，在块编辑器中，页眉和内容是固定宽度的，并且居中对齐。
呈现页面时，页眉和内容结构由主题的style.css文件中应用的样式决定。
如果我们想在编辑器中更改某些东西的颜色，比如文本颜色，那么列出的唯一颜色就是主题设置的颜色。在这种情况下，这是通过为编辑彩色剧本功能，并将主题颜色作为数组传递。
让我们向Twenty Twenty-One主题添加一个theme.json文件。
为此，请切换到类似Visual code Studio的代码编辑器，并在主题文件夹的根目录中创建一个名为theme.json的新文件。
接下来使用大括号启动一个新的JSON对象，并添加$模式和版本键及其各自的值。
{“$schema”：“https://schemas.wp.org/trunk/theme.json”，“版本”：2}
如果在块编辑器中刷新页面，首先会注意到编辑器内容有点不对齐。
这是因为通过向主题添加一个theme.json，WordPress附带的默认theme.jon现在被激活了。theme.json没有配置settings.layout.contentSize（设置.layout.contSize）设置，所以您需要创建它。
{“$schema”：“https://schemas.wp.org/trunk/theme.json”，“版本”：2，“设置”：{“布局”：{“contentSize”：“650”}}}
幸运的是，这不会影响页面的前端呈现，因为这仍然使用主题的style.css文件中的样式。然而，您可能会发现一些默认的WordPress theme.json设置和样式与现有的CSS规则冲突或重复，因此最好检查一下，并修复任何导致问题的问题。
如果您想检查默认的WordPress theme.json文件，可以在WordPres安装的/wp-includes/文件夹中找到它。
例如，如果您要更改段落文本的颜色，您会注意到可用的颜色包括默认WordPress theme.json指定的颜色。
使用theme.json替换add_theme_support。
在经典主题中使用theme.json文件的主要好处之一是能够添加对块编辑器功能的支持，而无需使用添加主题支持主题functions.php文件中的函数。
例如，让我们看一下编辑器-彩票功能。在Twenty Twenty-One主题中，主题颜色是在functions.php文件中使用添加主题支持功能。
//编辑器调色板。$black=“#000000”；$dark_gray=“#28303D”；$gray=“#39414D”；$green=“#D1E4DD”；$blue=“#D1DFE4”；$purple=“#D1D1E4”；$红色=“#E4D1D1”；$橙色=“#E4DAD1”；$yellow=“#EEEADD”；$white=“#FFFFFF”；添加主题支持(“编辑-彩票”，阵列(阵列(“name”=>esc_html__（“黑色”，“二十二岁”），“slug”=>“black”，“color”=>$黑色，),阵列(“name”=>esc_html__（“深灰色”，“二十二岁”），“slug”=>“dark-gray”，“color”=>$dark_gray，),阵列(“name”=>esc_html__（“灰色”，“二十二岁”），“slug”=>“gray”，“color”=>$gray，),阵列(“name”=>esc_html__（“绿色”，“二十二岁”），“slug”=>“green”，“color”=>$绿色，),阵列(“name”=>esc_html__（“蓝色”，“二十二岁”），“slug”=>“blue”，“color”=>$蓝色，),阵列(“name”=>esc_html__（“紫色”，“二十二岁”），“鼻涕虫”=>“紫色”，“color”=>$紫色，),阵列(“name”=>esc_html__（“红色”，“二十二岁”），“slug”=>“red”，“颜色”=>$红色，),阵列(“name”=>esc_html__（“Orange”，“twentythony”），“slug”=>“orange”，“color”=>$橙色，),阵列('name'=>esc_html__（'Yellow'，'twentytwentyane'），“slug”=>“黄色”，“颜色”=>$黄色，),阵列(“name”=>esc_html__（“白色”，“二十二岁”），“slug”=>“white”，“color”=>$白色，),));
然而，使用主题.json文件，所有这些代码都可以在设置.颜色.托盘键。
{“$schema”：“https://schemas.wp.org/trunk/theme.json”，“版本”：2，“设置”：{“布局”：{“contentSize”：“650”}, “颜色”：{“调色板”：[{“name”：“黑色”，“颜色”：“#000000”，“slug”：“黑色”}, {“name”：“深灰”，“颜色”：“#28303D”，“slug”：“暗灰色”},{“name”：“灰色”，“颜色”：“#39414D”，“鼻涕虫”：“灰色”},{“name”：“绿色”，“颜色”：“#D1E4DD”，“slug”：“绿色”},{“name”：“蓝色”，“颜色”：“#D1DFE4”，“鼻涕虫”：“蓝色”},{“name”：“紫色”，“颜色”：“#D1D1E4”，“slug”：“紫色”},{“name”：“红色”，“颜色”：“#E4D1D1”，“slug”：“红色”},{“name”：“橙色”，“颜色”：“#E4DAD1”，“slug”：“橙色”},{“name”：“黄色”，“颜色”：“#EEEADD”，“slug”：“黄色”},{“name”：“白色”，“颜色”：“#FFFFFF”，“slug”：“白色”}]}}}
如果从functions.php文件中删除颜色托盘，但在theme.json文件中指定它们，则可以看到颜色仍然在编辑器中可用。
以及块编辑器的所有其他设置和样式，如主题.json教程也可以添加并应用于您的theme.json文件。
有关可以通过theme.json启用并因此从functions.php中删除的主题功能的完整列表，请查看与add_theme_support向后兼容块编辑器手册中的“Global Settings&Styles how to guide”部分。
快乐编码。
其他资源
