分类： WordPress 新手设计师

学习成果

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

定义

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

探索模板

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

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

编辑模板

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

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

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

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

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

分配模板

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

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

页眉和页脚模板部件

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

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

结论

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

介绍

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

页面模板

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

博客首页模板

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

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

索引模板

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

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

单篇文章模板

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

404 模板

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

搜索结果模板

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

所有归档模板

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

添加模板

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

结论

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

简介

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

导航

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

样式

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

样式手册

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

样式修订

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

页面

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

模板

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

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

分配模板

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

管理模板

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

模式

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

自定义模式

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

模板部分

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

命令面板

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

总结

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

简介

在本课中，我们将讨论如何测试您的内容以确保其可访问性。如果您已经观看过本主题的第一课，那么您已经熟悉“可访问性”这一术语，并了解其重要性。让我们回顾一下。数字可访问性是一个广义术语，旨在确保尽可能多的人能够使用网络，无论是操作在线服务还是消费在线内容。虽然可访问性具有法律和商业意义，但重要的是要记住，这些指南旨在为所有人提供更好的浏览体验。确保您的网站可访问的最简单方法是考虑在设计开发阶段就着手。然而，基于区块的主题提供了极大的灵活性，能力越大，责任越大。幸运的是，许多技术性的可访问性问题通常可以通过自动化工具轻松检测和修复。例如，正确的标题层级、颜色对比度、有意义的替代文本、链接文本等。讽刺的是，这些正是网络上最常见的可访问性失败点。在本教程中，我们将重点扭转这一局面，向您展示如何在发布前测试您创建的内容，确保您的文章和页面是可用的。

WordPress 内置辅助工具

WordPress 在编辑器中包含两个内置的可访问性辅助工具。第一点：语义结构。点击“文档概览”，然后选择“大纲”，检查您的标题顺序是否正确。从 H2 开始，按降序依次排列到 H6，中间不能跳过。WordPress 会用浅橙色标记错误的标题级别，并在您使用了不正确的标题级别时通知您。第二点：颜色对比度。如果您选择的文本和背景颜色组合未能提供足够的对比度，WordPress 会提醒您，表明这种颜色组合可能让用户阅读困难。尝试为背景和文本使用对比色，以增强可访问性。修复这些问题后，您的网站就已经比互联网上大多数大型网站做得更好了。要修复颜色对比度，请选择相关区块（在本例中为“按钮”区块），然后打开右侧边栏设置中的“样式”。接着，在“颜色”下方，我们可以更改背景颜色和文本颜色，以确保颜色对比度良好。

插件

接下来，让我们探索一些可访问性插件。WP Tota11y、Sa11y 和 Editoria11y 是彼此的不同变体。

WP Tota11y

WordPress Tota11y 是一个轻量级插件，可检查前端和编辑器中的常见可访问性合规性，通知您任何不正确的标题级别、颜色对比度、不良链接文本、表单元素中缺失的标签以及图像中缺失的替代文本。该工具具有一个简洁的实验性功能，称为“屏幕阅读器魔杖”，可以像屏幕阅读器一样查看元素。您可以在每个类别中浏览警报，并查看建议的修复方法，但建议在前端进行操作，因为在编辑器中它可能会检查整个浏览器窗口，导致混淆。

Sa11y

第二点：Sa11y 在前端提供了一套全面的检查功能。您可以在“设置”中切换一些额外的检查项，例如可读性、高级链接、颜色对比度和表单标签，您还可以在那里找到颜色滤镜，用于测试您的页面在几种色盲类型用户眼中的显示效果。虽然错误被清晰标记，但描述较为笼统，修复方法也不够直接。Sa11y 使管理员能够在其高级设置管理页面上定义和控制各种功能。

Editoria11y

Editoria11y 专注于内容和结构。不会检查颜色对比度等设计元素。启用后，它会在前端和编辑器中显示警报，通知您有关文档大纲、标题级别、链接文本和目标（即“在新标签页中打开”）以及图像中缺失的替代文本。其目标是帮助作者和编辑发现常见问题，并用通俗易懂的语言描述失败点，建议修复方法，并允许用户在警报无关时隐藏或忽略它。Editoria11y 还会生成报告，并使管理员能够排除警报、跳过某些测试或根据 CSS 选择器包含元素。

Accessibility Checker

另外，还有流行的 Accessibility Checker，它在文章或页面编辑器窗口中添加了一个新部分，并在前端添加了一个悬浮按钮。它会显示错误摘要、详细说明（包括相关代码片段）、可能的修复方法，以及忽略单个警报的选项。

操作系统应用和浏览器扩展

如果您想更进一步，测试更多技术方面，可以执行以下操作。第一点，尝试仅用键盘浏览您的网站。不要使用鼠标。使用 Tab 键在链接、按钮和表单字段之间导航，按 Enter 或空格键激活这些页面上的交互元素。记录下需要修复的无功能元素和缺失的视觉指示器。第二点，您可以更改设备的配色方案，以确保在深色或高对比度模式下内容显示正常且功能正常。

结论

总之，创建或维护内容的作者和内容管理者可以直接控制关键方面，如标题层级、文本大小、颜色对比度、链接、图片替代文本等。换句话说，你无需接触代码就能避免生成难以访问的内容。只需保持用心和同理心即可。

引言

创建包容性网站的无障碍指南。在本课中，我们将讨论如何设计网站，让每个人都能使用和享受，无论他们的能力如何。让我们从基础开始。网络无障碍是指设计适用于所有人的网站，包括那些有视觉、听觉、运动或认知障碍的人。但当我们为无障碍设计时，实际上是在改善所有用户的体验。你不仅在做正确的事，还能提升网站的搜索引擎优化和整体可用性。此外，在许多国家，这也是法律要求。

WordPress 与无障碍

WordPress 在无障碍方面取得了巨大进步。许多主题和插件正朝着无障碍的方向努力，平台本身也旨在达到 Web 内容无障碍指南 2.2 的 AA 级别。作为设计师，我们可以利用这些功能并加以提升。那么，我们该怎么做呢？

关键原则

让我们将其分解为一些关键原则。首先是颜色对比度。你需要确保文本和背景颜色之间有足够的对比度。一个名为 WebAIM 对比度检查器的便捷工具可以帮助你解决这个问题。接下来是排版。选择易于阅读的字体，并将基础字号设为至少 16 像素。请注意，这仅仅是最佳实践指南。使用至少 1.5 的行高以获得最佳可读性，避免全大写和小型大写字母，并仅将下划线用于链接。此外，不应使用两端对齐的文本。默认情况下，WordPress 不允许两端对齐的文本，因为它会因间距不规则而降低可读性。现在来看结构和布局。将你的网站想象成一本组织良好的书。你需要一个清晰、一致的布局，并具有逻辑阅读顺序。使用正确的标题层级，这就像为你的网站创建目录。导航是网站的另一个关键部分。设计菜单时要使其既便于鼠标操作，也便于键盘操作。别忘了表单。清晰标记所有内容。每个表单输入都应有相应的标签，并与字段正确关联，所有表单元素都应可通过键盘操作。按钮也应包含描述其操作的有意义文本。最后，始终为图像提供描述性的替代文本。替代文本是对图像的简短描述，用于改善无障碍性并帮助搜索引擎理解图像。
此外，应始终提供视频字幕和音频转录。所有这些步骤都有助于为你的视觉内容赋予声音。

WordPress 特定技巧

现在，让我们进入一些 WordPress 特定的技巧。在选择主题时，寻找 WordPress 仓库中标有“无障碍就绪”的主题。这将帮助你抢先一步实现无障碍。接下来，测试插件呢？某些类型的 WordPress 插件如果没有按照最佳实践设计，可能会导致无障碍问题。一个好的方法是检查插件的可用性，仅依靠键盘导航而不使用鼠标。此外，你可以使用像 WebAIM 的 WAVE 这样的工具来检查插件的无障碍问题。还有一些很棒的无障碍插件，提供检查和改善内容无障碍性的工具。在下一课中，我们将进一步探讨这一点。测试至关重要。把它想象成校对，但针对的是包容性。在设计网站时，始终完成无障碍审计。不要将其视为事后考虑。记住，为无障碍设计是一个持续的过程。通过在 WordPress 设计中优先考虑无障碍性，你不仅是在遵循最佳实践，更是在为每个人创造一个更具包容性的网络。

引言

在本课中，我们将探讨为何使用站点编辑器进行设计和原型制作是一个好主意。课程成果包括识别使用站点编辑器的优势、使用站点编辑器预览样式选择以及强调与网页相关的设计原则。站点编辑器是WordPress的视觉设计工具，可让您自定义从页眉和页脚到整个页面布局的所有内容。

使用站点编辑器的优势

编辑器具有以下几个优势：

• 当您掌握区块后，由于整个站点完全由区块构建，您可以轻松管理站点上的所有内容。区块取代了所有先前的方法，包括短代码、小工具、嵌入和自定义HTML，从而简化了您的内容创建过程。
• 通过在WordPress内部直接设计，您可以简化从概念到实施的流程，便于更轻松的更新和维护。这种方法还减少了设计师与开发者之间传统的交接挑战。
• 编辑器提供设计的实时交互预览，使您能够立即进行测试和优化。
• 此外，通过使用WordPress的原生工具进行设计，您可以确保与平台的兼容性，并减少通常与外部设计软件相关的学习曲线。

在站点编辑器中设计

接下来，让我们探索在站点编辑器中进行设计。开始时，请确保安装并激活一个基于区块的主题，例如Twenty Twenty-Five，然后打开站点编辑器。接着，我们可以进入样式，然后选择“缩小”选项。然后我们就可以开始样式设计了。首先，我将更新文本的排版，然后是标题。接着，我将进入颜色并更新我的调色板。我将更改背景颜色，以及对比色和强调色。一旦我更新了调色板，我会确保增强交互元素，例如按钮。所以，让我们继续选择我们的按钮区块，并将文本外观改为半粗体。

接下来，我们可以继续修改页眉和页脚模板部分。因此，我将打开我的页面模板，因为模板当然提供了页面的结构，然后我将在列表视图中选择我的页眉。然后我们有一系列模式可供选择。当您找到所需的模式后，您可以修改它以符合您的设计需求。然后继续处理您的页脚模板部分。一旦您对页眉和页脚满意，您可以自定义您的模板。例如，所有存档模板、单篇文章模板，甚至搜索结果模板。对于这个例子，让我们修改404模板，该模板在未找到页面时显示。当然，您可以完全更改此模板，但我只是要调整和修改内容的布局。一旦我们编辑了模板，我们就可以开始选择模式和部分，并根据我们的设计愿景进行修改。

提醒一下，区块优先设计意味着将您的网站分解为更小的、可重用的组件，这些组件可以混合搭配以创建多样化的布局。在第一个例子中，我们可以复制主题自带的一个模式，将其保存为同步或非同步模式，然后进入“我的模式”，并相应地修改模式或可重用组件。然后您还可以选择从头构建一个同步或非同步模式。当您返回模式时，可以点击“添加新模式”，适当命名，选择一个类别，然后选择是否同步。然后您可以构建您的模式或可重用组件。然后您会注意到此模式也出现在“我的模式”下方。

与网页相关的设计原则

最后，让我们探索一些关键的网页设计原则，这些原则将帮助指导您的旅程，也称为格式塔原则，即接近性、相似性、连续性和闭合性。

1. 接近性：将相关元素分组在一起，以营造组织感和结构感。在上面的例子中，您会注意到没有使用足够的间距来将相关部分分组在一起。
2. 相似性：对相关元素使用一致的样式以表明它们的联系。在这个例子中，类别之间的相似性帮助用户快速找到他们需要的内容。让我们从不同角度看待相似性。在下面的例子中，行动号召按钮使用不同的颜色来显示不同的操作，但它们相似的尺寸和形状使它们感觉相互关联。通过在您的网站上对类似功能或内容类型使用一致的样式（如颜色、形状或尺寸），您可以帮助用户快速识别并理解不同元素的用途。
3. 连续性：对齐元素以创建眼睛可以跟随的自然流动。
4. 闭合性：让用户的大脑完成形状或模式，减少视觉杂乱。这一原则常用于标志设计和图标中，以创建简单而令人难忘的视觉效果。如果我们看WWF的标志，您会注意到我们填补了空白以完成熊猫的图像。通过掌握站点编辑器并理解这些基本的网页设计原则，您已经具备了在WordPress内部直接创建功能网站的能力。

结论

通过掌握站点编辑器并理解这些基本的网页设计原则，您将能够轻松创建视觉上引人注目且功能强大的 WordPress 设计。

简介

在本课中，我们将探讨如何查找、激活和自定义符合您设计需求的块主题。块主题代表了 WordPress 设计的未来。它们完全由块构建而成，提供了令人难以置信的灵活性和自定义选项。块主题让您可以直观地编辑网站的每个部分，从页眉到页脚以及两者之间的所有内容。

查找、选择和激活块主题

要查找块主题，请访问 WordPress.org 网站，点击“扩展”，然后选择“主题”。接着，您可以点击“块主题”，仅查看目录中可用的块主题。在选择块主题时，请考虑其最后更新时间、活跃安装数量以及是否与最新版本的 WordPress 兼容。查看评分和主题提供的支持也可能有所帮助。您也可以通过仪表盘访问块主题。前往“外观”，点击“主题”，选择“添加新主题”，然后通过选择“块主题”或“功能筛选”来缩小搜索范围。请记住，使用块主题时，您不会被锁定在初始设计中。您选择的是一个可以自由自定义的起点。您也可以从默认的 WordPress 主题开始，将其塑造成您想要的主题。一旦找到合适的主题，您可以点击“安装”，然后点击“激活”。

自定义您的主题

然后我们可以前往“外观”，打开站点编辑器。在这里，我们可以自定义网站的每个方面。我们可以编辑模板、创建新布局以及调整全局样式。在搜索块主题时，您可以选择一个接近您期望效果的主题。这种方法可以节省您的时间和精力。例如，如果您正在构建一个作品集网站，请从专注于作品集的块主题开始。对于商业网站，请寻找具有强大首页布局和模式的主题。在此基础上，您可以调整颜色和排版以匹配您的品牌，修改布局以适应您的内容，并根据需要添加或删除部分。如前所述，您甚至可以选择极简设计（例如默认主题）作为工作基础。祝您设计愉快，并享受 WordPress 块主题的灵活性。