WordPress 的发展需要时间才能成熟，但它已经从一个简单的博客平台发展成为一个强大的内容管理系统（CMS），几乎可以运行整个网络。最大的进步是在创建网站设计方面。WordPress 全站编辑（FSE）是一种雄心勃勃的方式，可以让每个人都掌握复杂的工具。
本综合指南将探讨 WordPress 全站编辑的历史和功能。最终目标是向您展示 FSE 的工作原理，让您像专业人士一样开发自己的网站设计。
WordPress 设计和布局创建简史
了解在 WordPress 中设计网站和布局的演变过程，是理解 FSE 意义的重要部分。经典编辑器（Classic Editor）就是我们现在所使用的核心工具。
WordPress 经典编辑器。
当然，它并不总是 “经典” 的。它一直是 TinyMCE 编辑器–从 WordPress 的第一个版本到 2018 年左右的默认编辑器。这是一个简单的所见即所得（WYSIWYG）文本编辑器，可以输入内容和基本 HTML 以及一些格式样式。事实上，你仍然可以获得 TinyMCE 编辑器，因为它是一款商业工具：
TinyMCE 编辑器主页。
TinyMCE 编辑器的主要缺点是缺乏前端预览选项，灵活性也不如人意。主题框架成为一种可行且强大的替代方案。当然，StudioPress 的 Genesis Framework 仍在我们身边，但也有一些其他的框架，如 Thesis。
默认的 Genesis Framework 主题。
在这里，你可以看到我们是如何从文本编辑转向可视化网页设计的。该框架为你提供了 WordPress 后端选项，让你可以改变前端的各个方面。此外，您还可以获得更多 “基础” 功能，如钩子和过滤器、模板支持等，以进行进一步更改。
不过，对于普通用户来说，这仍然不是很方便，这就是页面生成器插件流行的原因。你可以将它们与 TinyMCE/经典编辑器一起使用，为设计网站提供拖放系统。这些插件与 2011 年前后的版本基本相同。Divi 和 Beaver Builder 仍是主流，尽管 Elementor 也是一个庞然大物：
Elementor 主页。
请阅读下一节，了解为什么我们有 TinyMCE 编辑器和页面生成器插件的替代品。
区块编辑器和 WordPress 全站编辑
WordPress 的受欢迎程度位居第一，但要达到这一地位，它必须捍卫自己的头衔。多年来，许多其他平台已经占据了市场。
Squarespace、Wix、Medium 和其他许多平台都希望获得与 WordPress 相同的受众和用户群，而在 Block Editor 之前，它们都拥有更好的编辑体验。
用 Wix 编辑网站。
这是 WordPress 管理层非常担心的问题，因为当时其他平台正在获得更多的关注。竞争对手也拥有现代化、可视化、高性能的界面，即使是简单的布局控制也不例外。
区块编辑器是一种模块化的网站文章和页面构建方式，但也有缺点。首先，它的使用范围有限，这意味着如果要进行任何 “更深层次” 的更改，可能需要使用页面生成器插件。此外，您仍然需要开发知识来构建一个完整的网站，而 WordPress 团队已经找到了解决这一创意障碍的方法。
什么是 WordPress 全站编辑（FSE）
WordPress 全站编辑是开发网站的最新和最前沿的技术。它建立在使用 “区块”（Blocks）来拼凑设计的基础上，涵盖的内容比单个帖子和页面更多。FSE 的核心是让您使用统一直观的界面来管理 WordPress 网站设计的方方面面。
在 WordPress 站点编辑器中编辑模板。
这是目前编辑网站的 “官方” 方式。它将网站的方方面面都纳入了自己的羽翼之下：
- 导航编辑。过去使用 “外观 > 菜单” 构建器屏幕的方法现在纳入了站点编辑器。
- 全局样式。您可以更好地控制整个网站的外观和感觉。这包括颜色、排版、间距等。
- 模板编辑。以前这需要开发和编码知识，如PHP、HTML 和 CSS。现在，您可以使用网站编辑器为网站的不同部分创建和修改模板，而无需代码。
- 区块样板。这是可重复使用的设计元素，您可以使用区块集合将其插入布局中。
随着编辑器的发展，一些功能也在逐渐消失。例如，你不再需要小工具区域，尽管 WordPress 仍将其作为非块主题的遗留功能。
我们稍后再讨论 WordPress 全站编辑能帮你实现什么。在此之前，我们先来了解一下为什么我们需要 FSE。
为什么在 WordPress 中引入 FSE
WordPress 团队引入 FSE 有几个原因。其中一些是技术上的考虑。例如，区块编辑器不允许我们编辑网站的所有方面，而这些功能本来就应该存在。
很难理解为什么让我们在不需要代码的情况下处理模板样式需要这么长时间。在经典编辑器、框架、页面生成器插件和块编辑器之间，我们从未有过这样的机会。FSE 以 WordPress 原生的方式解决了这个问题。
站点编辑器中的模板管理屏幕。
这种简化统一了编辑体验，并将其置于 WordPress 核心团队而非第三方开发人员的控制之下。这也意味着学习曲线是一致的。在内容、布局和设计之间，您从一个屏幕到下一个屏幕都能获得熟悉的体验。
这种体验也带来了长久性。WordPress 全站编辑功能不会消失，它只会随着时间的推移而发展。这为平台提供了一个基础，以适应核心开发团队希望为 WordPress 带来的一切。
总之，这种授权从开发人员延伸到最终用户。WordPress的全站编辑功能让每个人都能更好地控制他们希望做出的设计变更，而无需依赖开发人员、复杂的定制或编码知识。
FSE 的替代方案
对于 WordPress 团队来说，FSE 不仅是现在，也是平台的未来。不过，您需要一个兼容的主题才能使用它（稍后详述）。而且，其他 WordPress 企业可能不会同意，尤其是那些拥有竞争产品的企业。
例如，WordPress 网站开发人员会认为，将主题设计交给专业人士是个不错的主意。我们在很多情况下都会同意这种观点，尤其是当您有复杂的需求、合适的预算和时间时。
显示部分 PHP 代码的代码编辑器。
当然，对于大部分内容创建和定制来说，块编辑器仍然是可行的。从这个编辑器到完整的网站编辑只需短短的一跳，而且您很可能已经在使用它了：
WordPress 区块编辑器。
很多用户在大部分情况下都会使用块编辑器，然后再引入另一种解决方案。添加页面生成器插件可以提供块编辑器所缺乏的部分功能。Divi、Elementor、Beaver Builder、Brizy 等都拥有强大的功能集，可以进行更深入的定制和开发：
WordPress 中的 Elementor 页面生成器屏幕。
如果想获得与 WordPress 全站编辑截然相反的体验，回到一切开始的地方，您可以选择全新的内容管理系统：ClassicPress。
ClassicPress 主页。
该项目的理念是，WordPress 的进化是一个伟大的想法，除了区块编辑器和 FSE。因此，ClassicPress 分支并不包含它。相反，你将使用经典或 TinyMCE 编辑器创建网站，就像过去一样。
从本质上讲，这是针对块编辑器首次发布时的不成熟而提出的单一解决方案。当时，这个概念在理论上是合理的。不过考虑到 WordPress 目前的编辑体验，选择 ClassicPress 的理由并不充分。
WordPress 全站编辑的工作原理
简而言之，WordPress 全站编辑将块编辑器的功能扩展到整个网站。要使用全站编辑功能，您需要一个支持它的 “区块主题” 或 “全站编辑主题”。稍后我们将详细介绍。
FSE 工作原理的高级概述非常简单：
- FSE 使用区块。就像当前迭代的 WordPress 编辑器一样，整个网站的每个组件都使用 Blocks。在这里，单个内容元素和较大的结构组件（如页眉和页脚）都将使用 Blocks。
- 您可以在 WordPress 中编辑页面模板。在修改模板文件时，不再需要 PHP 知识。相反，您可以在网站编辑器中创建和编辑它们。
- 可以使用全站设计工具。我们稍后会介绍全局样式面板，但它可以让你控制影响整个网站的设计元素。在很多情况下，你并不需要自定义 CSS 来实现你的设想。
- 区块样板让你快速构建。与区块编辑器一样，常用网站部分也有布局，你可以不受限制地插入和自定义。
- theme.json 文件是 FSE 的核心。该配置文件将定义主题的基本样式和设置。它是进一步自定义网站的起点，也是开发的 “枢纽”。
大多数用户运行的 WordPress 版本都不会早于 5.9，但如果你运行的是 5.9，就需要更新以利用 FSE。正如我们所概述的，您还需要一个辅助主题。让我们快速讨论一下。
选择合适的 FSE 主题
幸运的是，选择区块主题和选择其他类型的主题一样需要谨慎。您需要关注几个客观方面，以确保您下载的是一个强大的解决方案：
- 查看主题代码库是否定期更新。
- 通过评分和评论了解其他用户对主题的看法。
- 确保开发商能提供满足您需求的支持。
由于 WordPress 的全站编辑功能刚刚进入平台，因此可供您选择的主题较少。但这并不意味着很难找到高质量的主题。许多大型开发商都有自己的 FSE/Block 主题。ThemeIsle 的 FSE 版 Neve 就是其中之一：
Neve FSE 主题主页。
该主题的 “传统” 或 “经典” 版本使用了 “外观” 屏幕中的旧版 “自定义器”。该版本完全集成了网站编辑器，主观性能更好。
还有其他一些 Block 主题值得关注，如 Portfolio WP 和 Mugistore。不过，Ollie 可以说是其中的佼佼者：
Ollie 主题主页。
它可以毫不动摇地使用 WordPress 进行全站编辑。它有一个贴心的入门向导，甚至还有一个包含大量图案库元素和模板的高级版本。
即使是默认的 Twenty Twenty-Four 主题，现在也是您网站的可行选择：
Twenty Twenty-Four 主题首页界面。
网站编辑器的功能和深度使我们能够在通常需要大量代码和资源的主题之上进行构建（和扩展）。它使构建和开发主题的能力民主化，而主界面则是这方面的第一接触点。
探索 FSE 主界面
要找到站点编辑器，请导航至 WordPress 的外观 > 编辑器 ：
WordPress 仪表板中的外观 > 编辑器链接。
该界面非常简单。在右侧，您将看到布局预览。您可以点击它来打开主页的网站编辑器界面。左侧是一组指向其他编辑页面的链接，用于完成特定任务。稍后我们将深入了解这些界面。
在了解 FSE 的五个界面之前，请注意可以使用屏幕左上角的 WordPress 徽标退出站点编辑器。或者，你也可以点击主设计页面上的 “返回” 箭头：
站点编辑器设计主页面。
说完这些，让我们开始使用 FSE。
WordPress 全站编辑的 5 大支柱
现在，我们将按照网站编辑器导航中出现的先后顺序来检查网站编辑器的每个屏幕。事实上，这将引导我们讨论该屏幕！
1. 导航
导航页面取代了外观 > 菜单页面。进入后，你会看到网站上的文章和页面列表：
站点编辑导航页面。
如果这是一个新网站，您将在这里看到所有的文章和页面。这可能会让人感到困惑，因为它代表了你的主导航菜单。在导航标题附近，打开操作菜单。这将提供编辑菜单、更改名称、删除或复制菜单的选项：
在导航页面中打开操作菜单。
如果点击 “编辑“，则会打开一个包含导航区块菜单的区块编辑器版本：
在站点编辑器中使用导航区块。
在侧边栏中，你可以选择向上或向下移动每个条目，将其从菜单中移除，或从中创建一个子菜单：
导航区块侧边栏
菜单中的每个条目都使用页面链接区块，该区块有自己的选项。你可以对内联格式进行调整，也可以对侧边栏样式进行设置：
站点编辑器中页面链接区块的格式选项。
注意，你可以在这里添加内嵌图片、子菜单等。这比创建导航的传统方式更加灵活。要在菜单中添加项目，只需点击加号图标，然后选择文章或页面：
将新页面添加为导航项的选项。
保存更改后，导航就会反映出你的调整。要创建更多菜单，可以使用导航页面上的 “操作”>”复制” 链接。
2. 样式
通过 “样式” 界面，您可以控制网站的整体外观。侧边栏为不同的设计提供了一些不同的调色板和排版设置：
站点编辑器的 “样式” 屏幕。
点击其中任何一个，都会显示网站上的设计。不过，侧边栏顶部有一个编辑铅笔图标，可以在网站编辑器中做进一步更改：
站点编辑器样式侧边栏中的可用选项。
侧边栏中的每个选项都涵盖了颜色、布局、排版甚至阴影设置。例如，你可以选择整个网站的字体，并将它们应用到设计的各种元素中：
站点编辑器侧边栏中的排版设置。
深入菜单通常还能获得更多选项，如间距、颜色等。布局部分可以让你自定义主要内容区域的尺寸，以及填充和块间距：
WordPress 站点编辑器中的布局选项。
如果你想在不浏览网站的情况下查看这些更改的效果，可以使用 “眼睛” 图标打开 “样式手册”。这是一个方便的可视化工具，设计师们一定会喜欢：
WordPress 站点编辑器的样式手册。
最后，虽然我们不会在这里重点介绍，但您也可以为网站自定义每个区块的外观。例如，您可以在段落块的全局样式基础上进行设计。同样，完成后，你可以保存更改，这些更改将应用于你的网站。
在 WordPress 全站编辑中使用 theme.json 文件
在进入下一个 FSE 屏幕之前，你应该了解一下 theme.json 文件。它本质上是开发人员版本的 “样式” 界面。
一个代码编辑器中的 theme.json 文件。
通过它，你可以为网站及其区块定义默认样式，并将其作为配置文件使用。此外，它还使用 JSON 格式，因此与过去相比，它提供了一种代码较少的体验。
总之，无论你在 theme.json 中做什么，你都可以在站点编辑器中做。
3. 页面
页面屏幕复制了 WordPress 面板中经典的 “文章”和 “页面” 屏幕的功能。例如，你会看到一个状态列表，可将页面过滤为已发布、已计划、草稿和其他状态：
站点编辑器中的 “页面” 界面。
每个页面都有额外的操作，如编辑、查看、重命名和删除。你还可以使用 “铅笔 “图标编辑页面。在列表顶部，有一个添加新页面按钮，它的作用显而易见。
如果你已经使用过区块编辑器，那么这些界面会让你感觉很熟悉。不过，虽然这里的功能和平时一样，但站点编辑器还提供了一些额外的主题区块来帮助你创建网站。它们涵盖了典型的使用情况，如添加网站徽标、导航、作者、评论等：
从 WordPress 站点编辑器中选择主题区块。
其中一个主题块–查询循环区块–可以帮助你完成通常需要 PHP 才能完成的任务。例如，由于它可以让你根据特定参数显示文章，因此你可以显示最新的文章，甚至建立一个投资组合。但是，如果没有站点编辑器中的最后两个屏幕，这些都无法实现。
4. 模板
模板是 WordPress 开发的主要部分。它们是可重复使用的布局，可帮助您定义网站各部分的结构。这通常需要具备 PHP 方面的专业知识，但你可以在网站编辑器中自定义所有模板（并创建新模板），而无需编写代码。
站点编辑器中的模板界面。
处理模板的方法与处理文章和页面的方法相同：使用站点编辑器为模板添加区块，然后保存更改。当然，这些更改将适用于使用相关模板的每个页面。
要创建新模板，请单击 “添加新模板” 按钮：
在站点编辑器中添加新模板。
这将通过一个快速向导来选择要创建的模板类型和合适的区块模式来开始设计。这些模式是上一节的重点。
5. 样板
区块样板是区块的相关集合，可在网站上发挥特定作用。例如，您可以在标题模式中加入徽标、导航和网站标题：
在站点编辑器中制作Header区块样板。
创建这些模式非常简单，不过如果没有站点编辑器，您需要使用 PHP 注册这些样板。不过现在可以使用样板页面：
站点编辑器中的区块样板库。
在左侧，你会看到所有可用的样板都被分成了名为 “类型” 的文件夹。这些都是快速构建网站设计的好方法，而且通常看起来非常漂亮。
添加新样板按钮会打开编辑器，让你自己创建这些部分。这样你就可以为自己的网站创建可重复使用的元素，为自己和其他合作者开发网站提供了一种可持续和自我服务的方式。
使用 WordPress 全站编辑创建设计的技巧
说到 WordPress 全站编辑，有很多东西需要深入研究，我们无法涵盖您可以用它做的所有事情。不过，我们可以传授一些充分利用 FSE 的技巧。
例如，您可以导出模板和样式，以便在其他网站上重复使用。要做到这一点，请进入任何文章或页面的网站编辑器，然后点击顶部工具栏上的选项菜单。在下拉菜单中选择导出：
从站点编辑器的选项侧边栏中导出主题。
这样就会得到一个主题的 ZIP 文件，如果需要导入，可以使用 WordPress Importer 插件。
通过网站编辑器屏幕上的搜索图标和区块编辑器工具栏上的搜索栏，可以访问 WordPress 编辑器命令面板或命令中心。如果你使用编码编辑器，你就会明白它是如何工作的。通过上下文搜索查询，您几乎可以访问网站编辑器中的任何地方，甚至可以运行命令：
从站点编辑器的设计屏幕打开并使用命令面板。
使用它可以加快开发速度，减少键盘和鼠标操作次数。您可以在这里添加、删除和编辑各种网站元素，还可以切换不同的视图和使用模式。
小结
WordPress 全站编辑功能代表了目前无需代码即可设计网站的方式。与之前的内容编辑迭代相比，它有了长足的进步，为您提供了一整套可供选择的选项。
我们喜欢它的灵活性：一般的网站所有者无需接触任何代码，只需在网站编辑器屏幕上操作即可。开发人员可以访问 theme.json 文件，我们将在以后的文章中介绍。无论如何，现在我们已经达到了按照您的具体要求创建 WordPress 网站的巅峰。
你想开始在你的 WordPress 项目中使用 WordPress 全站编辑功能吗？请在下面的评论区告诉我们您的想法！
评论留言