【WordPress】「Salon Booking」をデフォルトの設定で予約システムを設置してみる

ここではWordPressサイトで美容室・サロン向けの予約システムを構築するプラグイン「Salon Booking」をデフォルトの設定で予約システムを設置して、どのような予約システムかを確認してみます。

WordPres公式サイトはこちら https://ja.wordpress.org/plugins/salon-booking/

固定ページに予約システムを組み込む

管理画面の [全体の設定] → [店情報] を選択します。店情報の一覧にサンプルのお店がありますので [選択] ボタンをクリックします。
店情報の登録画面の上部にショートコードが表示されていますのでコピーします。
予約画面にする固定ページを開いて、店情報でコピーしたショートコードを貼り付けて、固定ページを保存します。
ブラウザで予約画面を確認します。

デフォルトでは上部に会員用のログイン画面が表示されていますが、ログインなしでも予約は可能です。
ログインを必要としなければ環境設定で「1.顧客のログイン許可」のチェックを外します。

予約画面

予約画面には4種類あり、タブを選択することにより「スタッフ」「日」「週」「月」に切り替えることができます。
また、環境設定の「16.表示するタブ」で個別に表示・非表示が設定できます。

予約画面－スタッフ

デフォルトではスタッフが初期表示されますが、環境設定の「14.予約画面の初期表示」で初期表示する画面を選択できます。
デフォルトではスタッフは登録されていませんが、スタッフを登録するとスタッフが表示されます。
予約を入力する場合は、マウスをドラッグして時間範囲を選択します。

予約画面－日

デフォルトでは「開始時刻：10:00」「終了時刻：19:00」に設定されていますので、10:00～18:00までの範囲が表示されます。
時間の範囲を変更したい場合は、店情報の「開始時刻」と「終了時刻」を変更します。
予約を入力する場合は、マウスをドラッグして時間範囲を選択します。

予約画面－週

デフォルトでは週の開始が「月曜日」になっていますが、環境設定の「19.週の開始曜日」で「日曜日」にすることができます。
また、デフォルトの店情報では火曜日が定休日になっていますので、火曜日に色が付いています。
予約を入力する場合は、マウスをドラッグして時間範囲を選択します。

予約画面－月

過去日と翌月日は灰色、当日は薄緑色で表示されます。
予約する場合は日付をダブルクリックします。

翌月を表示してみます。予約できる期間はデフォルトでは30日間です。環境設定の「12.X日後」の値を変更することで予約できる期間を変更することができます。

予約入力画面から予約を入力する

それでは予約入力画面から予約を入力してみます。デフォルトでは環境設定の「18.予約確定方法」が「利用者がメールによる確定」となっていますので「仮予約」になります。

予約時間外を選択した場合

予約できない時間帯を選択した場合は以下のメッセージが表示されます。

これは環境設定の「15.予約締切時間」が、デフォルトで「30分」に設定されているため、現在時刻から30分以上の時間帯を選択する必要があります。
「15.予約締切時間」は分単位、時間単位、日単位で設定できます。

予約を入力する

予約できる時間帯を選択した場合、以下の予約画面が表示されます。

項目	説明
日付	予約する日付が表示されます。
ステータス	「仮予約」または「予約完了」が表示されます。
名前	名前を入力します。名前は必須項目に設定されています。名前を入力すると、項目名の下の「姓と名に空白をお願いします」という文言が表示されます。この文言は予約画面設定のヒントに設定されています。
電話	電話番号を入力します。項目名の下の「15文字以内」という文言は予約画面設定のヒントに設定されています。
メール	メールアドレスを入力します。項目名の下の「メールの形式は XXX@XXX.XXX」という文言は予約画面設定のヒントに設定されています。
予約時間	選択した予約時間が表示されます。開始時刻はプルダウンリストから変更が可能です。終了時刻の表示はメニューを選択すると、メニュー情報に登録されている所要時間から自動設定されます。項目名の下の「選択してください」という文言は予約画面設定のヒントに設定されています。
担当	スタッフを選択します。デフォルトではスタッフが登録されていませんので、空欄になります。項目名の下の「選択してください」という文言は予約画面設定のヒントに設定されています。
メニュー	メニューを選択します。スタッフが登録されていれば、スタッフで選択可能なメニューが表示されます。項目名の下の「選択してください」という文言は予約画面設定のヒントに設定されています。
備考	備考を入力します。項目名の下の「300文字以内」という文言は予約画面設定のヒントに設定されています。
値段	選択したメニューの合計金額が表示されます。

予約を入力してみます。必須項目を入力したら [予約] ボタンをクリックします。
予約が正常に登録されると以下のメッセージが表示されます。

これは環境設定の「18.予約確定方法」が、デフォルトで「利用者がメールによる確定」に設定されているため、利用者が送られた予約確認メールの該当リンクを元に予約を確定する必要があります。