如何在 WordPress 中添加 BMI 计算器(循序渐进)

您想向您的 WordPress 网站添加 BMI 计算器吗?

如果您提供与健康和健身相关的内容、产品或服务，那么 BMI 计算器可能对您的受众非常有用.

在本文中，我们将向您展示如何在 WordPress 中轻松添加 BMI 计算器.无需数学或代码！

什么是 BMI，为什么它很重要?

BMI 代表体重指数.它是根据身高和体重粗略测量体脂的方法.计算您的 BMI 可让您快速了解您是否体重过轻、超重或体重适合您的身高.

如果您已经创建了一个关于健身或健康的博客，那么为您的访问者提供一个 BMI 计算器可能很有意义.

向您的网站添加 BMI 计算器可以让人们在您的网站上花费更多时间.他们甚至可能最终会从您那里购买东西，或者您的会员优惠之一.

这也是鼓励重复流量的好方法.如果有人正在尝试减肥，他们可能会返回您的网站，看看他们的 BMI 是否有所改善.

我如何计算 BMI?

您可以使用以下计算方法计算出 BMI:

BMI = kg/m²

kg 是一个人的体重(公斤)，m² 是他们身高(米)的平方.

如果您更喜欢使用英制单位计算 BMI，那么您可以使用以下公式:

BMI = [体重磅/身高英寸²] x 703

健康的 BMI 介于 18.5 – 25 之间.BMI 低于 18.5 表示该人体重不足，而 BMI 超过 25 表示他们超重.

显然，让您的读者拿出他们的计算器并没有多大帮助.

您可以在您的网站上添加一个简单的计算器，用户可以在其中输入他们的身高和体重，以便计算器可以显示他们的 BMI.通过这种方式，用户可以继续关注您的网站，并且更有可能转化为客户.

在 WordPress 中创建 BMI 计算器

在本教程中，我们将使用 Formidable Forms 插件.它是市场上最好的 WordPress 表单构建器插件之一，允许您使用简单的拖放工具创建高级表单.

它带有大量的表单模板、计算器、高级中继器字段和其他工具.这允许您为您的网站创建高度交互的高级表单.

首先，您需要注册一个 Formidable Forms 帐户，然后安装并激活插件.有关更多详细信息，请查看我们关于如何安装 WordPress 插件的说明.

激活后，您需要访问强大的»表单页面，然后单击顶部的"添加新"按钮以创建您的 BMI 计算器.

完成此操作后，您将看到可用于创建表单的各种模板.

向下滚动以找到 BMI 计算器，或者只需在搜索栏中输入"BMI"即可找到它.

既然您已经在屏幕上显示了 BMI 计算器模板，请将鼠标光标移到该模板上，然后单击"创建表单"按钮.

接下来，系统会要求您提供表单名称和说明.如果需要，您可以使用默认名称并跳过描述.准备就绪后，点击"创建"按钮.

完成此操作后，Formidable Forms 将自动为您创建 BMI 计算器表单.

您将直接进入表单的"构建"视图.如您所见，表单本身位于屏幕的右侧.在左侧有一个区域，您可以在其中添加或编辑表单的字段.

BMI 计算器将在默认设置下完美运行.如果您想添加任何额外的字段，您可以通过点击左侧的字段来实现，它会自动添加到您的表单中.

如果您想保持表格简单，您可能需要移除 BMI Prime 框.表单不需要它.

要删除该字段，只需点击它，然后点击垃圾桶图标.

如果您希望用户提交表单以查看他们的 BMI 结果，那么您还可以删除体重不足、体重健康、超重和肥胖字段.

调整 BMI 计算器的设置

如果您对自己的 BMI 计算器感到满意，请点击屏幕顶部的"设置"标签.

您可能需要在此处进行更改.例如，您可以更改在用户提交表单后向用户显示的默认消息.如果您滚动到页面底部，您可以看到在提交框中列出的这些内容.

当有人使用计算器时，他们的结果会显示如下:

您可能需要调整措辞以适合您的受众.

此处的另一个选项是添加指向进一步指导的链接.例如，您可能有提供饮食或锻炼技巧的内容.

您可以在框中输入 HTML 代码.要更改框的字体大小和背景颜色，您可以使用 Formidable Forms 的样式功能.我们将在本教程的稍后部分进行介绍.

以下是包含相关链接的结果消息示例:

提示:您可以编辑结果消息的框很小.您可以从框中复制消息并将其粘贴到代码编辑器中以使其更易于编辑.完成后将其复制回消息框中.

更改您的 BMI 计算器的按钮文本

如果您想更改表单的按钮文本，您可以在设置»下进行.造型&按钮.

只需输入您要使用的文本即可.我们将使用文本"显示我的 BMI 范围"而不是"查看我的范围！"对于按钮文本.

对于第一次提交表单后出现的按钮上的文本，我们还更改了"更新结果"而不是"更新".

更改 BMI 计算器的样式

默认情况下，BMI 计算器看起来很简单.文字也很小，像这样:

您可以使用不同的颜色、字体大小等来更改表单的样式.为此，首先您需要前往强大的» WordPress 仪表板中的样式.

接下来，您可以单击"+新建样式"按钮开始创建新样式.或者，如果您想对所有表单使用相同的样式，您可以编辑现有的默认样式.

我们将为我们的 BMI 计算器表单创建一个新样式.

如果您点击"字段标签"选项卡旁边的下拉菜单，您可以更改表单字段上标签的大小.我们将把它从原来的 14px 提升到 18px.

在屏幕右侧，您会看到表单样式的预览.当您进行更改时，它会自动更新.

您可能还想在"字段设置"下增加字段本身的字体大小和字段高度.您可以在"复选框和公制"下更改单选按钮的大小(英制与公制).Radio Fields 选项卡.

您还可以在"按钮"选项卡下增加按钮字体大小.您也可以为按钮选择颜色.

如果您想放大结果消息或更改背景颜色，您可以在"表单消息"选项卡下执行此操作.

完成所需的所有更改后，单击右上角的"更新"以保存对样式的更改.

然后您可以将样式应用到您的表单中.首先，去强大的»表单然后找到您的表单.点击表单标题进行编辑，或将光标移到表单上并点击其下方的"编辑"链接.

然后您可以转到"设置"选项卡并单击样式和用于设置表单样式的按钮.

在这里，您可以使用样式模板下拉菜单来选择您的新样式模板.只需点击下拉菜单，然后点击您要使用的样式.

现在，您的表单将根据模板进行样式设置.这是我们的样子:

将 BMI 计算器表单添加到您的网站

准备好后，您可以将表单放在您的网站上.首先，您需要点击右上角的"更新"按钮来保存您的更改:

接下来，您需要编辑现有的帖子或页面或创建一个新的.

完成后，您可以单击 (+) 按钮添加新块.转到小部件部分，然后单击强大的表单块.或者，如果您愿意，也可以使用搜索栏进行查找.

现在，您只需选择您的 BMI 表格即可.点击"选择表格"下拉菜单并选择您的 BMI 计算器，如下所示:

您可能想要预览您的页面，以查看您完成的 BMI 计算器在您的网站上的实时显示效果.这是我们的:

如果您想更改或调整任何内容，只需返回 WordPress 仪表板中的表单即可.您可以在强大的»下找到它.表格.

每当您对表单进行更改时，它都会自动更新您网站上的所有位置.您无需更改简码或执行任何额外操作.

我们希望本教程能帮助您学习如何使用 Formidable Forms 在 WordPress 中添加 BMI 计算器.您可能还喜欢我们关于最有用的 WordPress 小部件的文章，并且必须为商业网站安装 WordPress 插件.