Booking Packageのカレンダー設定
Booking Packageの一般設定が終わったら、予約カレンダーの設定を行います。
WordPressのサイドメニューから「Booking Package」→「カレンダー設定」を選択します。

カレンダーのタイプは2種類あり、ひとつは1日で終わるタイプのもの、もうひとつはホテルの予約のように複数日に渡るタイプのものです。
カレンダー設定には、デフォルトでこの二つのタイプのカレンダーがあらかじめ用意されています。
今回は新規にカレンダーを作成しますので、画面の右上にある「新規カレンダーを追加」を押下します。

タイプを選択する画面が出てくるので、今回は「24時間以内に完了する予約」を選択します。


カレンダーの主な設定項目は、以下の通りです。
名前 | カレンダーの名前を設定する |
受取人メールアドレス | 一般設定で指定した場合は空白にした方が良い |
差出人メールアドレス | 一般設定で指定した場合は空白にした方が良い |
差出人名 | 一般設定で指定した場合は空白にした方が良い |
タイムゾーン | デフォルトで「東京」 |
週の始まり | 最初の曜日(一般的には日曜日にする) |
サービス機能 | 予約の内容を分けたい場合は有効にする |
サービス名 | サービスの名前を指定 |
容量の残りを記号または文字列としてカレンダー内に表示 | 予約状況を記号または文字列にしたい場合は有効にする |
容量の残りを記号または文字列でなく数値としてカレンダー内に表示 | 予約状況を数字にしたい場合は有効にする |
容量の残りのしきい値 | しきい値を%(パーセント)で指定する |
容量の残りが"しきい値"以上の日の記号または文字列 | 容量の残りがしきい値以上の時にカレンダーに表示する記号または文字列 |
容量の残りが"しきい値"以下の日の記号または文字列 | 容量の残りがしきい値以下の時にカレンダー表示する記号または文字列 |
容量の残りが0%の日の記号または文字列 | 容量が0の時にカレンダーに表示する記号または文字列 |
予約スケジュールの公開日数 | 予約できる日数 |
今日から利用できない日数 | 当日を基準にして予約ができない日数。0にすると当日も予約可能 |
設定が終わったら「保存」を押下します。
一覧画面に戻りますので、今回登録したカレンダーが作成されたことを確認します。

カレンダーのスケジュールを登録する
カレンダーを作ったらスケジュールを登録していきます。
先ほど作ったカレンダーを一覧から選択すると、以下のようなスケジュール画面が表示されます。
主に「スケジュール設定」「入力フォーム」「通知」タブにある項目を設定していきます。

スケジュール設定
まずは、スケジュール設定タブの「週間スケジュールテンプレート」を押下します。
ここでは、曜日ごとのスケジュールの設定ができます。
時刻、間隔、締め切り、定員の各項目を設定していきます。
時刻は予約の開始時刻、間隔はその予定のコマの時間、締め切りは何分前まで予約できるかの時間、定員はその予約の最大人数です。
少し分かりづらいかもしれませんが、例えば時刻を From 9:00 To 15:00 、間隔を60分にすると、9:00~10:00、10:00~11:00 … 15:00~16:00のように予定が作成されます。
メモ
最初に日曜日のスケジュールの設定が表示されますが、日曜日にスケジュールを設定しない場合は、右上の「✕」を押下して日曜日の設定を終了してください。

項目の入力が完了したら「適用」を押下します。
すると、以下のようにスケジュールが作成されます。

不要な時間帯の予約がある場合は、削除の項目にチェックを入れて「保存」を押下します。

削除した時間帯の予約が削除されました。
上図の例では12:00の時間帯にチェックを入れたので、12:00の時間帯の予約が削除されています。

同様に、他の曜日にも予約スケジュールを作っていきます。
全ての曜日の予約スケジュールの設定が完了したら右上の「✕」を押下して、週間スケジュールテンプレートを終了します。
予約カレンダーが表示され、週間スケジュールで登録した曜日のセルが白になっています。
週間スケジュールで設定していない曜日と、過去の日にちは薄いグレーになります。
※例は2021/9/16に作成しています。

入力フォーム
入力フォームは、予約をする時の入力する項目です。
「入力フォーム」タブを選択すると、以下の画面が表示されます。
デフォルトの入力項目は、「First name」「Last name」「メール」「電話」「郵便番号」「住所」「利用規約」です。
「郵便番号」が赤字になっていますが、これは任意項目です。
デフォルトでは名字(First name)と名前(Last name)に分かれていますが、今回はこれを氏名としてひとつにまとめます。
手順は「First name」を「氏名」に変更して、「Last name」を削除します。

まず、「First name」の「編集」を押下して、編集画面を開きます。
名前の項目を「First name」から「氏名」に変更して「保存」を押下します

「First name」が「氏名」に変わりました。

次に、「Last name」が不要なので、「Last name」の「削除」を押下します。

削除の確認のポップアップ画面が表示されますので、「OK」を押下します。

「Last name」が削除されました。

通知
通知は管理者と予約をした顧客にメールを送信する機能です。
「通知」タブを選択すると、以下の画面が表示されます。

顧客がWEB上から予約した後、それを管理者が承認して初めて予約が確定します。
そのため、顧客の予約時と管理者の承認時に、顧客と管理者にメールを送信するようにします。(予約と同時に自動で承認する機能もあります)
ここでは、「新規」と「承認済み」のメールのテンプレートを作成します。
デフォルトのメールのテンプレートは、以下のようになります。
テンプレートのままだと、迷惑メールだと思われてしまうので、各自で整形してください。

ショートコードを使うことで、予約者の名前や予約した日時などを埋め込むことができます。
id | ID |
bookingDateAndTime | 予約日時 |
bookingDate | 予約日 |
bookingTime | 予約時刻 |
bookingTitle | 予約タイトル |
service | サービス |
guests | ゲスト |
paymentMethod | 支払い方法 |
submissionDate | 送信日時 |
surcharges | 追加料金 |
taxes | 税金 |
totalPaymentAmount | 支払い総額 |
couponCode | クーポンコード |
couponName | クーポン名 |
couponDiscount | 割引 |
site_name | サイト名 |
cancellationUri | キャンセルURL |
receivedUri | 受信URL |
customerDetails | 顧客の詳細 |
firstname | 氏名 |
メール | |
phone | 電話 |
address | 住所 |
terms | 利用規約 |
詳細なBooking Packageの使い方は、以下の公式サイトを参照してください。