排版管理的核心,因此了解它们至关重要。FSE 利用块编辑器并添加更多功能以成为站点编辑器。
WordPress 网站编辑器界面显示一家园林绿化公司的主页。该页面采用蓝色背景,配以白色文字
WordPress 网站编辑器界面看起来很像块编辑器,但具有更多的自定义范围。
这通过多种方式统一了您的网站设计选项:
您可以使用 Blocks 的编辑方法来编辑整个站点,而不仅仅是您的内容。
模板库是设置的一部分,因此您可以使用与内容相同的工具来编辑它们。
样式设置也在站点编辑器中进行,并提供全局设置方案。
网站编辑不需要任何代码即可实现任何可用选项。这弥补了开发和最终用户设计之间的差距。
您可以将该theme.json文件视为 FSE 的开发版本。您需要具备 JavaScript 对象表示法 (JSON) 知识才能使用该文件,但大多数网站所有者都具备这种能力。它是用于管理全局样式和设置的中央配置文件。
标题为 的代码编辑器窗口显示在风景如画的森林山脉背景上。编辑器显示了 WordPress theme.json 文件的一部分,其中包含各种样式配置。代码包括日历、类别和代码元素的设置,使用 CSS 变量来设置颜色和间距。行号显示在左侧,编辑器界面采用深色主题,以提高在背景下的可读性。
代码编辑器中展示的 theme.json 文件。
每个设置使用一个键/值对option:value,您可以通过多种方式实现:
定义全局调色板。
设置字体系列和大小。
配置特定于块的样式。
管理间距和布局偏好。
利用杠杆,可以创建更一致、更可定制的主题,而无需自定义 CSS(尽管这也是可能的)。适应性和灵活性theme.json意味着这是开发 WordPress 主题的关键组成部分。最佳方法是以不同的方式将两者用于所有主题设计 — 排版也不例外。
在 WordPress 网站编辑器中设置排版
如果您知道如何使用块编辑器,那么您也可以使用站点编辑器。在 WordPress 中,导航到外观>编辑器屏幕。这将显示站点编辑器的主屏幕:
WordPress 网站编辑器主屏幕。左侧边栏显示设计选项,主区域显示蓝色主题主页,标题为
站点编辑器主屏幕。
左侧导航中的样式屏幕为您提供了一些全局设 丹麦 WhatsApp 号码数据 计选项,其中包括排版更改:
WordPress 网站编辑器的 GIF 展示了各种主题样式预设。主内容区域显示
WordPress 网站编辑器内预设了不同风格的选项。
对于大多数用例,针对各种排版方面进行单独设置将为您带来更大的价值。样式屏幕顶部有两个小图标可打开更多选项:样式书和编辑样式铅笔图标。
WordPress 网站编辑器的一部分,左侧显示样式选项,右侧显示网站预览。两个用于查看和编辑的图标以红色突出显示。
站点编辑器内的样式编辑图标。
此外,您还可以在元素级别和每个块设置排版选项。
字体库
编辑样式>排版屏幕显示字体库,尽管它在站点编辑器中没有这个明确的名称。这让您可以通过几种方式处理字体和字型:
您可以上传和管理自定义字体。
可以选择在 WordPress 中直接使用 Google 字体。
使用 PHP创建字体集合。
要从站点编辑器侧栏中的排版部分访问字体库,请单击管理字体图标:
网站编辑器中的排版设置面板显示字体选项,包括 右上角突出显示了“管理字体”按钮。该面板显示在包含拉丁文本的蓝色网站背景旁边,演示了应用的排版样式。
WordPress 网站编辑器中的管理字体图标。
这里,“库”选项卡显示主题当前注册的字体并指示哪些字体处于活动状态:
WordPress 字体库界面显示已安装字体和主题字体。s 被列为已安装字体,具有四种活动变体。主题字体包括 Cardo、Jost、System Sans-serif 和 System Serif,每种字体都有各自的活动变体。
WordPress 字体库界面。
单击其中任意一项可以激活或停用单个字体:
字体库选择对话框显示 Cardo 字体系列的选项。对话框显示三种变体:Cardo Normal、Cardo Bold 和 Cardo Normal Italic,每种变体都选中了一个复选框。变体上方有一条注释,警告过多的字体变体可能会降低网站速度。
站点编辑器字体库中当前活动的字体。
在“上传”选项卡上,您可以使用拖放上传器对话框以 TTF、WOFF、WOFF2 和 OTF 格式安装您自己的字体。
“安装字体”选项卡连接到 Google 字体,因此您可以在主题中利用该库。请注意,此方法从您的网站下载并提供字体,而不是从Google CDN下载和提供字体:
WordPress 字体库显示安装 Google 字体的选项。搜索栏可让用户查找特定字体,列表显示各种字体选项,包括 Merienda、Merriweather 和 Metal Mania。分页控件可见底部。
WordPress 网站编辑器内的 Google 字体库。
在这里,从综合列表中选择要安装的字体,然后单击“安装”按钮。显示成功通知后,这些字体将显示在“库”选项卡上:
WordPress 字体库显示已安装字体和主题字体。Merriweather Sans 被列为已安装字体,有四种活跃变体。主题字体包括 Cardo、Jost、System Sans-serif 和 System Serif,每种字体都有各自的活跃变体。
WordPress 实例的已安装字体。
这样您就可以像使用网站上的其他字体一样使用这些字体。现在,您必须自定义它们以满足您的需求。
风格手册
选择和设置字体的危险之一是,您不知道它与配色方案、布局和格式结合后会是什么样子。样式手册非常有用,因为它可以让您预览不同元素的排版设置。
WordPress Style Book 编辑器界面显示蓝色背景,
网站编辑风格手册。
选择眼睛图标将打开样式书,这里有五个选项卡:
文本:在此处处理段落、标题、列表和其他以文本为中心的元素。
媒体:在这里,您可以调整图像、视频和音频设计演示文稿。
设计:本节整理结构设计方面,例如列、分隔符和按钮。
小部件:此屏幕有两个元素:动态生成,例如档案和评论列表。您还可以在此处使用搜索栏、社交媒体图标和标签云。
主题:主要关注您的网站标题元素,例如标题、标语、导航和徽标。
如果您单击样式书中的某个元素,您可以在侧边栏中使用各种选项。您在这里使用的是每个块的排版设置,而不是专用元素: