首页 » 博文 » wpbeginner » 最佳插件 » 如何在 WordPress 帖子和页面中添加选项卡式内容

如何在 WordPress 帖子和页面中添加选项卡式内容

您是否想将帖子分成多个选项卡以节省空间并让用户更轻松地找到他们想要的内容?

添加选项卡式内容可帮助您添加有关产品和服务的更多信息。它还允许用户在一个地方找到所有详细信息,而不是转到不同的页面。

在本文中,我们将向您展示如何向 WordPress 帖子和页面添加选项卡式内容。

在 WordPress 帖子和页面中添加选项卡式内容

什么时候应该在 WordPress 中使用选项卡式内容?

使用选项卡可以在较小的空间中添加更多详细信息或拆分大块内容,以获得更好的组织和用户体验。

假设您有一家在线商店。您可以添加产品描述、评论、技术规格等选项卡。这种分离有助于在一个地方为您的客户提供所有详细信息,并使页面具有交互性。

同样,您可以在WordPress.org插件页面上查看选项卡式内容。该页面使用详细信息、评论、安装、支持和开发信息等选项卡分为不同的部分。

选项卡式内容预览

选项卡式内容有助于让人们留在您的WordPress 网站上。您不必将人们发送到另一个页面即可获取他们所需的有关您的产品和服务的所有详细信息。

也就是说,让我们看看如何将选项卡式内容添加到 WordPress 页面和帖子中。

我们将使用以下两种方法来完成此任务:

方法 1:使用登陆页面生成器添加选项卡式内容

在 WordPress 中添加选项卡式内容的最佳方法是使用SeedProd。它是最好的 WordPress 登陆页面和网站构建器。SeedProd 适合初学者,并配有拖放构建器、预制模板和多个自定义选项。

在本教程中,我们将使用SeedProd Pro许可证,因为它包含用于添加选项卡式内容的高级块。还有一个SeedProd Lite版本您可以免费使用。

首先,您需要安装并激活 SeedProd 插件。如果您需要帮助,请参阅我们有关如何安装 WordPress 插件的指南。

激活后,您将被重定向到 WordPress 仪表板中的 SeedProd 欢迎屏幕。继续输入您的许可证密钥,您可以在 SeedProd 帐户区域找到该密钥。

SeedProd 许可证密钥

接下来,您可以从 WordPress 管理面板前往SeedProd » 登陆页面。

之后,只需单击“创建新登陆页面”按钮即可。

添加新的 SeedProd 登陆页面

从这里,SeedProd 将向您显示多个着陆页模板供您选择。

继续并选择您想要使用的模板。只需将鼠标悬停在模板上并单击橙色勾号图标即可。

选择着陆页模板

现在将打开一个弹出窗口,您需要在“页面名称”字段中输入页面标题,并在“页面 URL”下输入永久链接

之后,只需单击“保存并开始编辑页面”按钮即可。

输入页面的名称

这将启动 SeedProd 拖放构建器。您现在可以向模板添加不同的块并编辑现有元素。

要添加选项卡式内容,只需将“高级”部分下的“选项卡”块拖放到页面模板上即可。

将选项卡块添加到模板中

接下来,您可以在 SeedProd 中自定义选项卡块。

例如,您可以单击“添加新项目”按钮来添加所需数量的选项卡。另外,还有一些选项可以编辑字体大小、文本之间的间距以及每个选项卡中内容的对齐方式。

将新项目添加到选项卡块

接下来,您可以单击任何选项卡以进一步编辑并添加详细信息。

例如,您可以更改每个选项卡的标题、添加内容以及更改选项卡图标。

添加内容并更改选项卡标签

除此之外,SeedProd 还提供高级定制选项。

只需单击左侧菜单中的“高级”选项卡即可。在这里,您可以更改选项卡布局、版式、颜色、背景颜色、边框等。

编辑选项卡块的高级设置

当您对选项卡块进行更改并自定义着陆页时,请不要忘记单击顶部的绿色“保存”按钮。

之后,您可以转到“页面设置”选项卡。

发布您的选项卡式内容页面

接下来,您可以单击“页面状态”开关并将状态从草稿更改为发布。

您可以单击“保存”按钮来存储更改并关闭页面构建器。

现在,只需访问您的网站即可查看正在运行的选项卡式内容 WordPress 页面。

选项卡式内容登陆页面预览

方法 2:使用 WordPress 插件添加选项卡式内容

如果您不想使用登陆页面构建器,那么您可以使用专用的 WordPress 插件将选项卡式内容添加到您的帖子和页面。

首先,您需要安装并激活选项卡响应插件。有关更多详细信息,请参阅我们的WordPress 插件安装指南。

激活后,您可以从 WordPress 仪表板转到“选项卡响应式”»“添加新选项卡”,然后首先输入选项卡的名称。

输入选项卡的名称

接下来,您可以通过单击红色的“添加新选项卡”按钮向下滚动以添加任意数量的选项卡。

另外,您可以通过更改标题、添加说明、使用不同的选项卡图标以及编辑图标位置来单独编辑每个选项卡。

编辑选项卡设置并添加详细信息

除此之外,该插件还在右侧菜单中提供不同的“选项卡设置”。

例如,您可以选择是否显示选项卡标题、为标题和图标选择不同的选项、更改图标位置、显示选项卡边框、选择文本颜色等等。

编辑选项卡设置并添加详细信息

进行更改后,您现在可以使用插件生成的简码在任何博客文章或页面中使用选项卡。

只需单击“发布”按钮即可。

发布您的标签

接下来,您可以使用短代码在任何页面或帖子上添加选项卡[TABS_R id=130]。只需确保将短代码中的 ID 号替换为您的选项卡 ID 号即可。

您可以通过转到“选项卡响应”»“所有选项卡”并复制“选项卡短代码”列下的代码来轻松找到选项卡 ID 和短代码。

查找选项卡式内容的 ID 号

接下来,您只需添加新帖子或编辑现有帖子即可。

当您在内容编辑器中时,继续添加短代码块以输入短代码。

添加短代码块

之后,您可以预览您的博客文章或页面。如果一切正常,您可以单击“发布”或“更新”按钮来保存帖子中的标签。

现在,访问您的网站以查看正在运行的选项卡内容。

选项卡式内容插件预览

我们希望本文能帮助您了解如何向 WordPress 帖子和页面添加选项卡式内容。您还可以查看我们关于WooCommerce 的简单指南以及如何选择最佳的网页设计软件

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top