WordPress に BMI 計算ツールを追加する方法 (ステップバイステップ)


BMI 計算ツールを WordPress サイトに追加したいですか?

健康とフィットネス関連のコンテンツ、製品、サービスを提供している場合、BMI 計算ツールは視聴者にとって非常に役立つ可能性があります。これにより、訪問者のエクスペリエンスが向上し、サイトに長く留まることができます。

この記事では、コーディングや計算を必要とせずに、WordPress に BMI 計算ツールを簡単に追加する方法を説明します。

BMI を計算する方法 (WordPress に BMI 計算ツールを追加する理由)?

BMIはBody Mass Indexの略です。これは、次の計算を使用して、身長と体重に基づく人の体脂肪の大まかな測定値です。

BMI=kg/m22

kg は人の体重 (キログラム)、m2 は身長 (平方メートル) です。

BMI の測定値は、訪問者、患者、クライアントが自分の体重が低体重か、過体重か、あるいは身長に比べて適正体重かを判断するのに役立ちます。ただし、訪問者に自分で計算を求めるのは、良いユーザー エクスペリエンスではありません。

そこで登場するのがBMI計算機です。

健康やフィットネスのブログを始めている場合、BMI 計算ツールは、訪問者が健康への取り組みの次のステップを計画するのに役立ちます。たとえば、BMI を減らすことに決めた人が、フィットネス トラッカーにサインアップする可能性があります。

BMI 計算ツールを使用すると、サイトでより多くの時間を費やすように人々を促すこともできます。これにより、ページビューが増加し、直帰率が低下する可能性があります。

ユーザーがあなたのサイトで過ごす時間が長いほど、コンバージョンに至る可能性が高くなります。たとえば、CrossFit ジムのトライアルを予約したり、オンライン ストアからエクササイズ器具を購入したりするかもしれません。

リピートトラフィックを促進する良い方法でもあります。誰かが自分の BMI を変更しようとしている場合、その人は自分の BMI が健康な範囲内にあるかどうかを確認するためにあなたのサイトに何度も戻ってきます。

それを念頭に置いて、WordPress に BMI 計算ツールを簡単に追加する方法を見てみましょう。

WordPress で BMI 計算ツールを作成する

BMI 計算ツールを作成する最も簡単な方法は、Formidable Forms を使用することです。この人気のある WordPress コンタクト フォーム プラグインには、数回クリックするだけでサイトに追加できる BMI 計算テンプレートが含まれています。

その後、訪問者は自分の体重と身長を入力するだけで、BMI 計算ツールが自動的に計算を実行します。次に、BMI を表示し、低体重か、健康な体重か、過体重か肥満かを示します。

訪問者がさらに詳しい情報を必要とする場合は、[範囲を参照] をクリックします。

計算機には、さまざまな重量カテゴリすべての範囲が表示されます。訪問者の BMI が健康的ではない場合、これは健康を改善するためにどのような変更を加えるべきかを決定するのに役立ちます。

強力なフォームをセットアップする方法

最初に行う必要があるのは、Formidable Forms Lite プラグインと Formidable Forms プレミアム プラグインの両方をインストールして有効にすることです。無料のプラグインには機能が制限されていますが、Formidable Forms Pro はこれをより高度な機能の基礎として使用します。

詳細については、WordPress プラグインのインストール方法に関する手順をご覧ください。アクティブ化すると、ライセンス キーを要求するメッセージが表示されます。

もう 1 つのオプションは、WordPress ダッシュボードのFormidable » グローバル設定に移動することです。

ここで、「アカウントを接続」をクリックし、指示に従って WordPress を Formidable Forms アカウントに接続します。

もう 1 つのオプションは、[クリックしてライセンス キーを手動で入力する] を選択し、フィールドにライセンス キーを入力することです。

この情報は、Formidable Forms Web サイトでアカウントにログインすると表示されます。

キーを入力したら、「ライセンスを保存」をクリックします。

WordPress で BMI 計算ツールを作成する

Formidable Forms のセットアップが完了したら、WordPress Web サイト用の BMI 計算ツールを作成する準備が整います。まず、Formidable » フォームに移動し、[新規追加] をクリックします。

これにより、使用できるすべての既成テンプレートを含むポップアップが開きます。

「計算機」セクションをクリックすると、BMI 計算機のテンプレートが表示されます。

サイト上でフォームがどのように表示されるかをプレビューするには、「BMI 計算ツール」テンプレートの上にマウスを置くだけです。

次に、目のように見える小さなボタンをクリックします。

Formidable Forms には、操作できる BMI 計算ツールのプレビューが表示されます。

このテンプレートを使用して計算機を作成するには、[このテンプレートを使用する] ボタンをクリックするだけです。

次に、「フォーム名」フィールドにタイトルを入力します。これは単なる参考用なので、WordPress ダッシュボードで電卓を識別するのに役立つものであれば何でも使用できます。

次に、「作成」ボタンをクリックします。

これにより、ドラッグ アンド ドロップ エディターで BMI 計算テンプレートが開きます。

フォームは画面の右側にあります。左側には、フォームのフィールドを追加または編集できる領域があります。

BMI 計算ツールはデフォルト設定で完全に機能します。ただし、エディターでフィールドを選択し、左側のメニューの設定を使用することで、フィールドを変更できます。

たとえば、フィールドの上に表示されるテキストを変更するには、そのフィールドをクリックして選択するだけです。次に、「フィールド ラベル」にテキストを入力します。

BMI 計算ツールにさらにフィールドを追加したい場合は、左側のメニューで [フィールドの追加] タブを選択します。

その後、任意のフィールドをフォーム エディターにドラッグ アンド ドロップできます。

フィールドを削除するには、そのフィールドの上にマウスを置き、三点アイコンをクリックするだけです。

その後、「削除」をクリックしてください。

BMI 計算ツールの設定を調整する

BMI 計算ツールの表示に満足したら、[設定] タブをクリックして設定を確認できます。

まず、「全般」タブでフォームのタイトルと説明を変更できます。

左側のメニューで [アクションと通知] を選択すると、訪問者がフォームを送信したときの動作を変更することもできます。

「確認」セクションをクリックして展開すると、Formidable Forms がデフォルトで訪問者に表示するメッセージが表示されます。

デフォルトのメッセージはプレーンテキストとコードが混在しています。たとえば、デフォルトのメッセージの最初の部分は次のとおりです。

あなたのBMI結果は次のとおりです:
[if 52less_than=”18.5″]低体重[/if 52]

これは、BMI が 18.5 未満の訪問者には、「BMI 結果は低体重です」というメッセージが表示されることを意味します。

文言を変更したり、テキストを追加したり、役立つリソースへのリンクを追加したりすることもできます。たとえば、その人の BMI が低いか高いかに応じて、サイトの低カロリー レシピや筋肉増強エクササイズへのリンクを含めることができます。

「メッセージ」ボックスは HTML コードをサポートしているため、リンクを簡単に追加したり、太字や斜体などの書式設定を使用したりできます。

変更を加える場合は、角かっこ内のコードを変更しないように注意してください。変更すると、電卓が正しい結果を表示しなくなる可能性があります。

ヒント: [メッセージ] ボックスは非常に小さいため、テキストをコード エディタに貼り付ける方が簡単かもしれません。変更を加え、完了したらテキストを [メッセージ] ボックスに貼り付けることができます。

BMI 計算ツールのボタンのテキストを変更する

デフォルトでは、電卓には「範囲を表示」ボタンがあります。

左側のメニューで「ボタン」を選択すると、このボタンに表示されるテキストとボタンの位置を変更できます。

「送信ボタンのテキスト」フィールドに使用するテキストを入力するだけです。たとえば、次の画像では、ボタンのラベルとして「Show My BMI Range」を使用しています。

「送信ボタンの位置」ドロップダウン メニューを使用して、ページ上でボタンが表示される場所を変更することもできます。

BMI 計算フォームを Web サイトに追加する

フォームの設定に問題がなければ、それを WordPress ブログまたは Web サイトに追加する準備が整います。

まず、右上の「更新」ボタンをクリックして変更を保存します。

次に、電卓を追加する投稿またはページを開くか、新しい投稿を作成する必要があります。

その後、「+」ボタンをクリックして新しいブロックを追加します。ポップアップで「Formidable Forms」と入力し、表示された右側のブロックをクリックします。

その後、「フォームの選択」ドロップダウンを開き、前に作成した BMI 計算ツールを選択します。 WordPress は計算機をページに追加します。

ページをプレビューして、Web サイト上で BMI 計算ツールがどのように表示されるかを確認することをお勧めします。問題がなければ、ページを更新または公開してください。

サイトにアクセスすると、BMI 計算ツールがライブで表示されます。

ボーナス: BMI 計算ツールのスタイルを変更する

デフォルトの BMI テンプレートの外観に満足できない場合は、フォームの新しいスタイルを作成できます。

WordPress ダッシュボードで、Formidable » フォームに移動します。先ほど作成した BMI 計算ツールの上にマウスを置き、表示された「編集」リンクをクリックします。

それが完了したら、「スタイル」タブをクリックします。

次に、「新しいスタイル」を選択します。

表示されるポップアップで、「スタイル名」フィールドにタイトルを入力します。あくまで参考ですので、タイトルはお好みで大丈夫です。

その後、「新しいスタイルを作成」をクリックします。

さまざまな設定を試すことができます。ただし、最初に、フォーム ラベルのサイズ、フォント、または色を変更することが必要になる場合があります。

これを行うには、[フィールド ラベル] タブをクリックし、このセクションのさまざまな設定を使用します。たとえば、次の画像ではテキスト サイズを 18 ピクセルに変更しています。

画面の右側に、フォームのスタイルのプレビューが表示されます。変更を加えると、このプレビューは自動的に更新されます。

「フィールド設定」オプションを選択して、フィールド自体のフォント サイズと高さを変更することもできます。

フォームのラジオ ボタンのサイズを変更するには、[チェック ボックスとラジオ フィールド] セクションをクリックして展開します。

最後に、ボタンのテキストを小さくまたは大きくしたい場合は、「ボタン」セクションをクリックします。ここでボタンの色を変更して、WordPress テーマの他の部分から目立つようにすることもできます。

スタイルに満足したら、「更新」ボタンをクリックするだけです。

新しいスタイルを BMI 計算ツールに適用するには、「スタイル」タブを選択します。次に、左側のメニューでカスタム スタイルを見つけます。

スタイルの点線のアイコンをクリックできるようになりました。

表示されるドロップダウンで「適用」をクリックします。

最後に、「更新」ボタンをクリックして変更を保存します。ここで、サイト上の計算機にアクセスすると、新しいフォーム スタイルが動作しているのがわかります。

このチュートリアルが、WordPress に BMI 計算ツールを追加する方法を学ぶのに役立つことを願っています。お問い合わせフォームの作成方法と、ビジネス サイトに必須の WordPress プラグインに関するガイドもご覧ください。

この記事が気に入っていただけましたら、WordPress ビデオ チュートリアルの YouTube チャンネルに登録してください。 Twitter や Facebook でもご覧いただけます。