如何在 WordPress 中添加手风琴（分步指南）

您是否在 WordPress 网站上设计登录页面、产品页面或常见问题解答页面？ 然后你应该在你的页面设计中使用手风琴。

手风琴有助于使网站更易于浏览并改善用户体验。 它们还有助于减少混乱并缩短超长网页。

在这个分步指南中，我们将向您展示如何在您的网站上制作手风琴部分，而无需编写任何代码。

使用 WordPress 的一个好处是您可以使用一个简单的插件向您的网站添加令人惊叹的功能，例如手风琴。 在本指南中，我们使用 Heroic 常见问题解答，只需单击几下即可创建手风琴部分。

我们将逐步引导您完成整个过程。 让我们开始吧！

创建常见问题部分 - 简单的方法！

建立一个常见问题解答并帮助回答常见的访客问题。

获取插件

什么是手风琴？

手风琴是一种非常有用的设计策略，用于网页设计中，用于在一个地方组织多个内容部分。 简而言之，手风琴允许您在页面设计上创建一个带有可折叠选项卡的部分，以将大量内容打包到一个部分中。

例如，如果您正在制作一个常见问题 (FAQ) 部分，您可以使用手风琴来整齐地组织问题和答案。 这样您就可以只显示问题并将答案隐藏在可折叠的手风琴中。 它将允许您在页面设计上节省空间，并为用户提供一种更简单的方式来探索答案。

看看 Tesco 如何使用手风琴来组织他们的 FAQs 页面。

过去，网站也使用水平标签手风琴。 但它们今天很少用于网站设计。

手风琴与切换之间的区别

大多数人经常将手风琴与切换混淆。 尽管它们看起来相似，但它们的行为却不同。

例如，当用户单击手风琴上的标题时，它会查看其选项卡中的内容。 但是当他们单击另一个标题时，前一个选项卡会关闭以查看新选项卡。

通过切换，您可以修改此行为以使选项卡保持打开状态。 并允许用户手动关闭标签。

简而言之，手风琴一次只打开一个标签。 可以调整切换以查看一次打开的多个选项卡。

您不必担心这两个选项，因为我们用于在 WordPress 中设置手风琴的插件支持这两个选项。

为什么使用手风琴？

使用手风琴有很多好处。 以下是在您的网站上使用它们的几个原因。

节省大量空间

您是否曾经访问过一个长长的网页，迫使您一直向下滚动才能找到您正在寻找的内容？ 幸运的是，手风琴解决了这个问题。

使用手风琴的主要好处是能够节省网站空间。 您可以将所有重要信息隐藏在选项卡后面，而不是制作超长的页面。 并让用户通过浏览标题找到问题和答案。

更好的内容组织

手风琴还允许您以用户友好的结构组织内容。 使用手风琴，您可以嵌套选项卡以在类别和主题下组织内容。 您可以在我们之前向您展示的 Tesco 常见问题页面上看到这一点。

嵌入任何地方

手风琴可以嵌入到您网站的任何位置。 例如，您可以在定价页面或产品登录页面上添加常见问题手风琴部分。 这将允许您在不占用太多空间的情况下回答有关您的产品的常见问题。

减小页面大小

网页的大小在网站的页面加载速度中起着关键作用。 如您所知，页面加载速度是谷歌使用的主要排名因素之一。

在 WordPress 网站中使用手风琴时，您可以大大提高网站页面加载速度，因为它们可以作为小部件嵌入。

如何使用英雄常见问题解答添加手风琴

对于本教程，我们使用的是 Heroic FAQs WordPress 插件。 不仅仅是因为它是由我们自己的经验丰富的开发人员团队构建的。 主要是因为它是一个具有许多功能的插件。 并提供比其他插件更多的价值。

使用 Heroic FAQs 插件，您还可以为您的网站构建独特的常见问题解答和知识部分。

现在，让我们进入动手教程。

第 1 步：下载并安装 Heroic 常见问题解答

首先，您需要在您的 WordPress 网站上下载并安装 Heroic FAQs 插件。 购买插件后，您就可以从您的 Heroic 帐户仪表板下载它。

然后，登录到您的 WordPress 管理仪表板。 转到插件>>添加新页面并选择上传选项。 浏览您的计算机以找到下载的包含 Heroic FAQs 插件的 ZIP 文件并安装它。

完成安装后，请务必使用您的许可证密钥激活您的插件。

第 2 步：创建常见问题解答组

Heroic FAQs 插件将指导您完成初始设置过程。 只需按照其说明进行操作。

通过创建一个常见问题组开始。 您的所有常见问题解答都将在此处进行分组和组织。

然后，您可以开始向该组添加常见问题解答。 这些可以是问题和答案。 或有关产品功能的详细信息。 或者你想要的任何东西。

请记住，您可以根据需要添加任意数量的常见问题解答。

第 3 步：嵌入手风琴

现在您可以将您的常见问题解答组嵌入页面或帖子中。 使用新的 Gutenberg 块编辑器，使用 Heroic FAQs 添加手风琴要容易得多。

创建新页面或编辑现有页面。 添加一个新块并搜索Heroic FAQ内容块。

从左侧的英雄常见问题块面板中，您可以选择要在页面上显示的常见问题解答组。 以及改变手风琴设计的风格。

第 4 步：在 Accordion 和 Toggle 之间切换

借助 Heroic 常见问题解答，您只需单击一下即可在手风琴和切换选项之间进行选择。

第 5 步：预览手风琴

预览页面以查看手风琴的外观。 然后您可以点击发布以保存更改。

综上所述

您可以通过多种不同的方式利用手风琴来提高用户参与度并为客户提供更多价值。 使用我们的指南作为垫脚石，找到您自己独特的方法来以其他有用的方式使用手风琴。

同时，请随时浏览我们的博客以获取更多提示。 您会发现我们最好的知识库软件比较很有帮助。