介绍
在本课中，我们将学习如何将样式手册作为设计指南来使用。课程目标是理解样式手册的目的和功能，并能够浏览和利用样式手册来预览和优化设计选择。
样式手册
要查看样式手册，请前往外观，点击编辑器，然后进入样式。在左侧，我们将看到样式变体和调色板，然后当你点击眼睛图标时，你将能够查看样式手册。WordPress 样式手册是一个强大的工具，它弥合了传统设计实践与 WordPress 基于块的编辑系统之间的差距。你可以把它想象成你的数字风格指南，展示你网站的不同块或组件将如何呈现以及相互交互。
要打开样式，请点击铅笔图标，现在我们将在左侧看到样式手册，在右侧看到全局样式设置。样式手册与 WordPress 的全局样式功能紧密相连，我们将在未来的课程中深入探讨。这些被称为样式部分。目前，重要的是要理解样式手册是预览你在全局样式中做出的设计决策的一种不同方式。当你更新全局样式时，你可以直接在样式手册中查看更改，从而专注于特定块；或者你也可以直接在站点编辑器中查看你在全局样式中做出的更改，从而在模板或页面中看到这些更改。因此，在下一个示例中，我们可以更改网站的背景颜色，并查看它在主页上的显示效果。所以，如果你的网站内容不多，样式手册会很有帮助。例如，即使你还没有包含画廊的文章，你也可以对画廊进行样式设置。
样式手册的组织方式
样式手册分为几个选项卡：首先是文本，在这里你可以预览标题、段落、列表和其他文本元素。然后我们进入媒体，在这里你可以看到图像和其他媒体将如何显示。第三是设计，查看按钮、列和其他布局元素。接下来是小工具，例如日历、最新文章甚至社交图标。最后是主题，包括站点徽标、站点标题、查询循环和特色图像等块。
实际示例
在设计时，你可以使用样式手册来可视化不同元素上的设计选择，确保设计系统的一致性，尝试不同的样式变体，并识别需要改进的区域。那么，让我们来看一些实际示例，了解如何将样式手册用作风格指南并测试你的设计选择。
首先，当你选择样式手册时，你可以测试和预览主题附带的样式变体。或者你可以开始添加自己的样式。所以，我将前往样式手册，选择排版，然后你可以安装或上传自定义字体。我已经添加了两种自定义字体：Frauncis 和 Rubik。现在我们可以更新字体了。所以，我将把文本字体改为 Frauncis，更新行高，然后将标题字体改为 Rubik。然后我们可以立即在样式手册中看到更改，当你保存时，你会看到这些更改是全局性的。接下来，你可以进一步自定义 H1 到 H6 标题。在这个示例中，我将更改所有标题的大小。对于 H3 和 H4，我还会将外观改为浅色。当你更新这些更改时，你可以在左侧的样式手册中预览。当然，你可以对所有单独的块执行此操作。
然后，我将选择媒体，并将图像块的圆角半径更改为 10 像素，这也会应用于画廊块。接下来，我们可以探索颜色。所以，我将前往颜色，点击调色板，然后你会注意到你可以添加自己的自定义调色板。我将添加一些颜色。第一种是深绿色。当我的其他颜色就位后，我将返回元素，更新背景颜色、文本颜色、按钮块的颜色以及标题颜色。然后我们可以预览更改，并进一步自定义块，例如，根据我们的设计需求设置按钮块的样式。在整个过程中，你会不断参考样式手册，以确保所有元素和谐地协同工作。
结论
总之，样式手册是你的视觉指南。用它来实验、优化和完善你的设计。