AI要約
訪問者に、ウェブサイト上で直接2つの日付間の日数を計算させたいですか？
たとえば、機器をレンタルしていて、顧客が予約する前にレンタル期間を確認できるようにしたい場合があります。たとえば、イベントサイトを運営していて、人々が自分で確認できるカウントダウンを提供したい場合があります。予約ページ、プロジェクトの締め切りツール、さらには妊娠予定日の追跡ツールについても、このリクエストを正確に目にしました。
良いニュースは、1行のコードを書く必要がないことです。日付間の日数計算機は、既製のテンプレートを使用して数分で設定でき、プロセス全体を説明します。
ウェブサイトに日付間の日数計算機を追加する理由
日付間の日数計算機は、訪問者に迅速な回答を提供し、より便利でインタラクティブなサイトを提供します。ここでは、人々がそれを使用する最も一般的な方法のいくつかを以下に示します。
- 締め切り計算機：割り当てとタスクを管理する専門家が、プロジェクトに残された稼働日数を把握するのに役立ちます。
- イベントカウントダウン：今後のイベントへの期待を高めます。結婚式のプランナー、イベント主催者、参加者に便利です。
- ビザ計算機：滞在期間と更新の計画に役立ちます。旅行代理店は、クライアント向けの迅速な計画ツールとして提供できます。
- 妊娠計算機：出産予定日までの明確なカウントダウンを提供し、シャワーなどのベビー関連イベントの計画を立てやすくします。
- 出荷日計算機：配送スケジュールを表示することで、顧客サービスを向上させます。物流と在庫を管理するビジネスにとって実用的なツールです。
- 旅行、予約、またはレンタル料金計算ツール：顧客が旅行やレンタルの2つの日付間の日数を数え、その期間の費用を確認できるようにします。
おそらく、あなたはこの記事に独自のユースケースを念頭に置いてたどり着いたことでしょう。それでは、早速構築に取り掛かりましょう。
WordPressで日付間の日数を計算する電卓を作成する方法
日付間の日数を計算するツールを構築する最も速い方法は、WPFormsとその日付/時刻ピッカーフィールドを使用することです。この計算ツールにぴったりの事前構築済みテンプレートがあるため、作業のほとんどはすでに完了しています。
この記事の内容
ステップ1：WPForms Proプラグインをインストールする
WPFormsはWordPressで最も初心者向けのフォームビルダーであり、計算ツールフォームの私の定番です。レンタル料金から日付計算まで、あらゆるもののためのすぐに使える計算ツールテンプレートが、合計2,100以上のテンプレートライブラリの一部として含まれています。
このプロジェクトでWPFormsを最も気に入っている点は、計算ツールのロジックがフォームビルダー自体に組み込まれていることです。テンプレートを選択すると、日付フィールドと数式が1つの画面で既に連携されています。
このチュートリアルでは、WPForms Proが必要になります。Proライセンスは、日付計算を可能にするCalculationsアドオンと、高度な統合、条件付きロジック、フォームレポートなどのプレミアム機能のロックを解除します。
開始するには、Proライセンスを購入してください。次に、ウェブサイトにWPFormsプラグインをインストールします。ヘルプが必要な場合は、WordPressにプラグインを追加する方法に関するこれらの手順に従ってください。
ステップ2：計算アドオンを有効化する
通常のフォームを動作する計算ツールに変換するのはCalculationsアドオンなので、これをオンにしましょう。WordPressダッシュボードから、WPForms » Addonsに移動します。
Addonsを検索フィールドに、「Calculations」と入力します。次に、Addonをインストールボタンをクリックし、次にアクティブ化ボタンをクリックします。
アドオンに必要なセットアップは以上です。これで、訪問者が選択した任意の日付間の日数をフォームビルダーが計算できるようになりました。
ステップ3：日付間の日数計算ツールテンプレートを選択する
さて、楽しい部分、つまり計算ツール自体の構築に移りましょう。ダッシュボードから、WPForms » Add Newに移動します。
次の画面で、フォームに名前を付けます。ここでは、簡単にするために「Days Between Dates Calculator」と名付けます。
次に、下にスクロールしてCalculatorテンプレートカテゴリに移動し、Use TemplateボタンをクリックしてDays Between Dates Calculator Templateを選択します。
これにより、フォームビルダーのFieldsエリアに入ります。左側のパネルには、テンプレートをさらにカスタマイズするために追加できるすべてのフィールドが含まれています。
右側には、フォームのライブプレビューが表示されます。テンプレートから開始したため、日付フィールドと計算結果は既に配置されています。
フィールドをドラッグしたり、ラベルの名前を変更したり、新しいフィールドを追加したりして、フォームがサイトに合うように自由に調整してください。ビルダーは、進捗に合わせてプレビューを更新します。
ステップ4：日付間の日数計算ツールをカスタマイズする
WPFormsの2,100以上のWordPressフォームテンプレートのいずれかを使用しているため、フォームはそのまま使用でき、すぐにページに埋め込むことができます。
とはいえ、このテンプレートは見た目よりも柔軟性があります。3つの異なるセクションがあり、それぞれが異なるユースケースに適しています。
- 簡単な日数差：最もシンプルなオプション。訪問者が開始日と終了日を選択すると、フォームは2つの日付間の日数を表示します。イベントプランニングサイトに最適です。
- レンタカー料金計算機：顧客がピックアップ日とドロップオフ日を入力すると、フォームはレンタル期間とその料金を計算します。あらゆるレンタルビジネスに実用的な設定です。
- 日数カウントダウン：訪問者は、セール終了日や旅行開始日など、特定の日付までの残り日数を表示できます。eコマースサイトや旅行サイトでは、この機能が非常に役立ちます。
フォームをこれらのシナリオのいずれかに絞り込むには、不要なフィールドまたはセクションをクリックし、削除ボタンで削除します。
セクションをトリミングするだけでなく、公開前に確認しておきたいカスタマイズがいくつかあります。
日付の書式を変更する
日付サブフィールドには、日付を表示するための組み込み書式オプションがあります。これらには以下が含まれます：
- 月/日/年：日付を月、日、年の順にフォーマットします。
- 日/月/年：日付を日、月、年の順にフォーマットします。
- 月、日、年：日と年とともに、月のフルネームを記述します。
あなたのオーディエンスが期待するフォーマットを選択し、日付1と日付2の両方に適用して、フォームの一貫性を保ちます。
これを行うには、日付フィールドをクリックし、詳細設定タブを開き、書式オプションを展開します。
日付ドロップダウンを使用する
訪問者が日付を選択する方法も変更できます。デフォルトはカレンダー形式の日付ピッカーですが、レイアウトによってはドロップダウンの方が適している場合があります。
フォームプレビューで日付フィールドを選択し、詳細設定タブに移動して、タイプをクリックし、日付ドロップダウンを選択します。
計算式をカスタマイズする
日付の計算自体は、計算フィールドにあります。フォームプレビューで合計または結果フィールドをクリックすると、計算設定の下に数式が見つかり、シナリオに合わせて調整できます。
これにより、テンプレートはこれら3つの異なる構成をサポートします。レンタルのバージョンでは、日数を1日の料金に乗算し、カウントダウンバージョンでは今日から目標日までの距離を測定します。 Calculationsアドオンを使用した数式の構築に関するドキュメントでは、利用可能な関数を説明しており、コピーできる計算式例のライブラリがあります。
数式が苦手な場合は、代わりにWPForms AIを使用して数式を生成できます。計算を通常の英語で説明すると、数式が生成されます。
送信ボタンを削除する
計算機を真のインスタントツールのように感じさせたいですか？送信ステップなしでリアルタイム計算用に設定できます。
WordPressダッシュボードからWPForms » Toolsに移動します。次に、Code Snippetsタブを開きます。
Search Snippetsフィールドに名前を入力して、送信ボタンを非表示にするスニペットを検索します。次に、Install Snippetボタンをクリックします。
その後、スニペットをアクティブにするために、フォームビルダーのSubmit Button CSS Classフィールドにwpf-calc-form CSSを貼り付けます。
日付計算機の日数が希望どおりになったら、Saveボタンを押します。
ステップ5：日付間の日数計算ツールを公開する
計算機が準備できたので、ライブにしましょう。 ブロックエディターを使用してさらにスタイルを設定し、WordPressサイトのどこにでも公開できます。
新しいまたは既存のページまたは投稿を開きます。Add Blockボタンをクリックし、WPFormsアイコンを選択します。
次に、WPFormsウィジェットのドロップダウンメニューから日付計算機の日数を選択します。
フォームの外観に満足したら、UpdateまたはPublishボタンを押してライブにします。
ページを共有する前に、フロントエンドで埋め込みフォームをテストしてください。いくつかの日付を選択し、計算を確認し、結果が期待どおりに更新されることを確認します。
日付間の日数計算ツールに関するFAQ
ウェブサイトに日付計算機の日数を追加することは、読者の間で人気のあるトピックです。最もよく聞かれる質問への回答を以下に示します。
2つの日付の間の日数を計算するにはどうすればよいですか？
後の日付から前の日付を引きます。結果はそれらの間の完全な日数であり、6月1日から6月5日までで4日です。開始日と終了日の両方を含めたい場合は、結果に1を加えます。ウェブサイトでは、訪問者が2つの日付を選択すると、計算フォームが自動的にこれを行います。
コーディングなしで、日付間の日数計算機をウェブサイトに追加できますか？
はい。WPForms ProとCalculationsアドオンを使用すると、「日付間の日数計算機」テンプレートから開始でき、数式はすでに設定されています。ビルド全体がドラッグアンドドロップであり、唯一のコードに近いステップはオプションで、送信ボタンを非表示にしたい場合にCSSクラスを貼り付けることです。
計算機は、日付までの日数をカウントダウンできますか？
できます。テンプレートには、今日から訪問者が選択した日付までの日数を測定するカウントダウンセクションが含まれています。セール期限、イベントのカウントダウン、旅行の計画に役立ちます。
日付間の日数を計算するためにExcelが必要ですか？
いいえ。Excelはスプレッドシートで日付セルを減算することでこれを実行できます。これは自分の記録には問題ありません。しかし、訪問者にウェブサイトで計算を実行させたい場合は、ダウンロードしたり開いたりする必要がないため、埋め込み計算機フォームの方が適したツールです。
次に、WPFormsで合計価格計算を変更する方法を学びます
ユーザーが選択した製品に基づいてWPFormsの計算を使用して合計注文金額を変更したいと思いますか？合計価格を変更する製品オプションを追加する方法を学びます。
そして、このプロジェクトで計算機フォームが他に何ができるか興味を持ったなら、同じアドオンを使用して、住宅ローンの見積もりからBMIツールまで、WordPressであらゆる種類の計算機を作成できます。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookとTwitterでフォローしてください。
