如何在WordPress中添加BMI計算器(逐步)


您是否要向您的WordPress網站添加BMI計算器?

如果您提供與健康和健身相關的內容,產品或服務,那麼BMI計算器可能對您的受眾非常有用。

在本文中,我們將向您展示如何在WordPress中輕鬆添加BMI計算器。 無需數學或代碼!

將BMI計算器添加到WordPress網站

什麼是BMI,為什麼重要?

BMI代表體重指數。 這是根據身高和體重對人體脂肪進行的粗略測量。 計算您的BMI可以快速指示您體重過輕,超重或身高體重合適。

如果您已經開始撰寫有關健身或健康的博客,那麼為訪問者提供BMI計算器可能很有意義。

在您的網站上添加BMI計算器可以使人們在您的網站上花費更多的時間。 他們甚至可能最終從您那裡購買了東西,或者是您的會員優惠之一。

網站上的BMI計算器表單預覽

這也是鼓勵重複訪問的好方法。 如果有人嘗試減肥,他們可能會返回您的網站以查看其BMI是否有所改善。

如何計算BMI?

您可以使用以下計算得出BMI:

體重指數= kg / m2

公斤是一個人的體重,以公斤和米為單位2 是他們的高度(以平方米為單位)。

如果您希望使用英制單位來計算BMI,則可以使用以下公式:

體重指數= [weight lbs / height inches2] x 703

健康的BMI在18.5 – 25範圍內。 BMI低於18.5表示該人體重過輕,BMI超過25表示該人體重超重。

顯然,要求讀者拿出計算器並不是很有幫助。

您可以在網站上添加一個簡單的計算器,用戶可以在其中輸入身高和體重,以便計算器可以向他們顯示其BMI。 這樣,用戶就可以繼續在您的網站上參與,並更有可能轉化為客戶。

在WordPress中創建BMI計算器

在本教程中,我們將使用“強大的表單”插件。 它是市場上最好的WordPress表單生成器插件之一,可讓您使用簡單的拖放工具創建高級表單。

它帶有大量的表單模板,計算器,高級轉發器字段和其他工具。 這使您可以為網站創建高度交互的高級表單。

首先,您需要註冊一個Formidable Forms帳戶,然後安裝並激活該插件。 有關更多詳細信息,請查看我們有關如何安裝WordPress插件的說明。

激活後,您需要訪問 強大»表格 頁,然後單擊頂部的“添加新”按鈕以創建您的BMI計算器。

創建新的BMI計算器表單

完成此操作後,您將看到可用於創建表單的各種模板。

向下滾動以查找BMI計算器,或在搜索欄中鍵入“ BMI”以找到它。

加載BMI計算器表單模板

現在,您已經在屏幕上看到了BMI Calculator模板,將鼠標光標移到它上面,然後單擊Create Form按鈕。

接下來,將要求您提供表單名稱和說明。 您可以使用默認名稱,並根據需要跳過描述。 準備就緒後,點擊“創建”按鈕。

輸入您的BMI計算器表格的名稱

完成此操作後,“強大表單”將自動為您創建BMI計算器表單。

您將直接進入表單的“構建”視圖。 如您所見,您已經在屏幕的右側獲得了表單本身。 在左側,您可以在其中添加或編輯表單字段的區域。

強大表單中的默認構建視圖

BMI計算器將在適當的默認設置下完美運行。 如果要添加任何其他字段,則可以通過單擊左側的字段來添加,它將自動添加到表單中。

如果要使表單保持簡單,則可能要刪除“ BMI Prime”框。 表單不需要工作。

要刪除該字段,只需單擊它,然後單擊垃圾箱圖標。

從表單中刪除BMI Prime字段

如果您希望用戶提交表單以查看其BMI結果,則還可以刪除“體重不足”,“健康體重”,“超重”和“肥胖”字段。

調整您的BMI計算器的設置

對BMI計算器感到滿意之後,請點擊屏幕頂部的“設置”標籤。

BMI計算器表單的“設置”選項卡

您可能要在這裡進行更改。 例如,您可以更改用戶提交表單後顯示給用戶的默認消息。 如果滾動到頁面底部,則可以在“提交”框中看到列出的內容。

強大的表單消息

當有人使用計算器時,其結果將顯示如下:

默認的BMI計算器結果

您可能需要調整措詞以適合您的聽眾。

此處的另一種選擇是添加指向進一步指導的鏈接。 例如,您可能有提供飲食或運動技巧的內容。

您可以在框中輸入HTML代碼。 要更改框的字體大小和背景色,可以使用“強大表單”的“樣式”功能。 我們將在本教程的後面部分進行介紹。

這是包含相關鏈接的結果消息的示例:

強大形式的自定義結果消息

小費: 您可以在其中編輯結果消息的框很小。 您可以從框中復制消息,然後將其粘貼到代碼編輯器中,以使其易於編輯。 完成後,將其複制回消息框中。

更改您的BMI計算器的按鈕文本

如果要更改表單的按鈕文本,可以在以下位置進行 設置»樣式和按鈕

只需輸入您要使用的文本即可。 我們將使用“顯示我的BMI範圍”而不是“查看我的範圍!” 用於按鈕文本。

對於首次提交表單後出現的按鈕上的文本,我們還更改了“更新結果”而不是“更新”。

更改強大表單中的“提交”和“更新”按鈕消息

更改您的BMI計算器的樣式

默認情況下,BMI計算器看起來很普通。 文本也很小,像這樣:

BMI表單的默認樣式

您可以使用不同的顏色,字體大小等來更改表單的樣式。 為此,首先您需要轉到 強大»樣式 在您的WordPress儀表板中。

強大表格的樣式標籤

接下來,您可以單擊“ +新樣式”按鈕開始創建新樣式。 或者,如果要對所有表單使用相同的樣式,則可以編輯現有的默認樣式。

我們將為BMI計算器表單創建一種新樣式。

在強大的表單中添加新樣式

如果單擊“字段標籤”選項卡旁邊的下拉菜單,則可以更改表單字段上標籤的大小。 我們會將其從原來的14px提高到18px。

更改字段標籤的大小

在屏幕的右側,您將看到表單樣式的預覽。 進行更改時,它會自動更新。

您可能還想在“字段設置”下增加字段本身的字體大小和字段高度。 您可以在“複選框和單選字段”標籤下更改單選按鈕的大小(英制還是公制)。

您還可以在“按鈕”選項卡下增加按鈕字體大小。 您也可以為按鈕選擇顏色。

如果要放大結果消息或更改背景顏色,可以在“表單消息”選項卡下執行此操作。

完成所有所需的更改後,請單擊右上角的“更新”將更改保存到樣式。

更新您創建的新樣式

然後,您可以將樣式應用於表單。 首先去 強大»表格 然後找到您的表格。 單擊表單標題進行編輯,或將光標移到表單上方,然後單擊其下方的“編輯”鏈接。

編輯您創建的BMI計算器表單

然後,您可以轉到“設置”標籤並單擊 樣式和按鈕 設置表單的樣式。

在這裡,您可以使用樣式模板下拉菜單選擇新的樣式模板。 只需單擊下拉列表,然後單擊要使用的樣式。

從下拉列表中選擇BMI計算器的樣式

現在,您的表單將根據模板進行樣式設置。 這是我們的樣子:

應用了新樣式的BMI計算器表單

將BMI計算器表單添加到您的網站

準備就緒後,您可以將表單發佈到您的網站上。 首先,您需要單擊右上角的“更新”按鈕以保存更改:

更新您的BMI計算器

接下來,您需要編輯現有的帖子或頁面或創建一個新的帖子或頁面。

完成此操作後,可以單擊(+)按鈕添加一個新塊。 轉到“小部件”部分,然後單擊“強大表單”塊。 或者,如果願意,可以使用搜索欄找到它。

選擇強大的表單塊以添加到您的帖子或頁面

現在,您只需選擇您的BMI表單。 點擊“選擇表單”下拉菜單,然後選擇您的BMI計算器,如下所示:

從“強大的表單”下拉列表中選擇正確的表單

您可能需要預覽頁面,以查看成品BMI計算器在網站上的實時顯示。 這是我們的:

在網站上查看BMI計算器

如果您要更改或調整任何內容,只需回到WordPress儀表板中的表單即可。 你可以在下面找到它 強大»表格

每當您對錶單進行更改時,它將自動在您網站上的所有位置進行更新。 您無需更改簡碼或進行任何其他操作。

我們希望本教程可以幫助您學習如何使用強大的表單在WordPress中添加BMI計算器。 您可能還喜歡我們在最有用的WordPress小部件上的文章,並且必須具有用於商務網站的WordPress插件。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。