作者： Next

简介

在本课中，我们将进一步了解查询循环以及如何使用查询循环区块。首先，我们来谈谈查询循环区块。这个强大的区块可以根据指定参数显示文章。它也是博客页面上用于显示所有文章的区块，允许你向数据库请求显示关于特定主题的所有文章。例如，你可以请求查看所有关于无麸质食谱的文章，或者你可能想查看关于电脑游戏评测的文章。

查询循环区块的结构

每个查询循环区块包含各种子区块，如文章特色图片区块、分类区块、文章标题区块、文章作者区块、文章摘要区块等。虽然你无法编辑这些嵌套区块的内容，但可以自定义其外观和布局，包括根据需要添加或删除其他区块。

示例

让我们看几个示例网站，了解它们如何使用查询循环。在第一个示例中，查询循环用于突出显示最新故事，表彰女性的创造力、领导力、勇气和创新精神。在其下方，查询循环用于显示博客文章。在第二个示例中，查询循环用于显示不同类型的食谱。首先，我们有早餐食谱，向下滚动还有美味开胃菜。在最后一个示例中，查询循环用于创建新闻页面。我们先来看看如何修改查询循环区块并使用模式。

编辑

那么，让我们前往“外观”并点击“编辑器”。这将带我们进入站点编辑器，目前我们位于博客首页模板，该模板显示所有博客文章。让我们打开列表，查看查询循环区块的结构。在顶部，我们会看到特色图片区块。然后是文章标题区块，接着是文章元数据区块，包括文章日期区块、文章作者区块和分类区块。最后是文章摘要区块。当然，我们可以更改想要显示的内容。例如，让我们删除文章摘要区块。选择文章标题区块，将其拖放到特色图片区块上方。更新查询循环区块的好处在于，如果你在一篇文章中更改了内容，它会应用到所有其他地方。

从空白开始与使用模式

但如果我们想使用完全不同的模式和布局呢？我们可以点击区块工具栏中的“替换”，浏览主题附带的各种模式。当你选择一个模式时，当然可以随意自定义它。添加新的查询循环区块时，你有两个选项：可以选择一个模式，或者从空白开始。点击“从空白开始”后，你可以选择一种变体。在这种情况下，我会选择“标题、日期和摘要”。然后我们可以进一步修改。让我们在标题下方添加一个特色图片区块。之后，我们可以打开样式，将宽高比更改为例如4:3，以确保所有文章特色图片显示一致。

筛选

接下来，我们将学习分类法或筛选器，以及如何使用侧边栏设置。我创建了一个生活方式页面，只想看到与此主题相关的文章。所以，我会选择查询循环区块并打开侧边栏设置。首先，我们必须取消选中“从模板继承查询”，因为我想自定义查询循环的设置。向下滚动时，你可以使用分类法（如分类和标签）、作者甚至关键词来筛选文章。我会选择分类法，因为我创建了一个生活方式分类，只想看到显示此分类的文章。当我添加生活方式分类时，所有不属于此分类的文章将被排除。

你还可以选择显示特定作者的文章。再次选择查询循环区块后，我会进入侧边栏设置，点击“筛选”，选择“作者”，然后选择我想显示其文章的人。现在，我们只会看到罗杰·利斯特写的文章。当然，你也可以选择一个关键词，只显示文本中包含该词或词组的内容。

侧边栏设置

最后，我们来仔细看看侧边栏设置。如前所述，我已取消勾选“从模板继承查询”以自定义查询。如果开启此选项，某些自定义选项将被隐藏；如果关闭，则会显示更多自定义选项。当你在文章或模板中添加新的查询循环块时，也建议关闭此选项，否则你的查询循环块可能无法在前端显示。下一个选项是文章类型。目前我们显示的是博客文章，但你也可以显示页面甚至自定义文章类型。下方可以按从最新到最旧、从最旧到最新或按字母顺序排列文章。接下来，我们来谈谈置顶文章。置顶文章是指固定在博客页面顶部的文章，侧边栏设置中的选项允许你包含置顶文章、排除它们或仅显示置顶文章。在置顶文章下方，我们看到可以关闭“强制页面重新加载”的选项。这允许用户浏览文章时无需重新加载页面，有助于提升用户体验。最后，我们已经讨论过使用筛选器。

总结

祝你充分利用这个强大的块来展示文章！

简介

欢迎使用样式手册。学习目标：掌握使用样式手册的最佳实践，理解全局样式与样式手册的区别，了解它们如何协同工作，学习在搭建网站前添加自定义样式和美化。如果您尚未观看《使用全局样式美化网站》视频，建议先观看以更好理解全局样式。Learn WordPress 视频可在 YouTube 上搜索 WordPress 找到，下方也提供了链接。

查找样式手册

要找到样式手册，我们从仪表盘开始。向下滚动菜单找到“外观”，然后移动到“编辑器”并点击打开。在“设计”菜单下，您会看到“样式”，点击它。这时会打开一个迷你菜单，显示 WordPress 默认样式，它自带了八种不同的样式变体。我们可以先停在这里，我将向您展示几种不同的操作方法。这是为您的主题选择不同样式组合的一种方式，包含不同的颜色和字体。这是主题自带的默认页面，类似于博客首页模板。页面中使用了多种不同的区块。我们可以点击不同的颜色变体来预览效果。您会注意到，切换颜色时字体也会随之变化。不过我们暂时保持默认设置，因为我想展示页面上的其他功能。页面顶部有一个眼睛图标，悬停时显示“样式手册”，旁边还有一个铅笔图标显示“编辑样式”。点击眼睛图标（样式手册），会显示标题、段落、图片等所有正在使用的核心区块。同样，我们可以点击不同的样式变体，查看它们与不同区块的搭配效果。另一个值得注意的功能是底部显示的“最后修改时间”，点击它可以打开修订记录页面，显示样式修订历史，包括修改时间，点击具体日期还能查看更改和更新的概览，非常方便。还有其他方式可以进入这里，我们先返回顶部，进入“编辑样式”。

使用样式手册更改样式

这是用户通常进入的主页面。您会注意到右侧的“样式”菜单会自动打开，如果没有自动打开，点击半圆形图标即可打开。如果您看过全局样式视频，应该已经了解这些功能的作用。这里再次看到眼睛图标和显示修订历史的时钟图标。这是另一种进入方式。同样，我们以博客首页模板作为默认页面，或者像第一部分那样浏览样式。我们可以查看页面并尝试不同的颜色变体，然后进入样式手册。样式手册会展示主题核心区块，但这次视图更易于管理，因为它使用了标签页，将不同区块归类到不同标签下，这样更方便。所有媒体元素放在一起，设计功能、按钮、组（如小工具）等也归类在一起，例如带有链接的列表、日历、文章列表、页面列表、社交媒体图标等小工具都集中在一起。主题区块也会集中显示。同样，我可以进入样式变体，查看不同颜色在这些区域中的效果，非常酷。媒体部分内容不多，按钮可能是最重要的部分，因为按钮颜色会变化，有些形状也不同，方便您找到最合适的样式。另外，当您浏览时，全局样式和样式手册是协同工作的。

更改按钮区块样式

假设我们在处理区块时，喜欢其他颜色，但想为按钮增加一点亮点。比如我喜欢调色板中的灰色和黑色，但想为按钮添加一个亮色。在样式手册的“设计”标签下，您也可以自定义按钮并预览效果。点击区块会打开相应的样式工具。我们可以进入并更改背景颜色，比如选择浅棕色，然后将文字改为黑色。还可以调整外观，设为中等文字大小，并更改字体。如果效果不好，可以恢复原样。我们可以使用系统无衬线字体等。有多种方式添加样式并在此预览。点击保存，再次保存。然后刷新前端页面，您会看到样式已生效。

更改引用区块样式

现在我们来查看文本并看看引用区块。大部分样式我们希望在全局样式中完成，但有时某些特殊区块可能需要一些特别的调整。所以我们点击打开这个区块，然后添加一个背景颜色。我们可以修改它。好的，我们还可以更改字体，接下来就做这个。然后点击保存。再点击一次保存。现在当我们勾选样式区块时，可以在模板中预览效果，然后前往前端页面刷新，向下滚动就能看到实际显示效果了。

总结

欢迎访问 Learn.WordPress.org 或我们的 YouTube 频道 WordPress 查看更多课程。谢谢。

简介

使用全局样式美化你的网站。学习目标：更改全局样式以体现你的品牌特色。修改排版、颜色和布局，使用字体库功能，应用调色板更改强调色，更改区块的全局样式（例如引用区块示例）。事先需要考虑的几个资源是字体配对。一个好的设计原则是：为标题选择一种字体风格，为正文选择另一种字体风格。这里有一篇来自 Google Fonts 的文章。另一个资源是字体配对网站 FONTPAIR。在他们的配对选项卡中，他们配对了搭配良好的字体。调色板是设计前需要考虑的另一件事。这里有两个免费资源：Coolors 提供流行调色板，会给出十六进制颜色代码，最好记下来以便使用这些颜色。Canva 也提供免费的调色板。

全局样式

现在我们将进入仪表盘。查看左侧的网站工具栏，向下找到“外观”，然后进入“编辑器”并点击它。我们将进入“设计”下的“样式”选项。点击它。在样式菜单中，你会看到一个图标，即样式手册，我们将在后面的课程中讨论它。还有一个铅笔图标，悬停时显示“编辑样式”。我们点击它。现在我们将查看“浏览样式”。

浏览样式

我打开了右侧菜单，右上角有一个半月形图标。悬停时显示“样式”。我向下找到“浏览样式”。Twenty Twenty-Four 主题自带八种变体。这些变体包含不同的颜色和字体组合。当我点击其中一个变体时，可以立即看到不同区块在网站上的显示效果。我将保留默认主题。然后我们可能会更改一些颜色，以更好地匹配我的调色板。之后返回样式部分。

排版

此部分管理字体系列、大小和外观的设置，范围从文本到链接再到按钮。一个好的设计规则是，像我之前说的，为标题使用一个字体系列，为正文使用另一个兼容的字体。一个新功能是我们的预设，它允许我们查看不同的字体组合。即使我使用的是默认主题，我仍然可以按自己的喜好更改字体。主题自带的字体列在这里。你可以看到我有不同的组合变体。这意味着我有这个字体的两种变体和那个字体的两种变体。

字体库

一个新功能是管理你的字体。如果你悬停在这个图标上，我会打开字体库。主题字体已列出。如我所说，我还可以选择上传或安装字体。我们先看看安装字体，我们将连接到 Google Fonts。我们需要允许访问 Google 字体，这样我们可以浏览，截至录制时有 390 页，所以有很多选择。我事先做了一些研究。我知道我喜欢这一种特定的字体，Open Sans。我点击它。现在 Open Sans 将用于我的正文。所以我不需要其他选项。我提前计划好，至少需要一个常规粗细，而且我喜欢比 300 常规稍粗一点的。所以我选择 400，我还希望某些词能加粗，所以我选择 700。我还选择一个斜体，同样是 400，以及一个加粗斜体，这样我就有了四个变体。我点击底部的“安装”按钮。如果向上滚动，会看到安装成功。当我回到库选项卡时，看到安装的字体已存在，并且四个变体已激活。另一种方式是上传。我点击“上传”。请记住，上传的字体要能使用，需要支持 TTF、OTF、WOFF 或 WOFF2 格式。中间是“上传字体”字样，我点击它。我已经有一个包含我喜欢字体的文件夹，我打开那个字体。同样，我不需要所有变体。但这将用于我的标题。所以我肯定需要一个常规，不需要任何细体。我肯定想要一个粗体，因为我的标题需要加粗。我觉得就选这些，因为我不需要斜体标题之类的。所以，我再次提前计划，这对这些步骤很有帮助。字体上传成功，我回到库，看到那个字体现在可用。我可以关闭这个窗口。如果我查看右侧菜单，会看到这两个选项也已可用。

元素

下面的另一个部分是元素。我可以进入并在全局级别更改所有文本。现在我已经添加了这两个新字体，我进入“文本”。我想将其更改为 Open Sans。好的。然后我想保持常规粗细。好的。这样就可以了，我们点击“保存”。

标题

它会保存这些设置，然后我会点返回，进入我的标题设置。现在标题有了不同的样式，我可以为所有标题设置相同的字体族，好的。但请记住，每个页面只有一个 H1，然后我们需要进行结构化的格式设置，接下来应该是 H2，然后依次是 H3 等等。所以你会看到字体有不同的大小。我可能想逐一为每种字体设置样式，仔细检查一下大小，默认的大小可能不是我所期望的。如果我希望 H3 的字体稍微大一点，我可以在这里调整。我们来看看这个。我想把字体族改成 Bellota，并且加粗，好的。我打算把它设置得比“特大”再大一点，因为这个字体族在较小尺寸的网站上显示。我点击这里，我们使用 rem 单位。Rem 的好处是，当页面切换到移动端时，尺寸适配会更好一些。我们设置成 4.5。你可以在顶部的这个小窗口中看到变化。我这边没看到变化，可能是个小 bug。所以我点击它，保存，再保存一次。然后我可以去设置，就像我说的，H2 保持原样就可以了。我们可以去设置“全部”？我需要确认一下，嗯，不，算了，我们看看，你总是可以在过程中修改设计，对吧？H2，我打算保留 Bellota 字体。然后像那边一样，我这么说，让我返回。因为我不希望所有字体都……我突然意识到，我不希望 H3 使用那种更花哨的字体。所以 H3，我们打算就用 Open Sans。但我确实想让它稍微大一点。好的，我来操作一下。我们看看前端的效果。我们已经把 H3 改成了加粗，这个设置生效了。所以这些地方都可以调整。现在，我点返回，退出排版设置。

颜色

下一个部分是颜色。我们的颜色部分负责微调我们之前选择的调色板。记住，我选择了默认调色板，默认调色板有 10 种颜色。如果我进行到了这一步，想换成其他调色板，或者至少看看效果，我可以在上面找到入口。如果我点击调色板的 10 种颜色，我们可以看到调色板、纯色和渐变。我现在主要关注纯色。就像我说的，有一种橙色我可能不会用到，但我确实想把它换掉。我可以进入主题，点击这里的三个点，然后选择“显示详情”。好的。在我更改颜色后，会显示特写视图。重置颜色会出现在那里，但在我目前的位置，只显示“显示详情”。所以我点击“显示详情”。很方便的是，它会显示不同颜色的名称。我想重点关注强调色 3。如果我点击它，就可以更改颜色。我打算把它改成更亮的红色，一种深红色。好的，我觉得这个颜色不错，已经改好了。然后我必须确保点击“完成”，再点击“保存”。好的，在设置颜色时，最好检查一下你更改的内容。所以不要只是不停地看。好了，我也可以在这里添加自定义颜色，如果我想增加更多颜色的话。现在，我们从调色板返回，回到颜色菜单。

字体颜色

下面的部分是颜色设置。好的，我们有……我们可以选择基本文本、背景、标题，也可以设置 H1 等等。好的。我们接下来要设置的是按钮。我想把按钮颜色改一下，让它成为一个通用颜色。如果我点击按钮颜色，我可以选择文本颜色、背景颜色和渐变。我们先看看文本颜色。目前是白色，我知道我们打算保持这个设置。然后我们看看背景颜色，我们打算把它改成红色。好的，这样就可以了。然后我们确保点击上面的“保存”，这会改变按钮的全局样式和颜色设置。这样，以后我添加按钮时，就会使用这两种颜色。我们返回。

布局

下一个部分是布局。好的，我们往下找到布局。布局部分用于设置主要内容区域的样式，并定义内容宽度（以像素为单位）。好的，这指的是从左侧到右侧的整个区域。这些是默认设置。你可以看到已经有一些内边距了。如果你看看这里的标题，我移动一下，你可以看到它是如何变化的。好的，我们还有一个块间距，默认也已经设置好了。我点返回，退出布局设置。

块

区块是我们的下一个部分。我们将向下滚动到这里找到区块，这个菜单会打开主题中所有的区块。我们可以进入并自定义特定区块的外观，以及整个站点的样式。这意味着，如果你希望所有标题区块都有某种背景颜色，你可以做到。不过，不要过于深入地去单独调整每个区块，因为记住，我们之前已经在全局样式中做了修改。如果你开始改动每一个小区块，那么当你需要修改某些内容时，就会变得非常混乱，因为你不知道在哪里改过。所以，最好从全局样式开始。然后，如果有一个特定的区块你确实想调整，你可以这样做。我就以引用区块为例，因为它是一种特殊区块，你可能想用不同的字体。让我们向下滚动到我的示例。这里有一个引用区块。我添加了一个组，引用区块里面有一个段落，还有一个用于引用的区域，也就是作者的名字。如果我想改变这个区块的字体，我可以进入排版，然后找到字体。记住，我整体用的是Open Sans字体。我可以选择常规字体，也可以选择斜体之类的。我还可以调整它的大小，比如让它变小或变大，然后点击保存。这就是一个示例。

总结

我刚刚简单介绍了如何使用全局样式来设计你的网站。去你的网站上探索一下，并查看更多课程吧。

所有归档模板与分类模板

在本课中，我们将探索如何添加和自定义分类模板。在上一课中，我们了解了各种可用的模板。我们提到，“所有归档”模板是 WordPress 用来显示较小文章分组（如分类、标签、作者、日期等）的默认模板。请注意，我使用的是 Twenty Twenty-Four 默认主题。向下滚动将展示“所有归档”模板当前的结构，以及归档中的文章在前端如何显示。当我访问我的某篇博客文章并点击相关分类（本例中为“艺术”）时，我可以查看所有标记为“艺术”分类的文章。

此页面的结构由“所有归档”模板决定。如前所述，所有其他分类和归档分组都会以相同方式显示，因为它们都被分配到了“所有归档”模板。这就是创建自定义分类模板发挥作用的地方。您无需使用通用的归档模板，而是可以设计一个符合特定需求的模板。让我们看看实际操作。

添加分类模板

我将继续添加一个分类模板，以更改“艺术”分类中文章的显示方式。因此，我将进入模板，点击加号图标或模板旁边的插入器。然后，我将添加一个分类归档模板。现在您有两个选择。首先，您可以为所有分类创建一个单一模板。您也可以决定为每个特定分类创建一个模板。我将选择第二个选项，因为我想为“艺术”分类创建一个特定模板。选择后，我可以选择 Twenty Twenty-Four 主题自带的模式。但我将选择“跳过”以从空白开始。

自定义分类模板

现在，我可以开始构建我的空白模板。我要添加的第一件事是我的新页眉——我已经创建好了，并命名为“艺术页眉”。将独特的页眉添加到模板后，我可以点击三个垂直点并选择“在后面添加”。接下来，我们将添加查询循环块。在这种情况下，它将显示所有“艺术”文章。现在，我们可以继续选择一种模式来定义文章显示方式。添加模式后，我们还可以进一步修改它。那么，让我们打开列表视图。然后，查看查询循环块内的所有嵌套块。我们寻找的是文章模板块。当我们选择文章模板块时，会看到三列。我们可以将其改为四列。但在这个例子中，我们将设置为两列。

接下来，我想删除我的文章摘要块。所以点击其中一篇文章，选择文章摘要块，点击三个垂直点，向下滚动到底部，然后选择“删除”。然后，我将选择组块，并在内容周围添加更多内边距。所以我会打开样式，进入内边距，在左侧和右侧添加更多内边距。欢迎您进行进一步修改，但在这个例子中，我已经完成了。所以，下一步是添加页脚。我还将添加我在其他模板中使用过的通用页脚。现在，我们可以看看我们的“艺术”分类在前端会是什么样子。因此，如果我们现在选择相关分类，即“艺术”，我们将看到“艺术”分类的归档页面，带有独特的页眉和修改后的内容布局。这当然是通过为特定项目添加和更改分类模板来实现的。

结论

如果您想为另一个分类创建新模板，可以点击模板旁边的加号图标，选择分类归档，然后选择一个特定分类。然后，我可以为我的“生活方式”或“体育”分类创建一个独特的模板。我相信您现在对为所有分类或特定分类添加分类模板感到得心应手了。

介绍

在本课中，我们将学习如何创建自定义模板，这让你可以使用与网站其他部分不同的设计或布局。这意味着你可以创建一个页面或文章模板，拥有独特的页眉、页脚或其他页面元素。你可能想为活动、着陆页、不同类型的博客文章，甚至为网站上的不同页面创建独特的样式。

创建自定义模板

要创建自定义模板，请前往“外观”，点击“编辑器”，然后选择“模板”。我们先打开页面模板。你会注意到，页面模板已经包含页眉和页脚。所有分配到这个页面模板的页面都将拥有这个页眉和页脚。但我希望我的联系页面有一个不同的页眉；自定义模板可以帮助我实现这一点。所以，让我们前往“模板”，点击“添加新模板”。在底部，我们可以选择“添加自定义模板”。给它一个描述性的名称，然后点击“创建”。

Twenty Twenty-Four 主题允许你选择一个模板模式，或者点击“跳过”以空白模板开始。我打算选择这个模式，因为它能节省时间。如我们所见，这和我之前的页面模板一样。我们有页眉、页脚和文章内容块。然而，我希望我的联系页面有一个不同的页眉。所以，让我们选择页眉，点击三个垂直点，然后选择“替换”。接着，我会为这个模板添加一个新的页眉。现在我的新页眉已经就位，下一步是保存它，然后将这个模板应用到我的联系页面。

分配自定义模板

所以，一旦我保存了模板，我可以返回仪表板，前往“页面”，打开我的联系页面。目前，我们的联系页面仍然分配给了页面模板或默认模板。因此，我们将点击“交换模板”来为这个页面分配一个新模板。然后，我们可以选择我们刚刚创建的联系模板。现在，联系模板已经分配好了。一旦我们更新了它，我们可以前往网站的前端。我们会看到我们的首页和其他页面共享这个页眉。但当我们打开联系页面时，我们会看到这个页面有自己独特的页眉，因为我们为这个页面分配了一个自定义模板。

自定义着陆页

在最后一个例子中，我想为营销目的创建一个着陆页的自定义模板。目前，我在为着陆页创建的页面上。如果我打开侧边栏设置，我们会看到这个页面仍然分配给了默认页面模板。因此，着陆页仍然有相同的标准页眉和页脚。要为这个页面创建自定义模板，我们将再次前往站点编辑器，选择“模板”，添加一个新模板，然后选择一个自定义模板并适当命名。在这种情况下，我会叫它“无人机着陆页”。

在这个例子中，我不会选择模板模式，因为我不希望我的着陆页有页眉或页脚。我想要一个更专注的用户体验。我的着陆页鼓励读者点击行动号召。所以，我会点击“跳过”从头开始创建模板。我唯一想添加的块是内容块，它将从页面中提取内容。我还希望我的着陆页以全宽显示，所以我会保持内容块不变。一旦我保存了模板，我们可以返回仪表板。前往“页面”，然后打开着陆页。接下来，我们将为这个页面分配自定义模板，即我刚刚创建的“无人机着陆页”。更新后，我们可以点击“预览”来查看我们的着陆页在前端的样子。例如，这个着陆页可以用于社交媒体或电子邮件中。

结论

我还想提一下，你可以通过前往“管理所有模板”并点击右上角的“添加新模板”来添加新模板。祝创作愉快！记住，你可以手动将自定义模板应用到任何文章或页面。

实践

使用 WordPress Playground 来测试你的知识。

1. 前往“模板”。
2. 创建一个自定义模板并适当命名。
3. 添加一个新的页眉和页脚模式。
4. 将自定义模式分配给“示例页面”。

简介

在本课中，我们将通过编辑单篇文章模板来自定义文章的显示方式。为此，我们将进入站点编辑器，选择模板，然后打开单篇文章模板。另一种访问模板的方式是点击左下角的“管理所有模板”，然后从中选择模板。

模板结构

此模板提供了单篇文章显示的结构或设计，当然，您可以根据需要修改它。目前，我安装了 Twenty Twenty-Four 主题，这是在站点编辑器中编辑模板时文章的默认结构。让我们点击列表视图，以便更好地查看模板的结构。顶部是文章特色图片，下面是标题，然后是文章元数据，如日期、作者和分类。接着是文章内容块，下面是文章标签块，最后是评论块。请记住，如果您希望网站访问者能够在文章上留下评论，请确保不要意外地从模板中删除此块。

现在我们已经了解了这个主题如何构建模板，让我们看看当我们打开一篇文章时，它在前端会是什么样子。顶部是文章特色图片，接着是标题、日期、作者和分类。然后我们会看到文章内容和分配给这篇文章的标签，底部则是人们留下的评论。

自定义模板：示例 1

现在，我们可以返回模板并根据需要进行更改。在第一个示例中，让我们选择包含文章标题块和文章元数据的堆栈块。将其移到文章特色图片的顶部。接下来，我将选择特色图片，打开侧边栏设置，然后进入样式。在此示例中，我想将宽高比更改为 16:9。这将确保我所有文章的特色图片具有相同的大小，无论原始图片的尺寸如何。我决定保持模板的其余部分不变，所以让我们点击保存，看看更改如何反映在前端。现在我们将看到标题和文章元数据在顶部，并且特色图片块的宽高比已应用。

自定义模板：示例 2

在第二个示例中，使用封面块为我们的单篇文章模板创建自定义文章头部。所以，让我们继续在模板顶部添加一个封面块。完成后，我将选择使用特色图片。为了节省时间，我将复制包含徽标和导航菜单的行块，并将其粘贴到我的封面块中。在下面，我将添加我的站点标题和文章元数据。我将选择堆栈块，并将其拖放到我的封面块中。然后，我们可以删除头部和特色图片块。现在，模板的新头部已就位。下一步是选择堆栈块，将站点标题和文章元数据居中对齐。我还想选择站点标题块，并添加一些内边距，以便在标题周围创建更多空间。最后一步是选择我们的封面块，打开样式，选择白色作为叠加颜色，然后将叠加不透明度更改为 70%。然后，我们可以点击保存，看看应用新模板后文章的样子。以下是我网站上的两个示例。一个是关于在葡萄牙冲浪的文章，另一个是关于开普敦桌山的文章。

清除自定义设置

请注意：如果您对更改不满意，请点击模板名称旁边的三个垂直点，然后选择“清除自定义设置”。模板将恢复到其原始状态。或者，您可以转到“管理所有模板”，然后点击“重置”。

结论

我相信您对自定义自己的文章内容布局更有信心了。

介绍

在本课中，我们将介绍如何自定义搜索结果模板。当访问者搜索您网站上的内容时，他们会被带到一个搜索结果页面，而搜索结果模板决定了该页面和结果的呈现结构。我使用的是 Twenty Twenty-Four 主题，这是结果的默认布局。

自定义搜索结果模板

我们可以通过编辑模板来自定义搜索结果页面。为此，让我们进入仪表板，点击“外观”，然后打开站点编辑器。点击“模板”，然后选择“搜索结果”模板。您可以为模板添加独特的页眉和页脚，或者您可能希望通过查询循环块更改结果的显示方式。让我们打开列表视图以更好地理解页面结构。首先，您可以决定是否保留或移除“搜索结果”标题。如果保留，您可以在标题中显示搜索词，并且可以选择进一步设置该块的样式。

选择新模式

在这个例子中，我将自定义搜索结果的显示方式。第一步是选择用于显示结果的查询循环块。我将为我的查询循环块选择一个不同的模式。为此，我将使用我的块工具栏并点击“替换”。这允许您选择不同的模式。我将选择名为“小图片和标题”的模式。现在，我将继续进一步修改查询循环块。首先，让我们将对齐方式更改为“宽宽度”。接下来，我将在标题下方添加一个“文章摘要”块。添加后，我将在列表视图中选择右侧列。然后，将垂直对齐方式更改为顶部对齐，因为我希望标题和摘要与图片顶部对齐。接着，我将选择特色图片块。打开样式，然后将特色图片块的宽高比更改为 3×4，以确保统一性，所有图片大小一致。然后，我们可以点击“保存”，并在前端查看我们新的搜索结果页面。我将再次搜索一些内容。但这次，由于修改了搜索结果模板，结果会以新格式显示。

清除自定义设置

要撤销更改，请点击名称旁边的三个垂直点，然后选择“清除自定义设置”。这将恢复到模板的原始状态。

结论

祝您在决定如何显示搜索结果时一切顺利。

引言

在本课中，我们将深入探讨如何个性化你的 404 模板。404 页面也被称为错误页面或页面未找到页面。当用户尝试访问你网站上不存在的页面时，他们会看到这个内容。大多数访问默认 404 页面的人可能会立即离开你的网站。一个不吸引人或缺乏互动性的 404 页面会导致糟糕的用户体验。它会增加你网站的跳出率，从而对你的 SEO 产生负面影响。你越快引导访客找到正确的位置就越好。如果你创建一个吸引人的 404 页面，就有希望确保访客留下来并深入探索你的网站。因此，创建一个自定义的 404 页面并思考如何吸引访客的注意力甚至使用幽默感非常重要。我喜欢皮克斯的这个例子，因为它会让你会心一笑。我也认为 Tendrik 做得很好，他们使用了引人注目的图像、幽默感和一个返回主页的按钮。

自定义 404 模板

要个性化或自定义你的 404 模板，请导航到站点编辑器，打开模板并点击页面 404。我使用的是 Twenty Twenty-Four 默认主题，但每个主题都会以不同方式设置此页面。让我们继续修改这个模板以满足我们的需求。我将保留我的页眉，但删除组和页脚块。删除后，我将添加一个封面块，并从我的媒体库中选择一张图片。然后我将添加一个包含两个等宽列的列块。在左侧，我将添加一些文本并写上“保持冷静，检查你的氧气水平”。然后我将文本大小更改为超大。在此下方，我将添加一个按钮块或行动号召，以便访客意外进入未找到页面时引导他们到我的主页。然后，我将加粗文本，所以别忘了添加主页链接。接着，我将按钮块的背景颜色更改为白色，文本颜色更改为黑色。我们还可以更改按钮块的大小，在这种情况下，我会选择中等。

完成这些后，我将选择封面块，然后切换封面块为全高。我会选择让文本显示在左下角。然后我将进入样式，为我的块内容添加一些内边距或间距。我还会将封面块的叠加不透明度更改为 30%，使其稍微变亮。然后，我们可以进入设置，为了更好的移动端查看，我会更改图片的焦点。这是最后一步。现在，我们可以继续点击保存，一旦关闭我的列表视图和侧边栏设置，我们就可以看到我们个性化的 404 模板。然后我们还可以在移动设备上查看它。

添加 404 模式

在自定义或个性化你的 404 模板时，另一个选项是使用模式。所以，在第二个例子中，我将删除我的页眉、组块和页脚，从空白开始。然后，我将前往 WordPress.org 网站和模式目录。接着，我将搜索 404 模式。当你找到一个模式时，你可以将其复制并粘贴到你的模板中。现在，你可以修改它以满足你的需求。正如你将在我的更新版本中注意到的，我添加了一个主页链接或行动号召，以及一个带有搜索栏和社交媒体平台链接的页脚。

结论

我祝愿你在创建自己引人注目且富有创意的 404 页面时一切顺利。如果你的主题没有 404 模板，你可以查看手册了解如何添加你自己的模板。

简介

在本课中，我们将学习如何区分首页显示设置以及块主题附带的多种模板。在之前的一节课中，我们介绍了页面模板、它们的功能、如何编辑模板、添加新模板，以及如何为页面或文章分配模板。在未来的课程中，我们将逐一深入了解其中一些模板。但让我们先深入理解如何使用块主题附带的多种模板并设置首页显示。这些模板包括页面模板、索引模板、单篇文章模板、404 模板和所有归档模板。提醒一下，WordPress 使用模板来创建页面或文章的布局和结构。

页面模板

让我们先看看页面模板。当你进入站点编辑器并点击模板时，你会注意到“页面”选项。页面模板是默认模板，你创建的每个新页面都会分配到这个模板。根据你的主题，你可能还会看到其他自定义页面模板，例如无标题页面、带侧边栏的页面等。如你所见，我使用的 Twenty Twenty-Four 主题在左下角提供了四个额外的自定义页面模板，你可以使用、编辑并将它们分配给单个或多个页面。当我们打开页面模板时，会看到页眉和页脚已经就位。然后，我们可以打开列表视图并选择组块。在那里我们会看到内容块或文章内容块。文章内容块会从分配给此模板的页面中拉取内容。记住，我们不会在页面模板中添加内容。我们只通过添加页眉和页脚等方式提供结构。

博客首页模板

接下来，让我们回到模板，讨论博客首页模板以及索引模板。但要做到这一点，我们还需要讨论首页显示设置。所以，让我们进入设置并点击阅读。然后，选择一个静态首页和一个静态博客页面。如果你选择了静态首页，包括首页在内的所有页面都会分配给页面模板。如果你选择了静态博客页面或文章页面，你的博客或文章页面会分配给博客首页模板。让我们实际操作一下。在这个网站上，我安装并激活了 Twenty Twenty-Four 主题，并设置了一个静态首页和一个静态博客页面。然后我们可以进入页面，如果打开首页，会看到它被分配给了页面模板。如果打开博客页面，会看到这个页面被分配给了博客首页模板。请注意，你将在博客首页模板中直接编辑博客页面或文章页面的内容、页眉和页脚。是的，你将在模板中构建整个博客页面或文章页面。

但如果你选择了最新文章作为首页显示呢？那么你的博客首页模板将成为你的首页。如果我们进入站点编辑器，转到页面，在顶部我们会看到首页。在这种情况下，博客首页模板也会通过左侧的首页图标指示。这里有一个非常重要的提示，适用于为你的网站创建导航菜单时。所以，让我们进入主导航菜单，目前它是空的。然后我会选择编辑，并使用侧边栏设置添加我的首页链接。提示是：添加首页链接块。这意味着你的首页导航菜单将指向你设置的首页显示。

索引模板

接下来，让我们谈谈索引模板。当没有定义更具体的模板时，索引模板会作为所有页面的备用模板使用。所以，这实际上意味着如果主题没有分配特定模板，索引模板将作为备份模板使用。让我们实际操作一下。在这个网站上，我安装并激活了 Tove 主题，这个主题实际上没有博客首页模板。所以，如果我们进入设置和阅读，你会注意到我已经设置了一个静态首页和文章页面。然后如果我们进入页面，会看到首页被分配给了页面模板，和之前一样。但如果我们进入文章页面或博客页面，会注意到这个页面被分配给了索引模板——即备用模板或备份模板。

接下来，回到我们的阅读设置，将首页显示改为最新文章页面。保存后，我们可以进入站点编辑器，看到索引模板现在成了我们的首页。如前所述，索引模板只是一个备用模板。所以不建议将索引模板用于首页或博客页面。那么，最佳解决方案是什么？最好是添加一个新模板。所以当我们点击模板旁边的加号图标时，如果可用，可以添加博客首页模板。或者为我们的最新文章首页或静态博客页面分配一个自定义模板。

单篇文章模板

接下来，我们来看单篇文章模板。这个模板影响单篇文章的布局。虽然我们不会向单篇文章模板添加内容，但你可以修改它的布局。例如，你可以移动文章作者、发布日期、文章分类、文章标签等主题区块。如果你希望网站允许评论，请记得确保没有意外删除评论区块。

404 模板

我们接下来要讨论的模板是 404 模板。当页面找不到时，404 模板就会发挥作用。请记住，没有页面会被分配到这个模板。如果你希望 404 页面有独特的外观和感觉，可以直接编辑 404 模板。在这个例子中，你会注意到我修改并调整了 404 模板，以满足我的需求并与我的客户沟通。

搜索结果模板

另一个需要注意的模板是搜索结果模板。当访问者在你的网站上进行搜索时，会显示这个模板。这是我的咖啡店网站。如果我输入“咖啡”这个词，然后点击搜索，我会看到所有包含这个词的相关文章。当然，你可以修改这个模板，改变搜索结果的显示方式。

所有归档模板

我们接下来要讨论的模板是所有归档模板。所有归档模板按分类、标签或归档（如作者、月份或年份）显示文章分组。例如，如果你想查看某个特定分类下的所有文章，就会用到这个模板。你会注意到顶部显示“归档类型”和“名称”。归档类型可以是分类、标签、作者，当然名称就是文章的名称。让我们访问我的博客页面，看看这是如何工作的。首先，我会向下滚动到所有文章，然后选择一篇名为“纹理”的文章。在标题下方，我们会看到日期、作者和分类，即“艺术”。然后在文字下方，会看到标签，即“抽象”。那么，我们点击“艺术”分类。在顶部，归档类型是分类，名称下方我们会看到“艺术”分类中的所有文章。然后我会返回到名为“纹理”的文章，并选择作者。在归档类型“作者”下方，我们会看到这位特定作者写的所有文章。这个页面的布局当然是由所有归档模板决定的，并且可以修改。

添加模板

但如果你想为特定分类、标签或作者创建模板呢？你可以通过添加模板来实现。如果你点击模板旁边的插入器或加号图标，你可以为作者归档添加模板。适用于所有作者或特定个人。你还可以选择为所有分类或单个分类添加分类模板。你也可以为日期归档或标签归档创建模板。然后你会注意到，你还可以选择添加新页面模板或单篇文章模板。基本上就是单篇文章的模板。在底部，我们会看到还可以添加自定义模板。自定义模板可以手动应用于任何文章或页面。另一个可以添加的模板是首页模板。请注意，首页模板会显示你的网站主页，无论它设置为显示最新文章还是静态首页。首页模板优先于所有其他模板。

总结

这就是全部内容了。我相信你现在在区分主页显示设置以及构成主题的各种模板时会感到更得心应手。

引言

大家好，欢迎来到 Learn WordPress，这是将网站迁移到新托管账户的第二部分。在第一部分中，您学习了如何在设置新域名的同时将 WordPress 网站迁移到新的托管服务商。在本节中，我们将学习在保留网站现有域名的情况下完成网站迁移所需的不同步骤。

在本节结束时，您应该能够描述在希望继续使用现有域名时将网站迁移到新托管公司所需的步骤。描述互联网如何知道在哪里查找您的网站。并描述更新网站位置所需的步骤，以便访问者能够访问您新托管位置中的网站版本。

迁移的相似之处

将 WordPress 网站迁移到新的托管公司并保留现有域名，与迁移到新的托管服务商并建立新域名非常相似。在保留当前域名时，您需要在流程开始时做出不同的选择，并在迁移过程结束时多执行一个步骤。

域名选择

当您与一家新公司建立托管账户时，设置过程中首先会问您的问题之一是您是在建立新域名，还是已经拥有一个已注册的域名。如果您已有域名并希望继续使用它，只需勾选该选项，并将现有域名输入到相应的框中。

托管账户设置

然后，新托管公司会将该条目设为主域名来设置您的托管账户，还会为您提供登录托管账户所需的信息，并提供一个临时网站地址，以便您访问在新账户中设置的网站。登录新托管账户后，您可以安装 WordPress。临时网站地址则允许您访问新的 WordPress 仪表盘。

复制您的网站

一旦您访问了新的 WordPress 安装，就可以使用在 WordPress 网站迁移第一部分中学到的相同流程，将当前网站复制到这个新托管账户中。基本上，您需要在这个新网站上安装首选的迁移插件，然后使用该插件导入您从旧位置导出网站时下载到计算机上的文件。导入完成后，您就在新托管账户中复制了现有网站。

更新网站位置

现在，您的网站位于互联网上的两个地方：旧托管账户和新托管账户。然而，互联网只知道您的旧托管账户。告诉互联网您的网站位于新位置，是您在迁移过程中必须完成的额外步骤。

理解 DNS

网站地址实际上是一系列数字或数字与字母的组合，称为互联网协议地址，即 IP 地址。这些是使用协议版本四和六的 IP 地址示例。我们在浏览器中使用的域名，如 cnn.com 或 espn.com，是人类可读的名称，它们与互联网域名系统（DNS）中的特定数字或字母数字 IP 地址配对。

更改名称服务器设置

当您在浏览器中输入域名地址时，您访问该位置的请求首先通过名称服务器检查域名系统，以查找与您输入的人类可读地址相关联的数字 IP 地址。

新托管账户中的网站与旧托管账户中的网站有不同的 IP 地址。在您更新 DNS 或名称服务器系统中的信息之前，互联网仍然认为您的网站位于旧地址。

您可以通过更改域名的名称服务器设置来更新网站位置。这些设置位于您注册域名的账户中。如果您在建立旧托管账户的同时注册了域名，那么该托管服务商很可能就是您的域名注册商。大多数托管服务商同时也是域名注册商，并提供捆绑服务，如上一课所述。请记住，托管和域名注册是两个独立的功能，即使您最初可能同时在同一家公司设置了两者。

当您建立新托管账户时，托管服务商会向您发送几条信息。其中一条信息就是新账户的名称服务器设置。如果您手头没有这些信息，可以登录新托管账户，在管理域名设置的区域中找到它们。它们看起来像这样。通常有两个。

然后，您需要获取新主机账户的名称服务器设置，登录您的域名注册账户。将这些新的名称服务器设置替换旧的设置，并保存更改。

此更改在互联网上传播所需的时间可能会有所不同。通常需要 24 到 48 小时，但在某些情况下，可能需要长达 72 小时。如果您在新主机账户中制作的网站与旧主机账户中的网站完全相同，那么当名称服务器更改生效时，可能很难察觉到。

迁移确认

一个技巧是，对新主机账户中的网站进行微小的文字或样式修改。然后过一两天，使用您的域名访问该网站。如果您在页面上看到该更改，就说明您已成功完成迁移，并且正在查看新主机账户中的网站。恭喜您！

其他注意事项

关于网站迁移，还有其他一些事项需要考虑。其中之一是电子邮件账户。与您的域名关联的电子邮件地址是您主机账户的一部分。当您更换主机公司时，您需要在新主机账户中设置这些电子邮件地址。一些主机公司会在您设置新账户时为您迁移所有电子邮件账户。

如果您在制作网站迁移导出文件后，在实时网站上添加或更新了内容，这些更改将不会出现在您的新网站上。导出的网站文件是制作时网站的快照。任何对网站的最新更改都需要手动复制到您的新网站中。

请记住，您现在有两家公司的服务规则。域名注册将由注册它的公司处理。使用上面的例子，那将是您的旧主机公司。您还需要与新主机公司续费主机账户。

更改名称服务器设置或更换域名注册商的过程因公司而异。最好查看您主机账户的帮助或支持部分，找到适合您情况的具体步骤。希望您喜欢学习更多关于网站迁移的知识。

结论

再次加入 Learn WordPress，继续您的 WordPress 学习之旅。