使用样式手册

简介

欢迎使用样式手册。学习目标:掌握使用样式手册的最佳实践,理解全局样式与样式手册的区别,了解它们如何协同工作,学习在搭建网站前添加自定义样式和美化。如果您尚未观看《使用全局样式美化网站》视频,建议先观看以更好理解全局样式。Learn WordPress 视频可在 YouTube 上搜索 WordPress 找到,下方也提供了链接。

查找样式手册

要找到样式手册,我们从仪表盘开始。向下滚动菜单找到“外观”,然后移动到“编辑器”并点击打开。在“设计”菜单下,您会看到“样式”,点击它。这时会打开一个迷你菜单,显示 WordPress 默认样式,它自带了八种不同的样式变体。我们可以先停在这里,我将向您展示几种不同的操作方法。这是为您的主题选择不同样式组合的一种方式,包含不同的颜色和字体。这是主题自带的默认页面,类似于博客首页模板。页面中使用了多种不同的区块。我们可以点击不同的颜色变体来预览效果。您会注意到,切换颜色时字体也会随之变化。不过我们暂时保持默认设置,因为我想展示页面上的其他功能。页面顶部有一个眼睛图标,悬停时显示“样式手册”,旁边还有一个铅笔图标显示“编辑样式”。点击眼睛图标(样式手册),会显示标题、段落、图片等所有正在使用的核心区块。同样,我们可以点击不同的样式变体,查看它们与不同区块的搭配效果。另一个值得注意的功能是底部显示的“最后修改时间”,点击它可以打开修订记录页面,显示样式修订历史,包括修改时间,点击具体日期还能查看更改和更新的概览,非常方便。还有其他方式可以进入这里,我们先返回顶部,进入“编辑样式”。

使用样式手册更改样式

这是用户通常进入的主页面。您会注意到右侧的“样式”菜单会自动打开,如果没有自动打开,点击半圆形图标即可打开。如果您看过全局样式视频,应该已经了解这些功能的作用。这里再次看到眼睛图标和显示修订历史的时钟图标。这是另一种进入方式。同样,我们以博客首页模板作为默认页面,或者像第一部分那样浏览样式。我们可以查看页面并尝试不同的颜色变体,然后进入样式手册。样式手册会展示主题核心区块,但这次视图更易于管理,因为它使用了标签页,将不同区块归类到不同标签下,这样更方便。所有媒体元素放在一起,设计功能、按钮、组(如小工具)等也归类在一起,例如带有链接的列表、日历、文章列表、页面列表、社交媒体图标等小工具都集中在一起。主题区块也会集中显示。同样,我可以进入样式变体,查看不同颜色在这些区域中的效果,非常酷。媒体部分内容不多,按钮可能是最重要的部分,因为按钮颜色会变化,有些形状也不同,方便您找到最合适的样式。另外,当您浏览时,全局样式和样式手册是协同工作的。

更改按钮区块样式

假设我们在处理区块时,喜欢其他颜色,但想为按钮增加一点亮点。比如我喜欢调色板中的灰色和黑色,但想为按钮添加一个亮色。在样式手册的“设计”标签下,您也可以自定义按钮并预览效果。点击区块会打开相应的样式工具。我们可以进入并更改背景颜色,比如选择浅棕色,然后将文字改为黑色。还可以调整外观,设为中等文字大小,并更改字体。如果效果不好,可以恢复原样。我们可以使用系统无衬线字体等。有多种方式添加样式并在此预览。点击保存,再次保存。然后刷新前端页面,您会看到样式已生效。

更改引用区块样式

现在我们来查看文本并看看引用区块。大部分样式我们希望在全局样式中完成,但有时某些特殊区块可能需要一些特别的调整。所以我们点击打开这个区块,然后添加一个背景颜色。我们可以修改它。好的,我们还可以更改字体,接下来就做这个。然后点击保存。再点击一次保存。现在当我们勾选样式区块时,可以在模板中预览效果,然后前往前端页面刷新,向下滚动就能看到实际显示效果了。

总结

欢迎访问 Learn.WordPress.org 或我们的 YouTube 频道 WordPress 查看更多课程。谢谢。