如何在 WordPress 中创建标签以获得令人惊叹的标签内容

已发表: 2022-09-01

想了解如何在 WordPress 中创建标签?

向您的 WordPress 网站添加标签是组织不同类型的内容并节省帖子和页面空间的绝佳方式。

在本文中,我们将逐步向您展示如何在 WordPress 中添加选项卡。

WordPress中的标签是什么?

标签是一种组织内容的导航系统,使访问者更容易浏览您的网站。 您可以将标签添加到帖子和页面,或使用标签小部件在 WordPress 侧边栏和小部件区域中显示标签内容。

为什么需要标签式 WordPress 内容?

除了对内容进行排序之外,标签还可以更轻松地让您的网站访问者保持活跃和参与。 由于选项卡将内容主题组合在一个页面上,因此用户无需单击即可转到其他页面,这对于较短的注意力跨度来说是理想的选择。

例如,WordPress.org 使用其插件页面上的选项卡来显示详细信息、评论、支持和开发等信息。

WordPress.org 上的选项卡式内容示例

使用选项卡的其他一些方法包括:

  • 在产品描述中显示不同的产品规格
  • 在您的博客侧边栏中过滤类别
  • 在联系页面上对联系信息进行排序

专业提示:标签不应与手风琴混淆。 用户单击选项卡以切换信息,而手风琴展开以显示信息。

现在您了解了更多关于标签如何工作以及为什么需要它们的信息,让我们看看如何将标签添加到您的 WordPress 网站。

下面我们将分享 2 种向 WordPress 添加标签的方法。 首先,我们将使用页面构建器,然后向您展示如何使用 WordPress 插件创建选项卡。

让我们开始吧。

  • 方法 1:如何使用页面构建器在 WordPress 中制作标签
    • 方法 2:如何使用 WordPress 插件添加标签

    方法 1:如何使用页面构建器在 WordPress 中制作标签

    对于第一种方法,我们将使用最好的 WordPress 网站构建器 SeedProd 将选项卡式内容添加到您的网站。

    SeedProd WordPress 网站建设者

    SeedProd 是一个功能强大的拖放页面构建器,可让您创建灵活的 WordPress 布局而无需编写代码。 借助其专业的网站工具包、登录页面模板和实时可视化编辑器,您可以自定义网站的每个部分并实时查看更改。

    您还可以使用 SeedProd 来:

    • 创建自定义 WordPress 主题
    • 建立 WooCommerce 网站
    • 创建高转化的登陆页面
    • 将您的网站置于维护模式
    • 以及更多

    此页面构建器还包括高度可定制的块,用于增强您的 WordPress 设计。 例如,使用我们将在本指南中使用的选项卡块,您只需单击几下即可将多个选项卡添加到页面。

    按照以下步骤使用 SeedProd 在 WordPress 中创建选项卡。

    步骤 1. 安装 SeedProd 网站构建器

    首先,您需要前往 SeedProd 网站并下载插件。 SeedProd 确实有免费版本。 但是,您需要一个高级计划来解锁标签和其他块。

    下载插件后,您需要在 WordPress 网站上安装并激活它。 如果您以前从未安装过 WordPress 插件,则可以按照这些说明进行操作。

    激活插件后,导航到SeedProd » 设置并输入您的插件许可证密钥。

    输入您的许可证密钥

    您可以在“下载”部分下的帐户仪表板中找到您的 SeedProd 许可证密钥。

    找到您的 SeedProd 许可证密钥

    请记住在进行下一步之前单击“验证密钥”按钮。

    第 2 步。创建 WordPress 主题或登录页面

    有两种方法可以使用 SeedProd 向您的网站添加标签:

    1. 使用主题生成器创建自定义 WordPress 主题,并将选项卡添加到任何 WordPress 页面。
    2. 使用拖放页面构建器创建带有选项卡式内容的独立登录页面。

    对于本指南,我们将使用第一个选项,因为它允许您将选项卡添加到您喜欢的任何页面,包括您的主页、WordPress 侧边栏、页眉、页脚以及主题中的任何其他位置。

    您可以按照此分步指南使用 SeedProd 创建 WordPress 主题,然后返回此处获取有关向您的站点添加标签的说明。

    第 3 步。将标签添加到您的 WordPress 页面

    构建 WordPress 主题后,您需要决定哪些页面应该包含选项卡式内容。 例如,您可以在联系页面中添加标签以显示不同类型的联系信息,或者在自定义侧边栏中添加不同帖子类别的标签。

    在此示例中,我们将在“关于”页面添加选项卡以显示更多详细信息,例如职位空缺、编辑指南等。

    为此,请从您的 WordPress 管理员转到页面 » 所有页面,然后找到您要编辑的页面。

    由于您使用的是 SeedProd 网站工具包,因此会自动创建内容页面,例如 about、contact 和 services 页面。 要在可视化编辑器中打开它们,请单击Edit with SeedProd链接。

    使用 SeedProd 进行编辑

    在页面构建器中打开页面后,您可以使用 SeedProd 的自定义选项进行更改。 您可以单击任何元素来更改其内容、颜色、样式和可见性。

    SeedProd 拖放式构建器

    通过从块面板中拖动它们并将它们放置在适当的位置,也可以轻松地将更多元素添加到您的页面。 所以让我们用 SeedProd 的标签块来做这件事。

    首先,向页面添加一个新部分以“容纳”您的选项卡式内容。 在我们的例子中,我们将复制现有部分之一并将其拖到页面底部。

    在 SeedProd 的页面构建器中复制一个部分

    之后,将图像换成更相关的内容,并通过单击垃圾桶图标删除您不再需要的任何内容。

    在 SeedProd 中删除一个块

    现在您可以在左侧面板中查找选项卡块并将其拖到页面上的新部分中。

    拖放 SeedProd 选项卡块

    单击该块会显示其内容设置,您可以在其中:

    • 添加多个选项卡
    • 显示或隐藏选项卡图标
    • 更改字体大小
    • 增加或减少选项卡之间的间距
    • 调整标签对齐方式
    标签块设置

    展开每个选项卡可让您添加选项卡标题并使用具有“所见即所得”(WYSIWYG) 设置的经典编辑器编写内容。

    您还可以启用自定义图标来为您的选项卡添加更多兴趣并使它们脱颖而出。 只需将“隐藏标签图标”切换到“关闭”位置,然后从 Font Awesome 库中选择一个自定义图标。

    SeedProd 选项卡图标

    单击“高级”选项卡可让您选择更多自定义选项,包括自定义背景颜色、字体、边框、间距等。

    高级选项卡设置

    您还可以通过单击任一布局选项来显示垂直选项卡或水平选项卡集。

    SeedProd 中的垂直和水平选项卡

    请记住单击屏幕右上角的保存按钮以保存更改。

    按照相同的步骤将选项卡添加到 WordPress 网站上的任何其他页面,然后继续下一步以使您的更改生效。

    第 4 步。发布您的选项卡式内容

    将标签添加到您的各种 WordPress 页面后,您就可以将它们发布给您的网站访问者查看。

    为此,请转到SeedProd » Theme Builder页面并将“启用 SeedProd 主题”切换到“打开”位置。

    启用种子产品主题

    现在您可以预览您的页面并查看您的选项卡式内容。

    如何使用 SeedProd 示例在 WordPress 中创建选项卡

    方法 2:如何使用 WordPress 插件添加标签

    如果您不想更改 WordPress 主题或创建登录页面,以下方法是一个不错的选择。 我们将使用免费的 Tabs Responsive WordPress 插件将响应式标签添加到您的 WordPress 网站。

    首先,您需要安装 Tabs Responsive 插件并从您的 WordPress 管理员激活它。

    安装并激活 Tabs Responsive WordPress 插件

    然后,导航到Tabs Responsive » 添加新选项卡并为您的选项卡集命名。

    添加新标签集

    从那里,您可以选择默认模板,或者如果您使用的是专业版,您可以从 18 多种模板样式中进行选择。

    下一步是添加标签。 您可以创建任意数量的选项卡,包括:

    • 标签标题
    • 选项卡说明
    • 选项卡图标
    编辑您的标签内容

    您还可以通过选择自定义选项卡样式、背景颜色、字体颜色等来编辑右侧边栏中每个选项卡的样式。

    标签自定义选项

    当您对标签感到满意时,复制标签短代码并将其粘贴到您的 WordPress 主题中的任何位置。

    复制标签短代码

    例如,您可以将短代码粘贴到 WordPress 帖子或页面中,如下所示:

    将标签短代码添加到 WordPress 帖子或页面

    这是它在您网站前端的外观:

    WordPress 页面标签示例

    您还可以通过将短代码粘贴到段落块中来将选项卡短代码添加到小部件就绪区域,例如 WordPress 侧边栏或页脚小部件。

    在 WordPress 侧边栏中粘贴标签短代码

    之后,您将在侧边栏区域看到您的选项卡式内容:

    WordPress 侧边栏中的选项卡示例

    你有它!

    在本教程中,您学习了如何在不编写代码的情况下在 WordPress 中创建选项卡。 准备好在您的网站上创建可自定义的标签了吗?

    立即开始使用 SeedProd

    当您在这里时,您可能还喜欢这些其他有用的 WordPress 指南:

    • 如何在 WordPress 中创建文本动画(简单步骤)
    • 如何为 WordPress 网站创建精美的分区分隔线
    • 如何在 WordPress 中添加作者框(无插件)

    谢谢阅读。 请在 YouTube、Twitter 和 Facebook 上关注我们,获取更多有用的内容来发展您的业务。