站点编辑器入门

简介

让我们探索一下站点编辑器,它允许你使用区块设计网站上的所有内容,从页眉到页脚以及中间的所有部分。让我们进入“外观”并点击“编辑器”。这将打开站点编辑器。左侧是站点视图侧边栏,这个精巧的工具让你可以深入了解网站的关键部分,包括导航、样式、页面、模板和模板部件。本教程旨在让你深入理解这些元素。

导航

让我们从顶部的导航开始。在这里,你可以快速查看和调整所有菜单。它是你管理菜单的指挥中心。你可以直接进行简单的编辑,比如重新排序。当你点击菜单项名称旁边的三个垂直点时,可以根据需要重命名、复制和删除该项目。如果在编辑模式下打开,你可以不受干扰地进行某些更改。更新会同步到整个网站。当你点击加号图标时,可以添加新页面或其他菜单项。你会注意到导航区块在此区域被锁定。如果你想设计导航菜单的样式,必须打开它所属的模板或模板部件。

样式

接下来,我们来谈谈样式。当你选择“样式”时,你将能够浏览主题附带的各种不同样式组合。当你点击“编辑样式”时,可以在此处浏览样式,然后更改网站的排版、颜色和布局。让我们看看它是如何工作的。当你点击“排版”时,可以管理文本、链接、标题、说明文字和按钮的排版设置。一个很棒的新功能是,你现在还可以访问字体库。在“字体”下方,我们会看到已添加到主题中的字体。但当我们点击“管理字体”时,我们可以安装、移除和激活本地字体和 Google 字体,使其适用于任何区块主题的整个网站。当你点击“安装字体”时,可以在网站上安装任何 Google 字体;如果你想从电脑上传字体,可以点击“上传”。请确保你拥有上传字体的使用权限。在“排版”下方,我们会看到“颜色”。在这里,你还可以更改网站上不同全局元素的颜色。当我们进入“布局”时,会注意到你甚至可以控制内边距和区块间距等元素。

样式手册

如果你再往下看,可以为整个网站自定义特定区块的外观。要查看编辑这些区块时它们会如何变化,请前往网站的“样式手册”。你会注意到顶部有一个小眼睛图标。样式手册允许用户预览可以插入到网站中的每个区块。它为你提供或展示了一个快速预览,让你了解全局样式将如何影响显示的区块,而无需用户将这些区块插入到模板中。同样重要的是,区块的样式可以在样式手册中进行调整。例如,让我们更新“按钮”区块,通过更改背景颜色和将字母大小写改为大写。如果你喜欢看到的效果,可以继续点击“保存”。另请注意,在样式手册中更改单个区块的样式会优先于你设置的全局样式。

样式修订

在这里,我们还需要谈谈样式修订。让我们继续点击样式手册图标旁边的“样式修订”。当你在样式手册中编辑模板时,样式修订会打开。样式修订功能提供了一种可视化方式,让你可以浏览样式随时间的变化,如果你找到更喜欢的样式或想恢复到之前的版本,可以轻松地回退到先前阶段。你只需选择版本,然后点击“应用”。在这个例子中,我正在编辑一个模板,并将遵循相同的过程。我会打开样式修订,选择一个之前的样式,然后点击“应用”进行回退。当你点击样式旁边的三个垂直点时,可以重置样式并添加额外的 CSS。

页面

在“样式”下方,我们可以进入“页面”来创建和发布页面。要添加新页面,请点击页面旁边的加号图标并创建草稿。当然,你也可以在仪表盘或 WP 管理后台中创建新页面。接下来,让我们打开一个现有页面,比如我的“关于”页面。当你打开一个页面时,重要的是要记住向“内容”区块添加内容。换句话说,“内容”区块是所有内容的容器。第二件要记住的事情是,在编辑页面时,你不能自定义页眉和页脚。这属于管理模板的一部分。如果你点击页眉,会收到一条消息,提示“编辑你的模板来编辑此区块”。如果你想修改分配给此页面的模板,可以点击“编辑模板”。在这个例子中,这将带你进入页面模板。在这里,你可以修改页眉和页脚。你不能向模板添加内容。内容当然会添加到文章和页面中。在此上下文中,“内容”区块只是一个占位符。

模板

这就引出了我们的下一个主题,即模板。模板为内容的显示方式提供了结构。当你选择模板时,会注意到主题自带的一系列模板,也就是内置模板。例如,显示单个页面的页面模板、作为备用模板的索引模板,或者显示单篇文章布局的单篇文章模板。而在最底部,我们会看到任何自定义模板。当你点击模板旁边的加号图标时,可以添加各种新模板,甚至是可以应用于任何文章或页面的自定义模板。让我们打开页面模板,以便更好地理解模板的工作原理。模板提供结构。一个模板通常包含一个头部模板部分和一个底部模板部分。

文章内容块会从分配给模板的页面或文章中提取内容。因此,模板仅用于修改页面的布局或设计,即头部、底部,甚至侧边栏。因此,站点编辑器明确区分了编辑模板和编辑页面。你可以在模板中修改头部和底部。你还可以选择点击三个垂直点,然后选择“替换头部”。这样,你就可以将当前头部替换为现有的头部模板部分或主题附带的头部模式。另一个选项是选择你的头部,然后点击“编辑”。这允许你在模板编辑模式下修改头部或底部,而不会受到其他干扰。

分配模板

要为页面或文章分配新模板,请打开相关内容,在本例中是我的“关于”页面,然后打开右侧的侧边栏设置。在“模板”旁边,点击模板名称,选择“交换模板”,然后你可以选择一个自定义模板分配给页面或文章。

管理模板

值得一提的是,当你点击“管理所有模板”,然后选择“批量编辑”时,你可以通过表格或网格视图浏览和筛选模板。当你再次选择“批量编辑”时,会有更多筛选选项。请注意,你可以以完全相同的方式浏览和筛选页面及模板部分。

模式

最后,我们来谈谈模式。在顶部,你可以查看所有可用的模式。当你选择“我的模式”时,可以创建和管理自己的自定义同步和不同步模式。在“我的模式”下方,我们可以查看所有自定义模式以及主题附带的模式,它们按相关类别排列。在“模板部分”下方,我们还可以创建和管理头部、底部及通用模板部分。模板部分本质上就是模式。它们是同步的可重用组件,可以在整个站点中使用。

自定义模式

让我们从“我的模式”开始。要创建自定义模式,请点击模式旁边的“插入器”,然后选择“创建模式”。命名后,你可以选择将其添加到相关类别,然后决定是否同步模式。同步模式会在整个站点中同步,这意味着如果你在一个地方更改了模式,它会在任何使用该模式的地方更新。如果你更喜欢使用不同步模式,也可以关闭此功能。不同步模式只是常规模式,可以独立编辑。当你返回自定义模式区域时,会注意到同步模式有一个紫色图标,而不同步模式则没有。接下来,你会注意到主题附带的模式是锁定的,你无法编辑它们。但是,当你点击某个模式下方的三个垂直点时,可以将其复制到“我的模式”区域。

模板部分

在底部,我们可以创建和管理头部、底部及通用模板部分。这里有两个选项。你可以创建自定义头部和底部,或者自定义主题附带的模板部分模式。要创建自己的模板部分,请点击顶部模式旁边的加号图标,然后选择“创建模板部分”。当你添加新的模板部分时,可以选择通用、头部和底部模板部分。通用模板部分不绑定到任何特定区域,所以记得给它们起一个描述性的名称。当你从这里打开一个模板部分时,你将能够在模板编辑模式下修改和编辑模板部分,而不会受到干扰。你还可以打开相关模板,在本例中是我的自定义模板,然后从模板内部修改头部或底部模板部分。如前所述,你可以轻松地将头部或底部替换为模式或库中的现有模板部分。

命令面板

最后,我还想重点介绍一个非常实用的功能——命令面板,它能帮你节省大量时间,让你更高效地在站点编辑器中操作。命令面板让你能快速完成任务并在站点编辑器内导航。例如,输入”新建”即可创建页面或模板,或直接输入你想前往的区域名称,比如输入”模板”来管理所有模板。你可以通过 Mac 上的快捷键 command+K 或 Windows 上的 control+K 打开命令面板,也可以在站点视图侧边栏中点击搜索图标找到它,或者直接点击标题栏即可。

总结

以上就是关于如何使用站点编辑器实现各项功能的简要概述。