条款

在网站建设过程中，有一些常见的情况，您可能会发现有必要输出与分类法相关的术语列表。在WordPress的世界里，a分类是个体的分组吗术语中,可以应用于资产以帮助组织其内容。例如，下面是在WordPress中找到的一些常见的分类示例:

任何应用于分类分组的术语，如上面的列表，都可以在以后引用，以帮助用元信息标记帖子或自定义帖子类型，以便用户可以更快地找到相关信息。此外，每个单独的术语将产生自己独特的存档,可以将其链接为永久资源，以查找组织到该特定项目的所有内容。

共性

建造者自带三个术语元素变化对于构建中的许多不同类型的情况，这可以作为很好的起点。这些变化包括:

• 云
• 列
• 最小的

每个术语元素都是”预制,”这意味着它是使用我们选择的核心来构建的标准元素元素库中。每个变体的标记和样式将根据所需的Element结果略有不同。话虽如此，所有的术语元素之间有一些共同点是值得注意的:

• 每个Terms元素都是使用行元素作为它的基础。使用Row的灵活性允许我们实现许多不同的结果，或者根据需要轻松地更改特定变体的样式。
• 每个Terms元素中的行设置为使用< ul >标签，而它的列使用一个<李>标记，将这些变体设置为HTML列表。如果没有将您的术语放在HTML列表中，请确保相应地更新这些标记。
• 对于每个Terms元素，”列表项”在最顶层元素中这两个一个打环的供应商而且电影消费在同一级别启用。这样做仅仅是为了演示在相同的Element级别上使用Looper的两端的模式，以及使它更容易从一个地方更新Looper设置(如果需要的话)。
• 对于每个Terms元素，循环程序提供程序设置为所有条款默认情况下，分类设置为类别,它将检索在您的站点中普遍存在的所有类别(因为这是我们可以利用的唯一有保证的分类，因为WordPress至少需要未分类的类别)。但是，可以很容易地将此提供程序类型更改为现任职位如果您希望只访问分配给特定帖子或自定义帖子类型的术语。

云

的云我们的术语元素的变化特点药丸形状的按钮，以水平配置，这将在需要时换行:

这种变化的元素结构是非常直接的，只有一个按钮在我们”列表项,”这就是药丸造型发挥作用的地方:

分配给该元素的行(即”条款”元素)正在使用自动响应式布局技巧在我们的YouTube频道上概述，基本上每个断点都接收一个自定义值汽车而不是基于百分比的布局。这将允许列表中的项以水平线布局，但在耗尽空间时换行为新行。每个项之间的间距可以使用Row's进行调整差距控制。

至于按钮本身，它的内容是使用相同内容中的两个动态内容字符串输出的主要的文本像这样控制:

{{dc:术语:标题}}({{dc:术语:计数}})

这就是在我们循环数据时为我们提供每个术语的标题，然后是该术语应用于一段内容的总次数(括号只是用于样式化，如果需要可以删除或更改，或者可以删除整个计数，以使事情更流畅)。

此外,URL的每一项都设置使用{{dc:术语:url}}，它为我们提供了动态生成的该术语的存档页面链接，该页面将列出应用了该术语的所有内容。这些相同的Dynamic Content字符串以各种组合的方式用于本文中讨论的其他变体。

列

的列在默认情况下，我们的Terms元素的变化是单列配置，并且在设计时考虑了较小的宽度部分(即侧边栏，页脚列等):

由于设计的预期结果，它的标记稍微复杂一些，但它仍然非常易于管理和直接:

在”列表项”我们有”项,”在这个变体中哪个是由a驱动的Div元素这样我们就能利用它的内部Flexbox而不需要使用另一个行/列设置和添加不必要的标记。其中包括我们的”标题”使用标题和一个”数字”使用Div包含”数,”哪个是使用a的输出文本元素。

默认情况下，输出术语标题的Headline设置为its溢出在术语特别长时启用的控件:

这可以很容易地禁用，尽管在标题的控制，如果需要。另一件需要注意的事情是行元素在每个”列表项”命令后的输出”术语”并作为每个连续项目之间的分隔符。这个线元素有一个元素条件，应用在它下面定制control选项卡，该选项卡声明它只应该在Looper不是关于清单的最后一项:

如果您希望Line始终显示在每个Term之后，只需删除此Element Condition即可。

请记住，Column变体在设计时考虑了较小的空间，默认情况下将扩展到其父容器内的所有可用空间。但是，这可以使用最大宽度控制元素，或者另一种方法是调整它的响应布局控制行在较大的视口中将其分解为多个列。这样做可以产生一些非常有用的模式，例如:

最后一件需要研究的事情是，与其为每个断点设置特定的百分比宽度，不如研究一个替代方法auto-responsive布局我们在YouTube频道上探索过的一种技术，在这种情况下特别有用。

最小的

的最小的我们的术语元素变体的特点是基于文本的样式，在必要时换行。每个术语由分隔符分隔，以帮助在各个术语之间创建一些空间:

它的标记相对简单，由于它的风格，在这个设计中使用的分隔符有轻微的细微差别:

这个变体使用了同样的方法自动响应式布局技术如前所述”云”样式的实现汽车作为响应式布局控件中每个断点上的自定义值，这有助于将术语包装得更像传统文本。

要注意的一个主要的细微差别是该变体的存在”不是最后的分隔符”/”最后一个分频器”大纲中的元素。这两个元素都是文本元素，样式完全相同，内容相同/，作为每个术语之间的分界线。这两个元素之间的区别是它们应用的条件和应用于每个元素的效果样式。的”不是最后的分隔符”元素具有以下条件:

相反,”最后一个分频器”元素具有以下条件和静态效果，其中它的不透明度设置为0：

本质上，我们有相同的分割线两次样式完全相同，但我们输出一个可见的分割线给每一个”列表项”除了最后一个，一个看不见的只有在最后”列表项。”这样做的原因是Term内实际的Button元素比除法符小，如果我们用Element Condition完全去掉最后一个除法符，在某些情况下，缺少较大的除法符可能会导致垂直间距的崩溃。因此，我们仍然输出分割线来帮助保持适当的垂直间距，只是在视觉上隐藏它以保持整洁。

这里要记住的主要事情是确保你对一个除法做的任何调整，都会对另一个做。记住:控件可以轻松预览通常隐藏的元素预览经理．

演示

要查看术语元素变化的现场演示，请参见下面:

• 术语(云)
• 术语(列)
• 术语(最小)