分类： 内容创作

简介

本教程将展示如何快速在您的网站上嵌入媒体和第三方内容。嵌入是一种在网站上显示外部媒体或内容的方式，无需直接上传或托管这些内容。通过嵌入，您可以无缝整合各种类型的内容，例如视频、社交媒体帖子、地图、音频片段等。例如，您可以在网站上显示来自 Spotify 的播客，或者来自您 Tumblr 账户的帖子——我曾在“列”块中通过更改背景颜色来展示这些帖子。最常见的嵌入可能是嵌入来自 YouTube、Vimeo 或其他平台的视频。您甚至可以使用 CrowdSignal 向网站添加调查问卷，或者决定在网站上添加来自 X 的帖子。最后，您还可以显示来自 SoundCloud 的音乐。要添加嵌入块，请点击左上角的“插入器”，然后向下滚动到“嵌入”部分。在这里，您会看到所有可用的不同嵌入块。

嵌入块

首先是嵌入块本身。当您选择嵌入块时，可以显示来自其他网站的内容。现在我已经选择了这个块，它会提示“粘贴您想显示在网站上的内容的链接”。我已经复制了一个我的 X 帖子的 URL，将其粘贴并点击“嵌入”。然后，我们会看到该帖子显示在网站上。您也可以使用为特定第三方服务构建的嵌入块，例如 X、YouTube、WordPress、Vimeo、CrowdSignal、PocketCasts 等，正如左侧列表中所示。与其使用通用的嵌入块，我们也可以使用 X 嵌入块来达到同样的效果。

YouTube 和 Spotify 块

在下一个示例中，我不会点击左上角的“插入器”，而是输入斜杠和块的名称。我想在网站上添加一个 YouTube 视频，所以我会输入斜杠 YouTube，选择该块，然后添加视频的 URL，再点击“嵌入”。但 WordPress 让添加第三方内容变得更加简单。实际上，您甚至不需要添加块。您只需将 URL 直接粘贴到页面或文章中即可。让我们再看另一个例子。我不会插入 Spotify 嵌入块，而是直接将 Spotify 播客的 URL 粘贴到我的页面中。

将嵌入块转换为列块或组块

您知道可以将嵌入块转换为列块或组块吗？转换为这些块之一可以让您更改背景颜色和布局。我想添加一个 TED 演讲，所以我会输入斜杠 TED，选择该块，然后粘贴演讲的 URL。完成后，我会选择块工具栏，并将此块转换为列块。然后，我会打开侧边栏设置，将其从一列改为两列。接着，我会在右侧列中添加另一个 TED 嵌入块，粘贴第二个视频的 URL，然后点击“嵌入”。我会选择列块或容器块，然后在块工具栏中将对齐方式改为宽宽度。然后，您可以进入“样式”，更改块的背景颜色、调整内边距等。但如果嵌入块不起作用怎么办？

HTML 块

这时我们可以使用 HTML 块。例如，嵌入块不适用于 Facebook 或 Instagram 帖子。让我们找到我们的一条 Facebook 帖子。点击三个垂直点，点击“嵌入”，复制 HTML 代码，返回您的网站，输入斜杠 HTML，然后选择自定义 HTML 块。接着，我们可以粘贴代码。我们可以点击块工具栏中的“预览”来查看帖子将如何显示。

结论

我相信您现在已拥有在网站上嵌入第三方内容所需的所有工具。

简介

我们已经学会了使用和组合区块来构建我们的网站。但你知道吗，有一种更快创建自定义内容布局的快捷方式，那就是使用区块模板。我们并非都是设计师，创建布局也很耗时。区块模板提供了一种解决方案。本课的学习目标是使用和修改现有的预制区块模板，探索区块模板目录，创建你自己的同步和非同步模板，最后利用页眉和页脚模板。

什么是区块模板？

但什么是模板呢？区块模板是预先设计好的区块组布局，可供修改和调整以满足你的需求。它基本上能节省你的时间，同时还能提升创意和设计水平。你无需自己嵌套和组合区块，模板已经为你完成了这些工作。只需点击一下，你就能获得美观且功能丰富的布局，包括行动号召、页眉、列、画廊等等。

添加主题模板

要添加模板，请点击左上角的加号图标（也称为插入器），然后打开右侧“区块”旁边的“模板”选项卡。在顶部，你会看到所有模板。下面是你自己创建的所有同步和非同步模板。同步模板带有紫色图标，非同步模板则没有，但稍后会详细介绍同步和非同步模板。在“我的模板”下方，你会看到你的主题自带的模板。它们按不同类别组织，方便你查找所需内容。点击某个类别后，向下滚动即可预览所有可用的模板。

你也可以选择底部的“探索所有模板”，以概览主题自带的所有模板。你还可以按类别逐一浏览。让我们看一个简单的例子。当你选择一个模板（这里是我“精选”类别中的一个）时，你可以修改该模板以满足你的设计要求。它可以像任何其他区块一样轻松编辑。你可以更改容器区块的对齐方式。你可以编辑标题、更新内容、替换图片，例如，还可以更改模板的背景颜色以及其他样式选项。但所有繁重的工作和布局已经为你完成。你只需选择模板并进行修改，以满足你的需求。

使用模板目录

你的主题自带的模板是有限的。如果你想要更多模板可供选择，可以探索区块模板目录。为此，让我们前往 WordPress.org 网站。点击“扩展”，然后选择“模板”。在这里，你可以搜索并找到适合你网站的新模板。你会注意到有一个选项可以只查看精选模板，或者查看由 WordPress 社区添加的数百个模板。你可以在搜索框中输入内容、按类别搜索，或者浏览所有可用选项，直到找到你想要的。找到你需要的模板后，可以点击“星标”将其添加到收藏夹。当你准备好将模板添加到你的网站时，打开该模板，点击“复制模板”，返回你的网站，然后粘贴。接着，你就可以开始更改和修改你的模板了。这是我根据设计需求调整后的模板样子。

管理模板

当你进入站点编辑器，在侧边视图中会看到一个“模板”选项卡。在这里，你可以管理、编辑和创建所有模板（无论是同步还是非同步），以及你的模板部件。点击“我的模板”后，你会看到所有自定义模板。同步模板带有紫色图标，非同步模板则没有。如果将鼠标悬停在紫色图标上，它会明确显示：“编辑此模板也会更新所有使用它的地方”。在自定义模板下方，我们会看到所有可用的类别以及你的主题提供的模板。还值得注意的是，当你点击主题自带模板的三个垂直点图标时，你也可以复制该模板并将其添加到你的自定义模板区域，当你将其保存为自定义模板后，就可以随意修改它。在底部，你会找到所有页眉、页脚和通用模板部件模板。

自定义模板

让我们从你自己的模式开始。如果你点击“模式”旁边的加号图标，就可以创建自定义的同步或非同步模式。命名后，你可以将其添加到相关类别中，比如这里的“行动号召”类别，然后可以选择是否同步。在这个例子中，我会选择同步模式，底部会显示“在多个位置同步此模式”。现在你可以开始创建同步模式，完成后点击“保存”。要在区块编辑器中创建模式，只需选中设计，点击区块工具栏的三个竖点，然后选择“创建模式”。接着重复之前的步骤，我会再次选择同步模式。所以，如果你喜欢某个设计，可以保存并作为同步或非同步模式重复使用。

模板部分模式

最后，我们来谈谈模板部分。要管理你的页眉和页脚，可以使用模板部分模式。模板用于创建网页设计，通常通过添加页眉和页脚模板部分来实现。我们来看一个例子，打开页面模板。打开页面模板后，我们可以选择当前的页眉，然后点击三个竖点。接着选择“替换页眉”。这时，你可以选择现有的模板部分或主题自带的模式。页脚的操作方式完全相同。在“模式”下方，你可以管理和编辑现有的模板部分。要添加新的模板部分，点击“模式”旁边的加号图标，选择“创建模板部分”。在这里，你可以选择创建通用、页脚或页眉模板部分。要创建新的页眉模板部分，适当命名，选择“页眉”，然后点击“创建”。

结论

然后，你就可以在模板编辑模式下开始构建新的页眉了。我们相信模式也会成为你最喜欢的新工具之一。

引言

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

嵌套区块

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

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

群组区块

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

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

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

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

媒体与文本区块

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

列区块

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

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

封面区块

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

引言

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

静态首页和文章页

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

页眉和页脚模式

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

添加页眉模式

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

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

自定义页脚模式

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

结论

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

引言

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

设置页面

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

设置首页显示

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

设置文章

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

设置导航菜单

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

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

设置网站标志

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

将导航菜单添加到页脚

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

选择样式

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

添加内容

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