作者： Next

引言

正如我们所学到的，区块是构建在线家园的基石。你可以将它们视为网站的实体积木。在本课中，我们将基于对区块的了解，探索使用各种类型的区块，以及嵌套和分组区块来创建不同的布局。

嵌套区块

嵌套区块通过在一个区块内部添加多个区块，帮助你创建更复杂的布局。我们通常使用容器区块，如群组区块、列区块、封面区块、媒体与文本区块或行区块，来将内容分组在一起。

提醒一下，当你打开列表视图时，你可以在内容层和嵌套区块之间导航。让我们看看这个主页上的第二个部分，来实际体验一下。我会选择列区块。当我们展开列区块时，会看到内部的所有区块。在左列中，我们会看到一个标题区块、一个分隔区块和一个段落区块。在右列中，我们会看到一个包含四张图片的图库区块。让我们一起来创建一些示例。

群组区块

首先，我将使用群组区块将一些区块分组在一起。但首先，我会添加一个标题区块，并给它起一个合适的名称。在这个例子中，标题是“笑是最好的良药”。然后我按回车键，添加一个列区块，选择两列等宽，然后在左列和右列中添加一些文本。接着，我会在列表视图中按住 Shift 键并点击鼠标来选择这两个区块，这样我就能选择多个区块，然后使用区块工具栏将它们分组到一个群组区块中。

接下来，我想将群组区块的宽度改为宽幅。但在那之前，我必须取消选中“内部区块使用内容宽度”。只有取消选中这个选项后，嵌套区块才能使用内容宽度选项，比如宽幅和全宽。如果我不取消选中这个选项，我就无法将对齐方式改为全宽。正如你所见，什么都不会发生。所以一旦取消选中，我可以返回区块工具栏，将宽度改为宽幅，而不受主题的限制。

接下来，我们可以打开样式标签，进一步为我们的区块设置样式。我首先要做的是更改群组区块的背景颜色。请注意，如果你愿意，也可以为群组区块添加背景图片。点击排版旁边的三个垂直点，查看所有可用选项。接下来，我会添加一些内边距，为区块内容创造更多空间。你可以决定进一步为群组区块设置样式。

当页面上有多个内容层时，你可以使用群组区块来重命名部分。所以，在上面的例子中，我们会看到第一个部分叫做“我们的故事”，现在我可以选择下面的群组区块并重命名它。在这个例子中，重命名为“推荐语”。因此，群组区块的这个功能将允许你构建和组织内容。

媒体与文本区块

在下一个示例中，让我们使用媒体与文本区块来分组区块。所以，让我们添加媒体与文本区块。然后，在左侧，我们可以从媒体库中添加一张图片。在右侧，我们可以开始添加内容。在顶部，我会添加一个标题，命名为“寿司是艺术”。按回车键，然后添加一些文本。在底部，我想添加一个行动号召，或者在这个例子中，是一个按钮区块。然后我会写上“了解更多”，并使用区块工具栏将文本加粗，并添加相关的 URL。接着，我会在列表视图中选择父区块，并将对齐方式改为宽幅。如果你想要更改并让图片显示在右侧，也可以使用区块工具栏。在设置下方，我会将媒体宽度改为 40。然后，我会打开样式标签，在内容周围添加一些内边距。最后，我会将图片的垂直对齐方式改为底部对齐。

列区块

在下一个示例中，我们将使用列区块。列区块是创建复杂布局或设计最有效的区块之一。所以，让我们添加一个列区块，然后选择三列等宽。在左列中，我会添加一些文本，命名为“拼盘”，按回车键，然后添加一个段落。在下面，我会添加一个图片区块，并从媒体库中选择一张图片。然后，我会选择顶部的文本，将其加粗并放大字号，接着将两个段落的文本居中。一旦居中对齐，我会选择图片区块，将宽高比改为正方形。然后我会选择主要的列区块或父区块，将对齐方式改为宽幅。

之后，我会进入样式设置，为区块内容添加内边距，并在三列之间设置区块间距。完成样式调整后，我会选中左侧列并复制两次。复制完成后，我们就可以删除空白列。接着，我们可以根据需要自由修改内容。

封面区块

在最后一个示例中，我们将使用封面区块。封面区块允许你在图片或视频上方显示文字及其他内容，非常适合用于页眉和横幅式展示。那么，我们直接添加封面区块。你会看到可以选择颜色叠加层。不过我会从媒体库中选择一张图片作为背景。然后添加一些文字，接着添加一个按钮区块。我会输入”下单”并修改行动号召按钮的背景色和文字颜色。接着选中这两个区块，用堆叠区块将它们组合在一起。这样就能同时自定义这两个区块。然后将堆叠区块居中对齐，选中封面区块并将对齐方式改为宽幅。别忘了取消勾选”内部区块使用内容宽度”。现在我们可以进行进一步调整。我会放大”享受八折优惠”的文字和按钮区块。我还想让按钮区块的文字加粗，别忘了添加你的网址。然后选中封面区块，请注意在区块工具栏中可以切换全屏高度。但我们也可以手动缩小或放大尺寸。接着打开样式选项卡，将叠加层透明度改为30使其更淡。这样我的封面区块就准备好了。相信你现在对嵌套和组合区块已经更有信心了。

引言

在本课中，我们将创建并自定义页眉和页脚。区块主题允许我们使用区块构建整个网站，包括页面、文章、模板和模板部分。我们已经探讨了嵌套区块和使用区块模式。在本节中，我将使用主题自带的模式创建并自定义网站的页眉和页脚。页眉和页脚模式为您提供了坚实的基础，大部分布局已经为您完成。

静态首页和文章页

在开始之前，我想强调一下，我使用的是 Twenty Twenty-Four 区块主题。如果我进入“设置”->“阅读”，您会注意到我设置了静态首页和文章页。因为我已经这样做了，如果我们进入“页面”并打开首页，我们会注意到首页已分配到默认页面模板，与导航菜单中的其他页面相同。

页眉和页脚模式

让我们开始吧。我们将进入站点编辑器，在这里我们可以编辑和更新模板。请注意，在此阶段，所有模板共享相同的页眉和页脚。例如，如果我们打开页面模板，会注意到它与 404 模板和单篇文章模板相同。但这意味着什么呢？这意味着如果我们自定义当前的页眉和页脚模板部分，它将自动更新所有使用它的模板。但如果我在某个模板上替换了页眉或页脚，我也需要手动在其他所有将使用它的模板上进行替换。

添加页眉模式

那么，事不宜迟，我将打开页面模板，开始自定义页眉和页脚。让我们从页眉开始，打开列表视图。我想替换页眉，所以点击三个垂直点，然后选择“替换页眉”。现在，我可以从主题自带的一系列模式中进行选择。我将选择“全宽背景图像中的页眉”。选择后，我将开始修改。我会确保选择封面区块，然后用我已上传到媒体库中的图像替换背景图像。接下来，我将选择站点徽标区块，并上传一个我已保存为媒体库中徽标的透明图像。然后，我将再次选择封面区块，打开样式，并将不透明度改为零，因为我选择了一张浅色图像。完成后，我将选择站点标题区块，并选择一种较深的文本颜色。然后点击排版旁边的三个垂直点，选择字体系列并选择一种新字体。我还想放大站点标题，所以我会设置一个自定义大小。

然后，我们可以继续处理导航区块。选择导航区块后，我将打开样式，更改文本颜色，更改字体系列，并通过设置自定义大小来放大导航菜单。最后一步，我想在行区块周围添加一些内边距。所以，我将打开样式和下方的尺寸设置，添加更多内边距以在文本周围创造更多空间。然后，我们的新页眉就完成了。下一步是保存，然后使用我通过模式创建的这个新页眉更新其他模板。例如，让我们打开 404 模板并替换页眉。现在您会在下方看到：现有的模板部分。我们可以保存，然后对所有其他相关模板执行相同操作。

自定义页脚模式

现在，我们可以返回页面模板，继续处理页脚。在这种情况下，我不会替换页脚，而只是更新现有模式，然后它会自动更新所有其他模板。首先，我将放大站点徽标区块，并在站点标题下方的站点标语区块中添加我的站点标语。现在，我们可以处理右侧的三列。我将选择中间区块的标题，并将其改为“快速链接”。然后，我将选择已添加了虚拟内容的导航区块。在侧边栏设置中，在“菜单”旁边，点击三个垂直点，然后选择页眉导航。我还会打开设置选项卡，再次确认方向是垂直的。现在，我们可以继续处理下一列；这次，我将用新的导航菜单替换虚拟内容。所以，我将点击“创建新菜单”，然后选择我已创建的隐私政策页面以及条款和条件页面。在最后一列，我将确保更新指向我社交媒体平台的链接。目前是虚拟内容，因此我将用正确的链接替换井号。现在，我的页脚完成了，当然，我还可以进行进一步修改。保存后，我们可以前往其他模板，例如 404 模板，我们会看到页脚已自动更新。这是当我访问联系页面时前端的视图。

结论

我相信页眉和页脚模式将为您提供助力，并为您的页眉和页脚设计提供坚实的基础。

引言

在本课中，我们将应用目前所学的内容，设置页面、文章、网站标志和导航菜单。

设置页面

首先，我们来创建页面。我将进入页面，点击“添加新页面”，然后就可以添加或选择主题自带的模板。我使用的是默认的 Twenty Twenty-Four 主题。我会选择一个喜欢的模板，并将其命名为“首页”。发布后，我返回页面，添加下一个页面。这次我不选择模板，将这个页面命名为“博客”。接下来，我会创建一个“关于”页面，并选择相应的模板。最后，我还会创建一个“联系”页面，不选择模板。现在，我的页面已经就位了。

设置首页显示

接下来，我进入“设置”，点击“阅读”。对于首页显示，我会选择“静态页面”，并将“首页”设置为静态首页，将“博客”页面设置为文章页。提醒一下，如果你选择了“最新文章”作为首页显示，那么你需要修改博客首页模板来展示这个首页或主页，因为没有创建具体的页面。请注意，当我们打开静态首页并打开设置侧边栏时，会注意到这个页面被分配给了“页面模板”或默认页面模板，而我的博客页面或文章页被分配给了“博客首页模板”，并且这个不能更改。然后，我们还会注意到，我的其他页面也被分配给了通用或默认页面模板，和我的首页一样。

设置文章

接下来，我们把注意力转向文章。你会注意到，我已经创建了两篇文章，以及分类和标签。提醒一下，分类用于将内容归类到主要主题或部分，而标签就像标签一样，提供关于内容的特定细节。举个例子，我来添加一篇新文章。这篇文章是关于纽约的，我会添加一些虚拟内容。然后，我会打开设置侧边栏，选择相关的分类，这里选择“旅行”，并添加一个新标签，即“城市”。最后，我会设置特色图像或文章缩略图。特色图像当然是文章的代表性图片，设置好后，我们可以点击发布，然后查看我们的三篇文章及其相关分类和标签。

设置导航菜单

接下来，我们仔细看看导航菜单。进入“外观”，点击“编辑器”。这将打开站点编辑器，我们会看到右侧的首页。如果打开首页，我们会看到创建页面时添加的虚拟内容或模板。顶部是主题提供的页眉模板。如果我们尝试编辑这个页眉，会看到一条消息说“编辑模板以编辑此区块”。我们点击“编辑模板”。现在，我们可以编辑页面模板的页眉。请注意，这个页眉也会出现在博客首页模板中。所以，如果我们对页面模板中的页眉做了任何更改，它也会自动更新到博客首页模板中。如我们所见，右上角有导航菜单，很棒的是，这个导航菜单是在我们创建页面时自动添加的。当我们选择导航菜单并打开列表视图时，会注意到导航项仍然是页面列表的一部分。所以，要更改这一点，请在设置侧边栏中点击“编辑”以分离页面列表，这样你就可以单独管理导航项。分离后，你可以使用列表视图重新排序导航项。或者，你可以使用导航区块工具栏的箭头将项目重新定位到你想要的位置。

接下来，我决定在导航菜单中添加社交链接。所以，当我点击导航区块的插入器时，我会插入一个社交图标区块，然后选择相关的社交媒体平台。这里选择 X 和 Instagram。别忘了添加相关的 URL。当你选择导航区块时，可以点击设置侧边栏中的三个垂直点来创建新菜单或选择现有菜单。当你选择“设置”时，可以更改导航菜单的对齐方式以及方向。在下面，你还可以选择汉堡菜单，当你的网站在较小设备上查看时会显示。当你点击“样式”时，有多种选项可以进一步样式化你的导航菜单。

设置网站标志

接下来，我们来谈谈网站标志区块。你会注意到，主题提供的页眉模板包含一个网站标志区块。点击网站标志区块，从媒体库添加新图像或直接从电脑上传。我会上传一个已经放在桌面上的标志。然后，我会稍微放大它。

将导航菜单添加到页脚

接下来，我还想将导航菜单添加到页脚。当我们向下滚动时，会注意到快速链接下方有一些示例内容，这些内容是我主题自带的默认页脚模板的一部分。因此，当我打开列表视图并选择导航区块时，可以点击设置侧边栏中的三个垂直点，然后选择相关的导航菜单。

选择样式

现在，我的导航菜单已经分别放置在页眉和页脚中。如前所述，当我们进入博客首页模板（即我的文章页面模板）时，会看到页眉和页脚是相同的。当所有这些元素都就位后，我们需要为网站确定整体风格。因此，当我们进入样式设置时，可以自定义网站的排版、颜色和布局。或者，如果点击浏览样式，就能以缩略图方式查看主题附带的所有不同样式组合。我将以 Rust 风格为例进行选择。

添加内容

现在，我们已经设置好了页面、文章、导航菜单、网站徽标和样式，接下来可以为页面添加内容，并修改已添加的一些模板。对于像联系我们这样没有模板的页面，我们可以从头开始构建。要调整文章的显示方式，我们需要进入博客首页模板。打开博客首页模板后，我们可以自定义博客页面以及查询循环区块，从而决定博客文章或动态内容的显示方式。

简介

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

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

什么是模板部分？

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

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

编辑模板部分

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

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

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

从头创建模板部分

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

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

学习成果

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

定义

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

探索模板

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

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

编辑模板

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

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

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

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

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

分配模板

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

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

页眉和页脚模板部件

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

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

结论

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

简介

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

导航

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

样式

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

样式手册

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

样式修订

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

页面

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

模板

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

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

分配模板

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

管理模板

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

模式

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

自定义模式

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

模板部分

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

命令面板

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

总结

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

学习成果

我们将尝试回答一个问题：区块编辑器和站点编辑器有什么区别？我们会比较区块编辑器和站点编辑器，并探索站点编辑器的工具。最后，我们将能够自信地将两者结合使用，创建整个网站布局。话不多说，让我们开始吧。

区块编辑器与站点编辑器

站点编辑让你可以自由地构建 WordPress 网站的每个方面，从页眉到页脚，利用站点编辑器功能中的区块。但什么是站点编辑器？它和我们习惯的区块编辑器有何不同？我们如何在站点编辑器中使用模板来创建整体结构？

让我们通过仪表盘来回答这些迫切的问题，并比较两者。区块编辑器是网站内容的基础，用于向页面和文章添加内容。让我们回顾一下如何添加页面和文章内容。在仪表盘中，如果你要创建静态页面，请前往“页面”；如果是动态内容（如博客文章），请前往“文章”。当你点击“添加新”时，你就在为该页面或文章创建内容。

相比之下，站点编辑器允许我们做什么？站点编辑器允许我们统一编辑网站。页面和文章仅用于使用区块添加静态或动态内容。另一方面，站点编辑器使用区块通过模板创建网站的整体外观和感觉。但它也允许我们添加和编辑页面，以确保无缝的站点编辑体验。如果你已经安装了像 Twenty Twenty-Four 这样的区块主题，可以通过“外观”然后点击“编辑器”来访问站点编辑器。

站点编辑器会加载网站首页进行编辑。左侧是站点视图侧边栏。这个工具让你可以在网站的关键部分之间切换：导航、样式、页面、模板和模式。

导航

让我们从导航开始。在这里，你可以快速查看和调整所有菜单。你可以重命名它们、重新排列菜单项等。

样式

当你点击“样式”时，你可以更改主题的样式组合。当你点击“编辑样式”时，你可以更改整个网站的排版、颜色和布局。如果你往下看，还可以自定义整个网站中特定区块的外观。要查看编辑这些区块后它们会如何变化，请前往网站的样式手册。如前所述，你可以预览在此所做的任何更改。

页面

在“页面”下，你可以创建和编辑页面，与在仪表盘中相同。此功能允许你在编辑网站或页面内容时留在站点编辑器中。在站点编辑器中处理页面时，我们向内容区块添加内容。

模式

接下来，我们进入模式。在“模式”下，我们可以访问一个模式库。我们将能够创建和管理自己的模式。我们可以查看主题提供的模式。然后，我们还可以创建和管理模板部件。关于模板部件的快速说明：这些是可重复使用的区块组，用于创建模板中的重复部分，如页眉和页脚。

模板

但现在，让我们专注于模板。当我们打开模板时，让我们看看顶部菜单，并了解这些元素允许你做什么。左上角的加号图标或插入器允许你向正在处理的任何模板添加任何区块或区块模式。在插入器旁边，有撤销和重做按钮。接下来是列表视图。这是一个非常有用的工具，允许你查看页面上所有区块的列表。这对于查看页面结构以及编辑、移动和删除区块非常有用。顶部中间是模板的名称。

当你点击预览按钮时，你将能够看到网站应用更改后在桌面、平板或移动设备上的外观。然后，如果你点击“保存”，可以保存更改。接下来，设置选项卡允许你显示或隐藏模板和区块设置侧边栏。例如，当你选择一个区块时，可以使用设置侧边栏进一步设置区块样式。在设置选项卡旁边，有样式选项卡，这是另一个访问样式设置的地方。最后，如果你点击三个垂直点，你将获得更多选项，例如选择聚光灯模式等。现在我们已经简要介绍了菜单选项。让我们更仔细地看看模板。

顶部显示“用模板表达你网站的布局”。模板使用区块来创建网站的整体设计，例如添加页眉、页脚甚至侧边栏。当我们打开侧边栏模板的页面时，可以看到这三者都在发挥作用。我们可以看到页眉、侧边栏和页脚提供的结构。请注意，模板可以应用于单个或多个页面。考虑到这一点，假设我们想要添加应用于我们页面的模板，例如。这里我们的主题提供了几个选项，例如默认页面模板或带宽图的页面。但我们选择无标题页面。

当模板加载时，你会看到这个模板在没有内容时的示例。这时列表视图就非常方便了。左侧的侧边栏会显示构成此模板的区块是如何结构的。在这里，你可以看到组成这个页面模板的组件。当你点击页眉时，它会像页脚一样被清晰标记。在中间，你会看到一个包含文章内容区块的群组区块。这非常重要。内容区块允许你的页面或文章内容出现在这个模板中。把这个区块想象成你写在页面或文章部分内容的容器。没有容器，你的页面内容就没有地方显示。所以请记住，我们不会向模板添加内容。我们只修改页眉、页脚或侧边栏。

让我们继续，用主题自带的另一个页眉模式替换这个页眉。我们可以滚动浏览可用的选项。然后我会选择带有标志的居中页眉模式。我还会选择一个现有的导航菜单，名为“生活方式”。选择完成后，我们可以继续保存。太棒了，页面模板已保存。但是我们如何将这个模板添加到页面中呢？我们可以导航回主仪表盘，进入页面。然后，点击你想要应用此模板的页面。在右侧的侧边栏中，你会看到一个模板标题。点击它。这个下拉菜单列出了你当前保存的所有模板。在这种情况下，让我们选择“无标题页面”。然后我们可以更新。这是默认页面模板下的页面样子。这是应用了无标题页面模板后的样子。你可以根据需要为任意多个页面重复此操作；文章也是如此。

结论

如你所见，区块编辑器和站点编辑器协同工作。区块编辑器只允许我们向页面和文章添加内容。然而，站点编辑器让你能够整体编辑你的网站。你可以编辑外观和感觉、修改模板以及向页面添加内容。

介绍与学习目标

在本课中，我们将深入探讨媒体库。我们将学习如何浏览和管理媒体库、添加替代文本，并理解优化图片的重要性。

什么是媒体库？

媒体包括你上传并在网站上使用的图片、视频和文件。当然，媒体会被插入到页面和文章中。我相信你也会同意，媒体在提升网站的整体体验和效果方面起着关键作用。你可以向媒体库添加各种类型的媒体，从照片、截图、音频、PDF文档、电子表格、PowerPoint演示文稿等等。

浏览媒体库

当你打开媒体库时，它会默认以网格视图显示。在网格视图中，图片缩略图、音频图标等都以网格结构排列。在这里，你可以筛选媒体以找到所需内容。在顶部，网格视图图标旁边，你可以按媒体类型和日期筛选媒体。“所有媒体项目”下拉菜单允许你按媒体类型选择，如图片、音频、视频、文档，甚至电子表格。你还可以查看未附加到任何文章或页面的媒体。这意味着媒体在你的媒体库中，但尚未在网站的任何地方使用。例如，让我们使用筛选选项，仅查看音频文件。或者文档，如PDF。甚至电子表格。然后，当然，你可以返回查看所有媒体项目。接下来，“所有日期”下拉菜单允许你根据上传日期查看图片。你可以快速找到在特定月份上传的媒体，或者选择查看所有。当你点击“批量选择”时，可以同时删除媒体。你还可以使用右上角的搜索框搜索媒体，例如，使用描述或文件名中的词语。在这种情况下，我想通过简单搜索查看所有与鞋子相关的图片。你也可以在列表视图中查看媒体。顾名思义，在列表视图中，所有媒体会依次列出。你还可以看到文件名和文件类型，例如PDF或JPEG。要向媒体库添加媒体，请点击侧边栏或顶部的“添加新媒体文件”。选择后，你可以将单个或多个文件拖放到页面中，或使用“选择文件”选项。

从媒体库添加媒体

当你使用图片块或画廊块向页面或文章添加媒体时，你可以直接从计算机上传图片到文章或页面及媒体库，或直接从媒体库中选择。对于较大的视频，最好通过YouTube或视频块嵌入，这样可以节省媒体库空间并提高性能。

编辑媒体

当你打开一张图片时，你可以添加属性，如替代文本、标题、说明和描述。始终为图片添加替代文本非常重要。替代文本是对图片的简洁描述，供无法查看图片的用户使用，同时也有利于网站的SEO（搜索引擎优化）。添加描述也能增强SEO，并有助于更好地组织和理解图片的目的或内容。当你点击“编辑图片”时，可以裁剪、缩放或调整图片大小以进行图片优化。更改高度或宽度后，尺寸会自动更新。别担心，当你选择“恢复原始图片”时，可以将图片恢复到原始格式。你还可以选择旋转或翻转图片。

图片优化

最后，让我们简要谈谈图片优化。建议在上传到媒体库之前优化图片，以提高页面加载速度并节省服务空间。你可以使用基于网页的工具来实现这一点，例如TinyPNG、Bulk Resize或Squoosh.app等网站。记住，在将图片添加到媒体库之前，使用描述性和相关的文件名保存图片。这有助于搜索引擎理解图片内容，从而提升SEO。搜索引擎在索引和排名内容时可能会将文件名作为参考因素。另一个选择是使用图片优化插件。在搜索插件目录时，有多种图片优化插件可供选择。找到适合你需求的插件后，你可以安装、激活并按照必要步骤操作。这两种方法（使用基于网页的工具或插件）都能通过压缩图片而不牺牲视觉质量来提升整体性能。祝你在使用媒体库将网站提升到新水平的过程中一切顺利。

实践练习

使用WordPress Playground并完成以下活动以测试你的知识：

1. 上传两张图片和一个PDF或电子表格到你的WordPress媒体库。如果你的计算机上没有图片，可以使用https://unsplash.com/。
2. 使用媒体库中的筛选选项仅显示图片，然后仅显示文档。然后，返回查看所有媒体项目。
3. 在你的 WordPress 网站上创建一个新文章或页面。使用相应的区块（例如，图片区块、画廊区块）从你的媒体库中插入至少一张图片。
4. 将 YouTube 的视频网址添加到视频区块中。
5. 从你的媒体库中选择一张图片，并编辑其属性，如替代文本、标题、说明文字和描述。
6. 通过缩放图片并提供新尺寸来编辑图片。完成后恢复原始图片。