Salon booking systemを飲食店予約専用にカスタマイズ
各種設定の前に
サロンブッキングシステム は、無料で使えるネット予約プラグインです。
無料で利用できるネット予約プラグインの中でも、最高峰のプラグインです。
飲食店予約システム見本（予約テスト可能）
Salon bookingを飲食店予約専用にカスタマイズしました。
基本の設定は、以前制作したものと同じなので、説明が足りない部分は以下を参照にしてください。
Salon bookingを図解で完全攻略 new
パソコン・タブレット・スマホで、レイアウトが崩れる場合は、今回改変したCSS も紹介しているので、そちらをコピペしてください。
もう一つ飲食店の予約に特化した、Easy Appointments もありますので以下のページをご覧ください。
Easy Appointments
リラクゼーションサロン、ヘアサロンや医院などの予約に特化したシステムは以下をご覧ください。
Salon bookingを図解で完全攻略 new
施設レンタル、ルームレンタルや物品のレンタルに特化したシステムは以下をご覧ください。
Appointment Hour Bookingを利用して施設レンタル予約を設置する
インストール設定
プラグイン導入・インストール設定
- 検索窓に”Salon booking system”と入力
- “今すぐインストール”をクリック
- “有効化”をクリック
- Skipボタンをクリック！
- “始めましょう！”をクリック！
お店の設定 全般の設定
全般の設定
これから設定する全項目において、各項目の周りを大きく赤の線で囲んだ部分は、必須設定項目です。
それ以外の設定は、個々の状況に合わせてください。
全ての設定を同じにすることで、上に紹介した見本サイトと同じ予約システムになります。
- 特記事項なし
お店の設定 予約のルール設定
予約のルール設定
- 特記事項なし
お店の設定 お会計
お会計
お店の設定 支払い方法
支払い方法の設定
- 特記事項なし
お店の設定 スタイル
スタイルの設定
実践編 サービス追加
サービス追加
①設定見本
②設定見本
来店人数の追加と設定
来店人数の追加
通常ここでは、スタッフの登録とシフト設定をする場所ですが、今回は、予約可能な来店人数を設定します。※ここが今までのサロンや医院などの設定と異なります。
例えば、最大予約可能人数が10人の場合は、1人～10人までの項目を作ることになります。※以下の見本の最大予約人数は1人～6人です。
来店人数の詳細設定
- 特記事項無し
日本語設定ファイルダウンロード
ここでは、サロンブッキングシステムの日本語設定ファイルをダウンロードしていただけます。
もともと主要設定項目は、日本語表示になっておりますが、私がさらに、Google翻訳でコツコツと日本語変換作業をして、アップロードしました。
ダウンロードしたファイルは、レンタルサーバの、以下の場所へ入れて下さい。
wp-content/plugins/salon-booking-system/languages/salon-booking-system-ja.mo
wp-content/plugins/salon-booking-system/languages/salon-booking-system-ja.po
下のリンクに対して、”名前を付けてリンク先を保存”を選択してください。
※直接クリックしないでください！
日本語修正PHPファイルダウンロード
ここでは、予約確定時に送られてくるメールの内容を修正するphpファイルをダウンロードしていただけます。
海外のプラグインということもあり、名前に敬称がなかったり、変な日本語がありますのでそれを修正したphpファイルです。
ダウンロードしたファイルは、レンタルサーバの、以下の場所へ入れて下さい。
wp-content/plugins/salon-booking-system/views/mail/_admin_message_text.php
wp-content/plugins/salon-booking-system/views/mail/_customer_message_text.php
下のリンクに対して、”名前を付けてリンク先を保存”を選択してください。
ダウンロード後、拡張子を「.txt」から「.php」に書き換えてください。
※直接クリックしないでください！
各種設定CSS コピペ用
ここではコピペ用のCSSを書いておきます。
レイアウトが崩れる場合には、パソコン・タブレット・スマホ用の3種のCSSをコピペして利用してください。
/* パソコン用のCSS レイアウトを整える */
@media (max-width: 5000px){
h3[class="sln-steps-name sln-service-name"] {
width: 100% !important;
padding: 0em 0em 0em 0em !important;
margin: 0em 0em 0em 0em !important;
font-size: 1.0em !important;
}
h3[class="sln-steps-price sln-service-price"]{
width: 100% !important;
padding: 0em 0em 0em 0em !important;
margin: 0em 0em 0em 0em !important;
font-size: 1.0em !important;
}
}
/* タブレットサイズ用のCSS レイアウト崩れを防ぐ */
@media (max-width: 768px){
h3[class="sln-steps-name sln-service-name"] {
width: 100% !important;
padding: 0em 0em 0em 0em !important;
margin: 0em 0em 0em 2em !important;
font-size: 1.0em !important;
}
h3[class="sln-steps-price sln-service-price"]{
width: 100% !important;
padding: 0em 0em 0em 0em !important;
margin: 0em 0em 0em -1em !important;
font-size: 1.0em !important;
}
}
/* スマホ用のCSS レイアウト崩れを防ぐ */
@media (max-width: 574px){
h3[class="sln-steps-name sln-service-name"] {
width: 100% !important;
padding: 0em 0em 0em 0em !important;
margin: 0em 0em 0em 0em !important;
font-size: 0.84em !important;
}
h3[class="sln-steps-price sln-service-price"]{
width: 100% !important;
padding: 0em 0em 0em 0em !important;
margin: 0em 0em 0em 0em !important;
font-size: 0.84em !important;
}
}
/* 予約システムの周りの2重線（囲み線） */
#sln-salon {
border: 7px double #900;
}
/* ご利用時間を隠す（消す） */
span[class="sln-steps-duration sln-service-duration"] {
display: none !important;
}
/* 予約者の名前に「様」をつける */
p[class="sln-text--dark"] ::after {
content: " 様";
}
/* ご来店人数の箇所の 「指名なし」を隠す（消す） */
label[for="sln_attendant_"] {
display: none !important;
}
