如何将标签添加到 WordPress 帖子和页面

标签是许多网站上相当普遍的功能,尤其是电子商务商店。 电子商务店主通常在产品描述区域使用选项卡,他们将评论、描述、技术规格等拆分为多个选项卡。

电子商务网站上的选项卡示例

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

wordpress.org 插件描述页面上的选项卡

许多其他网站所有者在不同类型的网站上使用标签。 但是,不要将选项卡与 手风琴, 展开以揭示信息。 下面,请观察我是如何在我的网站上使用手风琴的。

vistamedia.xyz 上的手风琴

但是除了手风琴,我们在这里谈论 标签,所以让我们不要失去注意力; 我只需要清楚区分标签和手风琴。 现在,我希望我们在同一页上?

从本质上讲,网站所有者使用标签来拆分信息,否则这些信息会占据整个页面或帖子。 这意味着标签使信息更容易消化,而不必强迫用户点击滚轮一百万次。

换句话说,标签提高了您网站的可用性,尤其是在一个 更短的注意力. 因此,如果您想让用户在您的网站上停留更长时间,而又不会因为长页面让他们感到厌烦,您应该考虑使用标签。

在今天的帖子中,我们将向您展示如何将标签添加到您的 WordPress 帖子和页面。 在这篇文章结束之前,您将获得使用标签所需的所有说明。 我们希望您享受到最后,请不要在评论部分分享您的想法就离开。 不碍事,让我们开始吧。

使用页面构建器

如果您已经安装了页面构建器,那么您很幸运——您可能已经有了一个触手可及的标签模块。 大多数主要页面构建器都提供选项卡作为其核心页面构建器元素集的一部分。 快速浏览一下我们最喜欢的两个。

Elementor 免费页面生成器

Elementor 页面构建器选项卡

信息和下载查看演示

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

WPBakery 高级页面生成器

WPBakery 页面构建器选项卡

使用包含 WPBakery Page Builder 的高级主题(例如我们自己的 总主题)? 伟大的! 选项卡是内置的且易于使用。

WPBakery 选项卡模块与前面的示例略有不同,因为当您添加选项卡时,它们最初是空的。 您需要在选项卡中插入其他页面元素(文本区域、图像、图标等)以添加您的内容。 但这给了你很大的自由来创建你想要的标签(除了内置的样式选项)。 我们之前已经在博客上介绍过这个页面构建器,所以如果您想要更详细的说明,请查看我们的 WPBakery 指南(注意 – 这个插件以前称为 Visual Composer,如有任何混淆,请提前道歉)。

安装 Tabs WordPress 插件

标签免费 WordPress 插件

如果您不使用页面构建器,则无需仅将其用于选项卡。 有很多很棒的选择,比如免费的 WordPress 插件,简称为 WP Shop Mart 的 Tabs。 Tabs 是一个漂亮的 WordPress 插件,它可以帮助您创建无限数量的漂亮标签而不费力气。

让我们从安装 Tabs WordPress 插件开始。 由于它在官方 WordPress 插件存储库中可用,因此您可以直接从 WordPress 管理仪表板中安装该插件。

我们使用的是免费版本,但如果您想稍后升级以获得额外功能,可以使用高级版本。

安装 Tabs WordPress 插件

登录到您的 WordPress 管理仪表板并导航到 插件 > 添加新的 并在关键字搜索框中输入“tabs wpshopmart”。 找到合适的插件后,点击 现在安装 按钮,如下图所示。

安装标签 wordpress 插件

之后,单击 启用 按钮。 就是这样,您的 Tabs Responsive WordPress 插件就可以使用了。 现在,让我们创建几个选项卡来发现这个插件必须提供什么。

配置选项卡响应式 WordPress 插件

激活插件将在您的 WordPress 管理菜单中添加一个新项目。 要创建新选项卡,请导航至 响应式标签 > 添加新标签 正如我们在下面的屏幕截图中详述的那样。

使用标签响应式 wordpress 插件添加新标签

这样做会引导您进入 Tabs Responsive Builder,它包含您创建像老板一样漂亮的标签所需的所有功能。 请参阅下图,了解预期结果。

标签响应式wordpress插件标签生成器

不是很卷吗? 好吧,您可以在右侧边栏中找到大部分功能。 另请注意,各个选项卡都有其设置。 您甚至可以在选项卡上使用 WYSIWYG 编辑器,这意味着您可以充分控制选项卡。

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

添加标题

添加标签标题

首先给你的标签一个描述性的标题(就像你的导航菜单一样),如上图所示。 这样,您以后可以轻松地在 WordPress 管理仪表板中识别您的选项卡,以防您需要编辑任何内容。 出于本教程的目的,我将我的标签命名为“测试主页标签”。

选择标签设计模板

选择标签设计模板

如上面的屏幕截图所示,下一步涉及选择要用于选项卡的设计模板。 Tabs WordPress 插件的免费版本只为您提供一个设计模板,但您可以随时升级到高级版本 还有 19 个. 谈论设计自由。

添加标签

接下来,添加任意数量的选项卡,如下所示。

添加新标签

我们创建了一个编号列表,详细说明您可以在 添加标签 部分如上所示。 数字对应于每个区域。

  1. 标签标题 – 在此字段中添加您的标签标题,例如 描述,规格,细节, 等等
  2. 选项卡说明 – 在此处添加您的标签说明。 此字段允许您添加选项卡的内容。 最好的部分是您可以使用 WYSIWYG 编辑器(如下面的数字 3 所示)向您的选项卡添加丰富的内容,包括图像、音乐和视频
  3. 使用所见即所得 – 如果您想使用熟悉的 W帽子-欧-小号ee-一世s-W帽子-欧-Get 编辑器来创建你的标签内容,随意点击这个按钮来启动弹出窗口
  4. 选项卡图标 – 此字段可帮助您选择要在选项卡上使用的图标。 Tabs WordPress 插件让您可以访问大量的 Font Awesome 图标,让您的标签像专业人士一样活跃起来
  5. 显示在图标上方 – 如果您想在图标旁边显示标签标题,您会喜欢此功能。 此外,它允许您在不触摸标签标题的情况下禁用图标
  6. 删除 – 点击此按钮可删除特定选项卡
  7. 添加新标签 – 单击此按钮以添加更多选项卡
  8. 删除所有 – 厌倦了所有的标签? 刚打 删除所有 按钮重置一切

一些额外的提示可以帮助您。 首先,您可以拖放选项卡以根据需要重新排序和排列它们。

第二——别忘了打 保存草稿 在创建选项卡时单击一次或两次按钮,以确保在您不小心离开选项卡构建器时不会丢失任何更改。

最后——如果你需要支持,有一个大蓝 得到支持 按钮正下方 添加标签 部分(以及大多数插件页面上)将您引导至 WordPress.org 上的官方选项卡支持论坛。 如果您需要帮助,请随时点击支持按钮。

标签简码

选项卡简码

接下来,您会找到用于在任何页面或您想要的帖子上添加和显示选项卡的选项卡简码。 例如,我们的简码是 [TABS_R id=443]. 要在页面上显示选项卡,我只需将上述简码复制粘贴到该特定页面即可。

选项卡小部件

选项卡小部件支持

您是否希望将标签添加到您网站上的小部件区域? 如果这是一个响亮的肯定,您会喜欢 Tabs WordPress 插件附带的小部件支持。

击中 点击这里 上图中的链接将带您进入 WordPress 小部件屏幕,您可以在其中自由地在主题中有小部件区域的任何地方添加标签。

标签小部件

自定义 CSS

虽然 Tabs WordPress 插件带有大量选项卡自定义选项(只需看一眼右侧边栏;它充满了样式选项!),您可以添加自己的自定义 CSS 样式,如下所示。

  如何使用 WordPress 创建在线课程

标签 wordpress 插件 自定义 css

此外,您只需单击 更新默认设置 按钮,如上图所示。

右侧边栏

标签 wordpress 插件样式选项

我们在上图中突出显示的右侧边栏真正为您带来了一天。 它包含了根据您的内容设置标签样式所需的所有选项。 值得注意的选项包括:

  • 选项卡背景颜色
  • 选项卡字体颜色
  • 字体系列和样式
  • 选项卡标题和图标的显示选项
  • 选项卡图标位置对齐,即在选项卡标题之前或之后
  • 标签边框
  • 多个选项卡描述动画
  • 还有更多

将您的标签添加到 WordPress 页面或帖子

添加选项卡内容和样式选项后,向上滚动并单击 发布 按钮,如下图所示。

此时,您的标签已准备就绪。 您只需将标签添加到 WordPress 页面或帖子。 只需复制我们之前看到的标签短代码。 我们的是 [TABS_R id=443].

启动您的帖子编辑器(即使您正在使用 古腾堡) 并将短代码粘贴到您的帖子/页面中。 之后,点击 发布 按钮,如下图所示。

经过大约 5 分钟的设置; 我正在使用二十七个主题和大量的 Lorem Ipsum,我想出了以下结果。

请注意,我没有自定义颜色或任何东西。 告诉我你的想法; 不是那么容易吗?


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

如何在 WordPress 页面和帖子中添加标签? 您最喜欢的标签 WordPress 插件是哪个? 请在评论中分享您的想法。 快乐创作!

类似文章