バージョン 1.8.16

ここではWordPressサイトで美容室・サロン向けの予約システムを構築するプラグイン「Salon Booking」で予約システムを構築する方法について紹介します。

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

環境設定

管理画面の [全体の設定] → [環境設定] を選択します。

環境設定の項目は以下の通りです。デフォルトから変更した項目は設定値の欄に示します。

項目説明デフォルト設定値
1.顧客のログイン許可ログイン可能にする場合にチェックします。オンオフ
2.運用ログ設定DBへの更新ログをとる場合にチェックします。オン
3.自動削除予約を自動で削除する場合にチェックします。オン
4.予約データを自動で削除する期間予約データを自動で削除する期間を月単位に設定します。6
5.メッセージ詳細出力エラーなどメッセージの詳細を出力します。オフ
6.スタッフの出退勤と予約可能時間帯出勤時間のみ予約可能にするかを選択します。
・休日を入力不可・・・「出退勤」で休みを登録した時間帯は該当スタッフの予約ができません。
・出勤時間以外は入力不可・・・「出退勤」で出勤を登録している時間帯のみ予約ができます。		休日を入力不可
7.姓と名の順番姓名の表記順を選択します。
・姓名
・名姓		姓名
8.「指名なし」を入力可能にする指名なしを可能にする場合にチェックします。オン
9.保守管理者をスタッフとして含むか保守管理者がスタッフと兼務の場合はチェックします。オン
10.スマートフォン用の画面を使用スマートフォン用対応を行う場合はチェックします。オン
11.過去X日表示データとして何日分取得するかを設定します。（多いと遅くなる）3
12.X日後表示データとして何日分取得するかを設定します。（多いと遅くなる）30
13.スタッフ表示数予約画面に何人スタッフを表示するかを設定します。（多いと 1 行が狭まる）5
14.予約画面の初期表示予約画面での初期表示を変更したい場合に選択します。
・スタッフ
・日
・週
・月		スタッフ
15.予約締切時間予約締切を予約開始時間からどのくらい前まで可能にするかを分、時間又は日で設定します。30分1日
16.表示するタブ予約画面での表示・非表示を変更したい場合に選択します。
・スタッフ
・日
・週
・月		全てオン
17.セッション ID を使用する「このリクエストは不正リクエストと判断されました。」のメッセージが表示された場合、チェックを外してみます。
他のプラグインとの競合により発生する場合があります。		オン
18.予約確定方法予約の確定方法を選択します。
・管理者による確定・・・ 利用者が予約した段階では、仮予約となります。「管理者」権限を持つ人が該当予約を更新することにより予約確定となります。
・即確定・・・利用者が予約した段階で確定となります。
・利用者がメールにより確定・・・利用者が予約した段階では、仮予約となります。利用者に送るメール内に予約確定画面へのリンクが示されています。利用者は該当リンクを元に予約確定画面を開いて予約を確定します。		利用者がメールにより確定管理者による確定
19.週の開始曜日週の開始曜日を選択します。
・月曜日
・日曜日		月曜日日曜日


店情報

管理画面の [全体の設定] → [店情報] を選択して [追加] ボタンをクリックします。

店情報の項目は以下の通りです。デフォルトから変更した項目は設定値の欄に示します。

項目説明デフォルト設定値
店名10文字以内で店名を入力します。任意の店名を入力します。
郵便番号XXX-XXXX形式で郵便番号を入力します。
住所200文字以内で住所を入力します。
電話15文字以内で電話番号を入力します。任意の電話番号を入力します。
メールXXX@XXX.XXX形式でメールアドレスを入力します。任意のメールアドレスを入力します。
重複可能数同一時間帯に店舗として重複可能な予約数を設定します。不明な時は0を設定します。0
開店時刻開店時刻を入力します。09:00
閉店時刻閉店時刻を入力します。18:00
入力時間単位（分）入力時間単位を選択します。
10、15、30、60、90、120、180、240、300、360		1030
定休日定休日を選択します。
日、月、火、水、木、金、土		月
定休日詳細定休日を選択すると表示される項目です。開店時刻と閉店時刻が初期表示されます。
備考300文字以内で備考を入力します。
スタッフによる予約終了時間の設定スタッフが予約終了時間を設定したい場合はチェックします。オフ


メニュー情報

管理画面の [全体の設定] → [メニュー情報] を選択して [追加] ボタンをクリックします。

メニュー情報の項目は以下の通りです。デフォルトから変更した項目は設定値の欄に示します。

項目説明デフォルト設定値
メニュー名30文字以内でメニュー名を入力します。任意のメニュー名を入力します。
略称5文字以内でメニュー名の略称を入力します。任意のメニュー名の略称を入力します。
店舗店舗を選択します。追加した店舗を選択します。
所要時間(分）所要時間を10分刻みの10～240から選択します。任意の所要時間を選択します。
金額金額を入力します。任意の金額を入力します。
メニューの有効期間開始メニューに開始日を設ける場合に設定します。
メニューの有効期間終了メニューに終了日を設ける場合に設定します。
すべてのスタッフがメニューを扱えるすべてのスタッフが扱えるメニューの場合はチェックします。オン
備考300文字以内で備考を入力します。


スタッフ情報

管理画面の [全体の設定] → [スタッフ情報] を選択して [追加] ボタンをクリックします。

スタッフ情報の項目は以下の通りです。デフォルトから変更した項目は設定値の欄に示します。

項目説明デフォルト設定値
姓10文字以内で姓を入力します。任意の姓を入力します。
名10文字以内で名を入力します。任意の名を入力します。
店舗店舗を選択します。追加した店舗を選択します。
地位地位を選択します。
デフォルトでは「社長」「部長」「店長」「主任」「スタッフ」「アルバイト」「保守管理者」が登録させています。		任意の地位を選択します。
重複可能数同一時間帯に重複して良い予約数を設定します。不明な時は 0 を設定します0
メニュースタッフが扱えるメニューをチェックします。任意のメニューを選択します。
郵便番号XXX-XXXX形式で郵便番号を入力します。
住所200文字以内で住所を入力します。
電話15文字以内で電話番号を入力します。電話かスマホを入力する必要があります。任意の電話番号を入力します。
スマホ15文字以内で携帯電話番号を入力します。電話かスマホを入力する必要があります。
メールXXX@XXX.XXX形式でメールアドレスを入力します。任意のメールアドレスを入力します。
ログイン名ログイン名を入力します。任意のログイン名を入力します。
備考300文字以内で備考を入力します。
自己PR300文字以内で自己PRを入力します。
入社日YYYY/MM/DD か YYYYMMDD で入社日を入力します。
退社日YYYY/MM/DD か YYYYMMDD で退社日を入力します。
スタッフカラー予約背景色を設定します。
※色を設定してもスタッフ情報の画面には反映されませんでした。予約画面では色は反映されます。		任意の色を設定します。
スタッフの写真スタッフの写真をアップロードします。任意の写真をアップロードします。


メール情報

管理画面の [全体の設定] → [メール情報] を選択します。

メール情報の項目は以下の通りです。ここではデフォルトままにしておきます。

項目説明
メールヘッダ（From)メールヘッダのFrom部分のメールアドレスを入力します。
設定しない場合はWordPressのデフォルトのメールアドレスになります。
メールヘッダ (ReturnPath)メールヘッダのReturnPath部分のメールアドレスを入力します。
設定しない場合はWordPressのデフォルトのメールアドレスになります。
メール選択メールの種類を選択します。
・確認メール
・会員登録メール
・予約完了メール
・予約キャンセルメール
・予約受付メール
・スタッフへのお知らせ
宛先宛先を入力します。複数メールの場合はカンマで区切って入力します。
メールのタイトル78文字以内でメールのタイトルを入力します。
メールの文面500文字以内で文面を入力します。


予約画面設定

管理画面の [全体の設定] → [予約画面設定] を選択します。

メール情報の項目は以下の通りです。ここではデフォルトままにしておきます。

項目説明デフォルト設定値
メニューの表示メニューの表示列を選択します。
・1列
・2列		2列1列
メニュータイプメニュータイプを選択します。
・チェックボックス
・ラジオボタン		チェックボックスラジオボタンを選択します。
予約画面のカレンダー上に表示するコメント予約画面のカレンダーの上部に表示したいコメントがあれば設定します。
「休み」の記述休みに表示される文字を入力します。定休日
「営業」の記述特別な営業日に表示される文字を入力します。営業
背景色(PC)予約画面の背景色を設定します。#FFFFFF
予約部分の色(PC)予約画面で予約した部分の色を設定します。#6BF2E5
予約部分の枠色(PC)予約画面で予約した部分の枠色を設定します。#8A8A8A
本日部分の色(PC)予約画面の本日部分の色を設定します。#D4FAE8
他の月の色(PC)予約画面の月タブ上の他の月の色を設定します。#DEDEDE
休日の色(PC)予約画面の休日の色を設定します。#FAC4BF
営業日の色(PC)予約画面の営業日の色を設定します。#696
フォーカスされているフィールドの色(PC):予約画面のフォーカスフィールドの色を設定します。#D4FAE8
名前1. 表示名称
2. ヒント
3. 項目に対するチェック（必須項目、最大入力文字数）		1. 名前
2. 姓と名に空白をお願いします
3. オン、オン		1. お名前
電話番号 (スタッフ)1. 表示名称
2. ヒント
3. 項目に対するチェック（電話番号形式）		1. 電話
2. 15文字以内
3. オン
電話番号 (顧客)1. 表示名称
2. ヒント
3. 項目に対するチェック（必須項目、電話番号形式）		1. 電話
2. 15文字以内
3. オン、オン		1. 電話番号
2. （空欄）
メールアドレス (スタッフ)1. 表示名称
2. ヒント
3. 項目に対するチェック（メール形式）		1. メール
2. メールの形式は XXX@XXX.XXX
3. オン
メールアドレス (顧客)1. 表示名称
2. ヒント
3. 項目に対するチェック（必須項目、メール形式）		1. メール
2. メールの形式は XXX@XXX.XXX
3. オン、オン		1. メールアドレス
2. （空欄）
予約時間1. 表示名称
2. ヒント
3. 項目に対するチェック（必須項目、メール形式）		1. 予約時間
2. 選択してください		2. （空欄）
担当1. 表示名称
2. ヒント
3. 項目を表示する場合チェックする		1. 担当
2. 選択してください
3. オン		2. （空欄）
メニュー1. 表示名称
2. ヒント
3. 項目を表示する場合チェックする		1. メニュー
2. 選択してください
3. オン		2. （空欄）
備考1. 表示名称
2. ヒント
3. 項目を表示する場合チェックする
4. 項目に対するチェック（最大入力文字数）		1. 備考
2. 300文字以内
3. オン
4. オン
クーポン1. 表示名称
2. ヒント		1. クーポン
2. 選択してください
値段1. 表示名称
2. 項目を表示する場合チェックする		1. 値段
2. オン		1. 料金（円）
電話をかける（スマホ）1. 表示名称
2. 項目を表示する場合チェックする		1. 電話
2. オン
「今日」ボタン1. 表示名称
2. 項目を表示する場合チェックする		1. 電話
2. 今日


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

  1. 管理画面の [全体の設定] → [店情報] を選択して、店情報の一覧から追加したお店の [選択] ボタンをクリックします。


  2. 店情報の登録画面の上部にショートコードが表示されていますのでコピーします。


  3. 予約画面にする固定ページを開いて、店情報でコピーしたショートコードを貼り付けて、固定ページを保存します。


  4. ブラウザで予約画面を確認します。スタッフを登録したのでスタッフも写真付きで表示されています。


  5. 時間を選択して予約入力画面を確認します。メニュー情報で追加したメニューが表示されています。


予約ページから予約をする

実際に予約ページから予約してみます。

  1. 予約画面から時間を選択します。ここでは「2021/07/14 15:00～16:00」を選択します。


  2. 時間を選択すると予約入力画面が表示されますので予約を入力します。
    メニューを選択するとメニューの所要時間で予約時間の終了時刻が変わり、料金も表示されます。
    項目を入力したら [予約] ボタンをクリックします。


  3. 予約が正常に登録されると以下のメッセージが表示されます。


  4. 予約画面に予約した利用者の名前が表示されます。


  5. 再読み込みする予約した時間帯に「仮予約」が表示されます。


  6. 利用者には予約受付メールが届きます。


予約を確定する

次に管理画面から予約を確定します。

  1. 管理画面の [日々の管理] → [予約登録] を選択して、画面上部のリストを追加したお店に切り替えます。
    一覧に予約が表示されますので、確定する予約の [確認] ボタンをクリックします。


  2. 予約を確定するメッセージが表示されますので [OK] ボタンをクリックします。


  3. 予約のステータスが「仮予約」から「予約完了」に変わります。


  4. 予約を確定すると利用者に予約完了メールが届きます。


  5. ブラウザで予約画面を確認すると「予約済」になっています。


実績を入力する

次に管理画面から実績を入力します。

  1. 管理画面の [日々の管理] → [実績登録] を選択して、画面上部のリストを追加したお店に切り替えます。一覧に予約が表示されますので、実績を登録する予約の [選択] ボタンをクリックします。


  2. 予約した内容で実績が初期表示されていますので、[実績登録] ボタンをクリックします。予約の内容と異なれば変更して [実績登録] ボタンをクリックします。


スタッフの出退勤を入力する

スタッフの休暇など個別にスケジュールを設定する場合は、管理画面から出退勤を入力します。

  1. 管理画面の [日々の管理] → [出退勤] を選択して、画面上部のリストを追加したお店に切り替えます。一覧にスタッフが表示されますので、出退勤を登録するスタッフの [選択] ボタンをクリックします。


  2. 例えば、7月16日は9:00～13:00までは通常勤務、13:00から休暇の場合は以下のように時間の範囲を選択します。


  3. 出退勤の入力画面で勤務状態に [通常勤務] にチェックして [追加] ボタンを クリックします。


  4. ブラウザで7月16日の予約画面を確認すると、出退勤で入力したスタッフの時間帯が定休日になっています。


まとめ

「Salon Booking」はスタッフごとに予約が出来て、予約画面に予約状況が確認できるところが素晴らしいです。
今回は予約画面の装飾やメールの文面はデフォルトのままで検証してみました。「予約画面設定」の項目だけでは予約画面のデザインの変更には限度があるため、罫線などはCSSとPHPのコードの変更が必要のようです。


以上、「Salon Booking」で予約システムを構築する方法について解説しました。

関連記事

【WordPress】美容室・サロン向け予約システムのプラグイン「Salon Booking」のインストール
【WordPress】「Salon Booking」をデフォルトの設定で予約システムを設置してみる