网站编辑器

站点编辑器允许您使用区块设计整个站点，包括页眉、页脚以及两者之间的所有内容。它让您能够更好地控制站点的外观。 

只有当您在站点上安装并激活区块主题时，站点编辑器才可用。

如何访问站点编辑器

要使用站点编辑器，您需要在站点上使用 区块主题。区块主题是一种使用区块构建站点各个部分的主题，包括导航菜单、页眉、内容和站点页脚。 

WordPress 区块编辑器中提供的所有区块都可以在站点编辑器中使用。一组称为主题区块的区块是专门为站点编辑器构建的。

要查找区块主题，请从 WordPress 仪表盘转到外观 > 主题，然后点击添加新主题。在添加主题页面中，选择区块主题，即可在WordPress 主题目录中查找不断增加的区块主题列表。

在站点上安装并激活区块主题后，转到外观 > 编辑器 以打开站点编辑器。

站点编辑器中的操作

进入站点编辑器后，您会看到五个菜单项。

• 导航：浏览菜单并进行基本更改。
• 样式：直接编辑站点的样式变体。
• 页面：现在可以直接在站点编辑器中编辑页面内容。
• 模板：查看站点不同部分的各种默认布局，以及自定义页面（搜索结果、404 等）。
• 图案：您可以在此管理同步图案和模板部件。

您还会看到一个放大镜图标。点击它即可访问命令面板。

下面概述了站点编辑器中的不同部分。

站点编辑器工作区

站点编辑器会加载站点主页（根据您在阅读设置中的设置），以开始编辑。

站点编辑器顶部菜单包含以下选项：

1. 站点图标（如果未设置站点图标，则显示 W 图标）：返回仪表盘，或切换到站点编辑器的其他部分：导航、样式、页面、模板或图案。如果选择返回仪表盘，系统会提示您保存更改，或不保存更改直接离开站点编辑器。

2.  + 区块插入器按钮：向站点编辑器添加新的区块、区块图案、媒体或同步图案（如果站点有同步图案）。

3. 工具：在编辑区块和选择区块之间切换。选择选择工具（或按键盘上的 Escape 键）以选择单个区块。选择区块后，按键盘上的 Enter 键返回编辑状态。

4. 撤消： 撤消最近执行的操作。
5. 重做： 使用撤消按钮恢复您撤消的操作。
6. 列表视图：查看页面上所有区块的列表，并在页面区块之间轻松导航。这有助于查看页面结构，以及编辑、移动和移除区块。
7. 命令面板：点击此处快速访问站点的所有内容、模板和图案，并调用其他操作（设置、新页面等）。

8. 保存： 保存您在站点编辑器中所做的更改。
   • 点击 保存 按钮时，您会看到所有已进行更改的同步图案、导航菜单、模板和模板部件列表。
   • 您可以选择全部保存，也可以只保存其中一部分。
   • 请注意，某些更改（例如对页眉和页脚模板的更改）会应用于站点中使用这些模板的所有页面，而不仅仅是您正在处理的页面。

9. 设置：显示或隐藏模板和区块设置侧边栏菜单。

10. 样式： 浏览当前主题可用的样式变体，为整个站点设置字体排版、调色板和布局，或为整个站点自定义特定区块的外观。
11. 更多选项： 点击三个垂直点图标以打开其他设置和工具。

显示顶部工具栏：显示或隐藏编辑器中的顶部工具栏。启用此选项后，区块工具栏会固定在 WordPress 区块编辑器的顶部（就在顶部工具栏下方），而不是直接显示在区块上方。

聚光灯模式：除您正在处理的区块外，所有区块都会变灰，以便您一次专注于一个区块。

免干扰：启用此选项后，用户界面中所有非必要部分都会隐藏，从而提供更加沉浸式的编辑体验。

编辑器：默认情况下，您将使用可视化编辑器。切换到代码编辑器，即可在 HTML 代码编辑器中查看整个页面。

插件：您可以在此切换站点编辑器侧边栏中的设置和样式。

工具：您可以在此下载包含更新模板和样式的主题（导出）、了解 键盘快捷键、访问站点编辑器欢迎指南、复制所有区块或查看其他支持文章。

首选项：使用首选项菜单自定义编辑体验，并更改与区块的交互方式。

如何使用站点编辑器

编辑站点样式

您可以使用站点编辑器自定义整个网站以及区块的样式。无论您正在编辑哪种模板或模板部件，都可以使用样式设置。 

• 转到外观 > 编辑器。
• 点击样式菜单项，或点击区块设置侧边栏旁边的图标。

在样式部分中，您可以浏览当前主题可用的样式变体，更改整个站点的调色板、字体排版和布局，也可以更改同样适用于整个站点的区块外观。

要查看您的样式修订或完全重置所做的更改，请点击右上角的三点菜单图标，然后选择相应选项。

请参阅此支持文章中的样式详细信息：样式概述。

自定义站点布局

您可以使用区块通过站点编辑器构建整个站点的结构和布局。例如：页眉、页脚等区域，以及站点文章和页面的 结构外观。

WordPress 区块编辑器中提供的所有区块都可以在站点编辑器中使用。一组称为主题区块的区块是专门为站点编辑器构建的。

示例：查询循环区块允许您自定义文章布局的外观和风格，导航区块让您自定义站点的导航菜单，站点标题区块有助于自定义站点标题等。

查看完整的主题区块列表。

示例 – 如何使用站点编辑器自定义 Twenty Twenty-Three

Twenty Twenty-Three支持站点编辑器，并且可以使用它进行自定义。下面以移除 Twenty Twenty-Three 主页顶部的间距为例。为此，请移除页眉模板部件底部的内边距以及内容区域顶部的内边距。

首先，移除页眉模板部件的底部内边距。

1. 在管理界面中，选择外观 > 编辑器
2. 选择图案 > 模板部件 > 页眉 > 页眉，然后点击铅笔图标进行编辑。
3. 选择组 > 行区块。使用底部区块导航。
4. 在区块设置中，点击样式。

5. 向下滚动到内边距 > 底部。当前值为 2。
6. 将其设置为 0。
7. 保存模板部件。

接下来，移除内容区域的顶部内边距。

8. 返回站点编辑器。
9. 选择模板 > 主页，然后点击铅笔图标进行编辑。
10. 选择顶部的组区块。使用底部区块导航。
11. 在区块设置中，点击样式。

12. 向下滚动到内边距 > 顶部。当前值为 3。
13. 将其设置为 0。
14. 保存模板。

浏览模板和模板部件

在站点编辑器中，您可以轻松浏览站点可用的模板和模板部件。

• 转到外观 > 编辑器以打开站点编辑器。这将带您进入一个视图，您可以在其中选择浏览模板或模板部件。
• 点击模板以预览站点可用的模板列表。
• 点击图案以预览模板部件列表。

管理站点模板

WordPress 使用模板为站点上的特定页面类型创建布局和结构。站点编辑器会显示可以添加到站点的模板选项，并允许您使用模板编辑器创建自定义模板。

从外观 > 编辑器进入后，您会看到一个视图，其中包含一个侧边栏，列出您的模板和图案，以及模板部件列表。

请参阅此支持文章中的模板详细信息：模板编辑器。

管理模板部件

模板部件是用于管理站点重复出现的全局区域（如页眉、页脚、侧边栏等）的区块。它们主要用于定义站点结构，并且可以重复使用。您还可以创建可通过模板重复使用的自定义模板部件。

从外观 > 编辑器中，点击图案选项。在所有模板部件中，您可以访问这些部件。

请参阅此支持文章中的模板部件详细信息：模板部件。

管理页面

从 6.3 版本开始，可以通过站点编辑器在“页面”部分管理、编辑和创建页面。

请参阅此支持文章，了解如何通过站点编辑器管理页面：站点编辑器页面

如何返回仪表盘

要返回仪表盘，请点击 WordPress 图标（如果已设置站点图标，也可以点击站点图标）以打开站点编辑器左侧导航。选择< 即可返回 WordPress 仪表盘。离开前，系统会提示您保存在站点编辑器中所做的更改。

如何导出模板和样式

您可以导出在网站编辑器中所做更改后的主题，包括模板、模板部件和样式设置，类似于 工具 > 导出选项。

• 通过转到外观 > 编辑器来打开网站编辑器。
• 选择样式设置选项旁边的三个垂直点图标。
• 在工具下，选择导出。这将开始导出过程，您将收到一个下载的主题 zip 文件，其中包含模板和模板部件。

使用网站编辑器时的实用工具

使用网站编辑器时，以下工具会很有帮助。

命令面板

命令面板提供了一种快速浏览网站内容并调用不同操作的方式，例如创建新文章/页面、切换偏好设置，以及访问样式和自定义 CSS 设置。

您可以在侧边栏的网站视图中点击搜索图标来打开命令面板。在编辑视图中，命令面板位于顶部标题栏中。您也可以在 Mac 上使用键盘快捷键 Cmd+k，或在 Windows 上使用 Ctrl+k

在此支持文章中详细了解命令面板：网站编辑器命令面板。

列表视图

列表视图可帮助您浏览复杂的区块布局和嵌套区块结构。您可以准确选择所需的区块，并快速了解当前页面上的区块布局。您可以轻松选择多个区块并对其进行编辑、移动或分组。

在此支持文章中详细了解列表视图： 列表视图。

区块样式

区块样式是一组预定义的区块，您可以将其插入文章和页面中，然后进一步自定义。WordPress 自带一组标准区块样式。您还可以在区块主题中找到捆绑的区块样式。

在此支持文章中详细了解区块样式：区块样式。

复制和粘贴样式

WordPress 6.2 新增了复制和粘贴区块样式的选项，让您可以轻松重复使用所创建的设计。您可以在任意区块的三点菜单中找到此选项’，它用于在相同类型的区块之间进行复制和粘贴：

全局应用样式更改

如果您在创建设计或自定义单个区块时更习惯使用更高级的选项，那么从 WordPress 6.2 开始，您可以将对单个区块所做的更改应用于所有相同类型的区块。例如，您可以通过区块设置高级部分下的新选项，将单个区块的设计应用于网站中的所有区块。

调整网站编辑器预览大小

在网站编辑器中时，您可能希望更改正在查看的模板或模板部件的预览。您可以选择深灰色侧边栏的控制柄并将其移动到合适的位置。

资源链接

• 网站编辑器使用补充指南
• 简单网站设计与网站编辑
• 网站编辑器和模板编辑器简介