分类： 站点编辑

简介

在本课中，我们将更深入地了解如何使用模板部分。通过本教程的学习，你将能够描述模板部分是什么以及它们如何工作，编辑模板部分，并在模板中替换它。如果你访问一个设计良好的网站，你会注意到其优势之一就是一致性。网站的页眉、页脚和侧边栏通常包含相同或相似的内容，以便访问者无论身处网站的哪个位置，都能轻松找到所需信息。

为了达到这种效果，网页设计师是否需要在每个网站页面上从头构建页眉、页脚和侧边栏？简短的回答是：不需要。使用 WordPress 区块主题，你将使用一个称为模板部分的功能。

什么是模板部分？

首先，什么是模板部分？模板部分是一组区块，你可以用它们来创建模板中重复的部分，比如页眉、页脚和侧边栏。让我们在 WordPress 仪表盘中实际操作一下。前往“外观”，然后点击“编辑器”。这将带我们进入站点编辑器，然后我们打开其中一个模板，本例中是博客首页模板。

我们在模板中创建和修改页眉和页脚模板部分。一些区块主题提供更多或更少的选项，但几乎所有主题都预装了页眉和页脚，就像你在 Twenty Twenty-Four 主题中看到的那样。WordPress 通过提供现成可用的页眉和页脚模式，使操作更加简单。因此，当你点击页眉模板部分的三个垂直点并选择“替换页眉”时，你首先会看到现有的模板部分。这些是我已经创建的模板部分。然后，在下面，我们会找到页眉模板部分模式。你可以选择主题附带的任何模式。如前所述，某些主题可能提供更多，某些则更少。页脚的操作方式完全相同。

编辑模板部分

让我们从编辑页眉模板部分开始。当你在博客工具栏中点击“编辑”时，你可以在编辑模式下专注于页眉模板部分，而不会受到其他干扰。首先，让我们打开“列表视图”。然后，我将继续向页眉模板部分添加我的站点徽标。选择“站点徽标”区块后，我可以从媒体库或计算机上传图像。

接下来，我将选择“站点标题”区块，并添加此网站的站点标题。然后，我将保存我的页眉模板部分，并返回博客首页模板。提醒一下：模板部分是同步的，并且会在所有使用它们的地方更新。你会注意到紫色表示模式已同步。让我们在其他模板中实际验证一下。例如，当我们打开页面模板时，会看到页眉完全相同。或者当我们打开 404 模板时，会看到更改也已应用到这里，因为模板部分是同步的。

如果你希望首页有不同页眉，而网站其余部分使用标准页眉，该怎么办？在这种情况下，你需要创建一个新的页眉模板部分，或者用模式替换页眉，并将其添加到博客首页或首页模板。我将修改我的博客首页模板，因为我已将文章页面选为首页显示。所以我会确保选中页眉，点击三个垂直点，然后选择“替换页眉”。现在，你可以使用模式或现有模板部分替换首页页眉。我将用一个现有的页眉模板部分替换页眉，这个部分我已经创建好了，叫做“横幅页眉”。现在，我的首页将拥有自己独特的页眉。保存后，我们可以查看其他模板，确认它们仍然使用标准页眉。

从头创建模板部分

最后，我们来谈谈从头创建模板部分。前往“模式”，然后向下滚动到“模板部分”。你可以在这里查看所有现有的页眉、页脚和通用模板部分。要创建新的模板部分，请点击“模式”旁边的加号图标，然后选择“创建模板部分”。在这里，你可以选择不绑定到特定区域的通用模板部分、页眉模板部分或页脚模板部分。在本例中，我们将创建一个页脚模板部分。

首先，我们需要给它取一个合适的名称。这里就叫“四列页脚”，然后点击“创建”。这会再次进入专注模式；从这里开始，我们可以从零开始构建。为了省事，我会从“模式目录”中快速获取一个现成的模式。前往 wordpress.org，点击“扩展”，选择“模式”。在这里，你可以从数千个模式中进行选择。我会选择“社区贡献”，点击“页脚”，然后搜索合适的模式。一旦找到喜欢的模式，你可以复制它，返回你的网站并粘贴。现在你可以开始修改它以满足你的需求。更新完成后，我们可以返回模式区域，你会注意到新的页脚已成为现有模板部件的一部分。你可以将其添加到任何模板中。当选择“管理所有模板部件”时，你可以重命名和删除自定义模板部件，或者清除主题提供的模板部件的自定义设置。我相信你现在已经能够自如地编辑模板，并为你的网站创建页眉和页脚了。

学习成果

在本课中，我们将更深入地探讨模板。在本教程结束时，我们希望能够区分页面和模板，知道如何修改我们的基础模板之一，如何添加新模板，以及最后如何将自定义模板分配给页面或文章。

定义

模板提供了页面显示的结构。这通常包括一个头部模板部分、一个内容区域和一个底部模板部分。我认为从一开始就澄清以下信息很重要。模板不是用来发布内容的；模板用于文章或页面，通过文章内容块显示您的内容。顾名思义，模板是可以应用于单个或多个页面和文章的设计模板。

探索模板

要访问模板，请前往外观并点击编辑器。这将带您进入站点编辑器。编辑器可用于自定义整个站点的样式、编辑页面、修改模板以及管理站点上所有不同的模式。当您开始构建新网站时，您可以编辑现有模板或添加新模板，而您使用的主题将决定哪些现有或内置模板可供使用。

首先是页面模板，它创建了显示单个页面的结构。接下来是单篇文章模板，它显示单篇博客文章。索引模板显示文章，而404模板则在未找到内容时显示。当然，这些模板都可以根据您的喜好进行修改。还有其他值得探索的内置模板，例如空白模板。要添加新模板，请点击模板旁边的插入器或加号图标。会出现一个模态框，您可以在其中选择不同的模板选项。例如，您可以为特定页面创建模板，为所有文章分类或单个分类创建模板。您甚至可以创建自己的自定义模板，该模板可以应用于任何文章或页面。当您创建新模板时（在本例中是自定义模板），并且在命名之后，系统会询问您是否要选择一个模式，如果您想从空白开始，只需选择跳过。

编辑模板

接下来，我们如何编辑模板？选择相关模板后，您可以点击侧边栏中页面旁边的编辑图标，或右侧模板屏幕上的编辑图标。一旦模板打开，您就可以开始编辑头部和底部模板部分。

让我们暂停片刻反思一下。当您编辑模板时，必须记住区分动态部分和静态部分。动态部分是内容部分，对于使用该模板的每个页面或文章都会发生变化。正如您在此示例中看到的，页面或文章的内容将显示在已添加到模板中的文章内容块所在位置。静态部分是模板中保持不变的可重用部分，例如头部和底部。因此，我们不会向模板添加任何内容。因此，站点编辑器明确区分了编辑页面内容及其模板，使您更容易在两种模式之间切换并在适当的上下文中查看它们。

让我们看看实际操作。让我们继续打开我们的一个页面。在本例中，是我的示例页面。一旦我们打开页面，我们也可以继续打开列表视图。当我们选择文章内容块时，我们会注意到我们添加的所有内容都已添加到文章内容块中。您也会在右侧的设置侧边栏中看到这一点。

但是，如果我尝试编辑头部和底部会发生什么？让我们继续点击头部尝试修改它。您会看到弹出消息，提示您需要编辑模板才能编辑此块。底部也是如此。如果我们尝试编辑底部，系统会提示我们前往模板。因此，要执行此操作，我们可以点击右侧设置侧边栏底部的编辑模板。这将带您进入已分配给相关页面的模板。现在，我们可以继续更新头部和底部。我们还会注意到文章内容块只是一个占位符。我们不能在此处添加任何内容。

接下来，我将选择我的底部，点击三个垂直点，然后用我现有的一个底部模板部分替换此底部。完成后，我将点击保存。我现在已经更新了我的页面模板。如果您想返回页面，请点击工具栏上的返回。这将带您返回页面，以便修改内容。您可以单独编辑模板。当我们回到侧边视图侧边栏中的模板时，我们会注意到最底部有一个管理所有模板的选项。当您选择此选项时，您将能够重命名和删除您创建的自定义模板，或者清除您修改过的内置模板的自定义设置。

分配模板

在下一节中，我们将讨论如何为页面或文章分配不同的模板。现在，我们正在示例页面的前端，并且已经将此页面分配给了页面模板。我提前创建了一个自定义模板，其中包含新的页眉和页脚。

要分配新的自定义模板，我们可以点击顶部的“编辑页面”，或者进入仪表盘，打开“页面”，选择相关页面，在本例中是示例页面。打开页面后，我们会看到内容，但当我们打开右侧的侧边栏设置时，会发现此页面已分配给了默认的页面模板。如果点击模板名称，你会注意到可以从此处添加新模板。你可以编辑分配给页面的模板，或者如果点击下拉菜单，可以选择或为此页面分配一个新模板。我将选择我创建的自定义模板。完成后，我会点击更新。我们可以在新标签页中预览页面，现在会看到此页面有了新的页眉和页脚，这是因为我已经为此页面分配了自定义模板。

页眉和页脚模板部件

最后，让我们简要讨论一下用于设置模板的页眉和页脚模板部件。你可以直接在模板中编辑页眉或页脚模板部件。在这个例子中，我正在编辑我的页眉模板部件，并将我的站点标题和站点标语块堆叠在一个组合块中。然后，我还会确保打开设置侧边栏，移除两个块之间的一些间距。当你选择页眉或页脚模板部件时，会看到一个“编辑”选项。选择“编辑”后，你可以在模板编辑模式下无干扰地编辑模板部件。

另一个选项是进入站点视图侧边栏中的“模式”。选择“模式”后，你可以滚动到底部，在这里可以查看和修改你的页眉、页脚和通用模板部件。要添加新的模板部件，请点击“模式”旁边的加号图标，然后选择“创建模板部件”。你可以在通用、页眉和页脚模板部件之间进行选择。通用模板部件不绑定到任何特定区域；记得给你的模板部件起一个描述性的名称。当你点击模板部件下方的三个水平点时，可以重命名、复制或删除它。当你选择模板部件时，可以在编辑模式下无干扰地修改它，如前所示。

结论

我们希望你现在对模板的工作原理有了更好的理解。回顾一下，模板提供了内容显示的结构，这通常通过页眉和页脚模板部件来实现。模板可以分配给单个或多个页面。

简介

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

导航

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

样式

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

样式手册

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

样式修订

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

页面

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

模板

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

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

分配模板

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

管理模板

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

模式

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

自定义模式

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

模板部分

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

命令面板

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

总结

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