选项卡是许多网站（尤其是电子商务商店）中相当普遍的功能。电子商务商店的所有者通常在产品描述区域中使用标签，将评论，描述，技术规格等分成多个标签。

尽管如此，选项卡已经在许多其他不同类型的网站中使用，而不仅仅是电子商务网站。甚至WordPress.org官方网站也使用插件描述页面上的标签。请参见下图，以查看WP.org中突出显示的选项卡。

许多其他网站所有者在不同类型的网站上使用标签。但是，不要将制表符与手风琴混淆，后者会扩展以显示信息。在下面，请观察我如何在我的网站上使用手风琴。

除了手风琴，我们在这里谈论  制表符，所以不要让我们失去焦点；我只需要弄清楚制表符和手风琴之间的区别。现在，我希望我们在同一页上

本质上，网站所有者使用标签来分割本应占据整页或整个帖子的信息。这意味着选项卡使信息更容易消化，而不必强迫用户按动滚轮一百万次。

换句话说，标签可改善您网站的可用性，尤其是在关注时间较短的情况下。因此，如果您希望将用户保留在您的网站上更长的时间，而又不会因为冗长的页面而使他们丧命，则应考虑使用标签。

在今天的帖子中，我们将向您确切演示如何向WordPress帖子和页面添加标签。在本文结束之前，您将获得使用选项卡以发挥自己的优势所需的所有说明。我们希望您能尽享快乐，并且请不要在评论部分中分享您的想法。顺便说一句，让我们开始吧。

使用页面构建器

如果您已经安装了页面构建器，那么您会很幸运–您可能已经可以使用标签模块。大多数主要页面构建器都将选项卡作为其页面构建器元素核心集的一部分。快速浏览一下我们的两个收藏夹。

Elementor免费页面生成器

信息与下载查看演示

流行的Elementor页面构建器包括选项卡，作为插件免费版本的一部分。您需要做的就是在页面上插入一个tab元素，然后编辑标题，内容，样式等。就是这样！

WPBakery高级页面生成器

信息与下载查看演示

使用包含WPBakery页面构建器的高级主题（例如我们自己的Total主题）？大！标签是内置的，易于使用。

WPBakery选项卡模块与上一个示例略有不同，因为添加选项卡时这些选项卡最初是空的。您需要在标签内插入其他页面元素（文本区域，图像，图标等）以添加内容。但是，这给了您很大的自由度，您可以根据自己的需要来创建选项卡（除了内置的样式选项）。我们之前已经在博客上介绍了此页面构建器，因此，如果您想了解更详细的说明，请查阅我们的WPBakery指南（注意-此插件以前称为Visual Composer，因此如有任何混淆，请提前抱歉）。

安装Tabs WordPress插件

信息与下载查看演示

如果您不使用页面构建器，则无需仅将其用于选项卡。有很多不错的选择，例如WP Shop Mart提供的免费WordPress插件，简称为Tabs。Tabs是一个漂亮的WordPress插件，可帮助您创建无限数量的漂亮标签，而又不费吹灰之力。

让我们从安装Tabs WordPress插件开始。由于官方WordPress插件库中提供了该插件，因此您可以直接从WordPress管理仪表板内部安装该插件。

我们正在使用免费版本，但是如果您以后想要升级以获得更多功能，则可以使用高级版本。

安装Tabs WordPress插件

登录到WordPress管理仪表板，然后导航到“  插件”>“添加新项”，然后在关键字搜索框中输入“ tabs wpshopmart”。找到正确的插件后，单击“ 立即安装”按钮，如下所示。

之后，单击  激活按钮。就是这样，您的Tabs Responsive WordPress插件可以使用了。现在，让我们创建几个选项卡，以发现此插件必须提供的功能。

配置选项卡响应式WordPress插件

激活插件会在您的WordPress管理菜单中添加一个新项目。要创建新标签，请在下面的屏幕截图中导航至响应标签>添加新标签。

这样做会导致您进入Tabs Responsive Builder，其中包含创建老板等漂亮标签所需的所有功能。请参见下图，以期了解预期结果。

滚动条不是吗？好吧，您可以在右侧栏中找到大多数功能。另请注意，各个选项卡都有其设置。您甚至可以在选项卡上使用所见即所得的编辑器，这意味着您可以对选项卡进行大量控制。

现在，让我们创建几个示例选项卡，并将它们显示在页面或帖子上。

添加标题

首先为标签页提供一个描述性标题（就像使用导航菜单一样），如上图所示。这样，以后您就可以轻松地在WordPress管理控制台中识别标签，以防您需要进行任何编辑。出于本教程的目的，我将选项卡命名为“ Test Home Tabs”。

选择标签设计模板

如上面的屏幕截图所示，下一步是选择要用于标签的设计模板。Tabs WordPress插件的免费版本仅为您提供一个设计模板，但您随时可以升级到高级版本，再获得19个。谈论设计自由。

添加标签

接下来，根据需要添加任意数量的标签，如下所示。

我们已经创建了一个编号列表，详细说明了您可以在上面显示的“  添加标签”部分执行的操作。数字对应于每个区域。

1. 选项卡标题  –在此字段中添加选项卡标题，例如  说明，规格，详细信息等。
2. 标签说明 -在此处添加标签说明。该字段允许您添加选项卡的内容。最好的部分是您可以使用WYSIWYG编辑器（如下面的数字3所示）向您的标签添加丰富的内容，包括图像，音乐和视频
3. 使用所见即所得的 -如果你想使用熟悉的  W¯¯ hat- Ÿ ou- 小号 EE- 我 S- W¯¯ hat- Ÿ ou- 摹等编辑器来创建你的标签内容，随意打这个按钮启动弹出上窗
4. 标签图标 –此字段可帮助您选择要在标签上使用的图标。Tabs WordPress插件可让您访问大量的Font Awesome图标，从而像专业人士一样使您的选项卡更加生动
5. 在图标上方显示 –如果您想在图标旁边显示标签标题，则将喜欢此功能。此外，它还允许您在不触摸标签标题的情况下禁用图标
6. 删除 –单击此按钮可以删除特定标签
7. 添加新标签页 –单击此按钮可以添加更多标签页
8. 全部删除 –厌倦了所有标签吗？只需点击  全部删除按钮即可重置所有内容

几个奖金提示可以帮助您。首先，您可以拖放选项卡以重新排序并根据需要排列它们。

第二–在创建选项卡时，不要忘记单击“ 保存草稿”按钮一次或两次，以确保在意外离开“选项卡”构建器的情况下不会丢失任何更改。

最后–如果您需要支持，“ 添加选项卡”部分下方（以及大多数插件页面上）都有一个蓝色的“ 获取支持”按钮，它可以将您带到WordPress.org的官方选项卡支持论坛。如果您需要帮助，请随时点击支持按钮。

标签简码

接下来，找到“标签”短代码，您可以使用该短代码在任何页面或所需的页面上添加和显示标签。例如，我们的简码是[TABS_R id = 443]。要在页面上显示选项卡，我只需将上面的简码复制粘贴到该特定页面即可。

标签小部件

您是否想将标签添加到网站的小部件区域中？如果确实如此，那么您会喜欢Tabs WordPress插件随附的小部件支持。

点击上图中的“  单击此处”链接，您将进入WordPress窗口小部件屏幕，您可以在其中随意在主题中具有窗口小部件区域的任何位置添加选项卡。

自定义CSS

尽管Tabs WordPress插件附带了许多选项卡自定义选项（只需看一眼右侧栏；其中就有很多样式选项！），您就可以添加自己的自定义CSS样式，如下所示。

此外，只需单击上图所示的“ 更新默认设置”按钮，即可将自定义设置设置为所有新选项卡的默认设置。

右侧边栏

我们在上图中突出显示的右侧栏确实为您度过了美好的一天。它包含了您所需的所有选项，可根据您的心脏内容设置标签样式。值得注意的选项包括：

• 选项卡背景色
• 标签字体颜色
• 字体家族和风格
• 显示选项卡标题和图标的选项
• 标签图标位置对齐，即标签标题之前或之后
• 标签边框
• 多个标签说明动画
• 还有更多

将选项卡添加到WordPress页面或发布

添加标签内容和样式选项后，向上滚动并单击“ 发布”按钮，如下所示。

至此，您的标签页已准备就绪。您只需要将选项卡添加到WordPress页面或发布即可。只需复制我们之前看到的选项卡简码。我们的是[TABS_R id = 443]。

启动您的帖子编辑器（即使您使用的是Gutenberg），然后将简码粘贴到您的帖子/页面中。之后，点击“  发布”按钮，如下所示。

经过约5分钟的设置；我使用的是“二十十七岁”主题和大量Lorem Ipsum，我得出了以下结果。

请注意，我没有自定义颜色或其他任何内容。告诉我你的想法; 那不是那么容易吗？

---

四年级学生的工作是在WordPress页面和帖子中添加标签。我不希望您遇到任何问题，特别是如果您使用的是诸如WP Shop Mart的Tabs之类的插件。

---

---

需要提供WordPress主题/插件的汉化服务可以随时联系我们！另外成品WordPress网站以及半成品WordPress网站建设，海外Google SEO优化托管服务，百度SEO优化托管服务，Centos/Debian服务器WP专用环境搭建，WP缓存服务器搭建，我们都是你的首选，拥有多年WP开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！