トップページ最下部にWeb予約カレンダーを設置する方法を紹介します。

「MTS Simple Booking」の設置は任意です。
ほかのWeb予約システムをご利用の方は、そちらへのリンクボタンなどを設置するか、テーマカスタマイザーで非表示にするなどしてください。

無料でWEB予約システムをWordPressに設置しましょう

WordPressの「MTS Simple Booking」というプラグインを使うことで、無料でホームぺージにWeb予約システムを導入することができます。

Healerの親テーマには、すでにMTS Simple BookingのCSSを組み込んでいますので、インストールして設定だけしていただければ、すぐにこのようなデザインで設置することができます。

mts-simple-booking-01

名前の通りデザインもシンプルでとても使いやすいです。

好きな日付をクリックすると、次は時間を選択します。

mts-simple-booking-02

最後に情報を入力して送信するだけで簡単にWeb予約ができます。

mts-simple-booking-03

MTS Simple Bookingの設置と使用方法

まずは下記リンクからプラグインをダウンロードしてください。

ダウンロードしましたら、プラグインの新規追加から[インストール] → [有効化]してください。

予約フォーム用の固定ページを作成する

上の画像のお客様情報を入力するページは、固定ページで別に作る必要があります。

ここでは、タイトルは[予約フォーム]、パーマリンクは[booking-form]としています。

記事の中身は空欄で大丈夫です。

mts-simple-booking-06

カレンダーで日時から選択してもらわないと意味のないページなので、検索エンジンには引っかからないようにしないといけません。

検索ロボットの欄にnoindex,followと入力してください。

mts-simple-booking-07

各種設定

次に、予約システムの各種設定をしていきます。

mts-simple-booking-10

まず、予約パラメータの一番上にある「予約の受付」です。

mts-simple-booking-11

このチェックが外れていると予約機能がストップしますので、必ずチェックを確認して下さい。

次の施設情報は赤で囲んだ部分が必須項目となります。

mts-simple-booking-12

予約時のお客様への確認メールに表示されるものなので必ず記入してください。

次にお客様に予約時に入力してもらいたい情報を選択します。

mts-simple-booking-13

ここでは上の3つを必須としています。

最後に予約時にお客様に送られる自動返信メールの中身を変更します。

mts-simple-booking-14

%で囲まれた部分に施設情報とお客様が記入した情報が自動で入ります。

予約ができたことをお知らせできればいいので、必要最小限なものに変更します。

例えばこのような感じです。

◆メール前文

%CLIENT_NAME% 様
ご予約ID:%RESERVE_ID%

%NAME%をご利用いただき誠にありがとうございます。

以下の内容でご予約を承りました。

◆メール後文

このメールにお心当たりが無い場合、以下へご連絡下さるよう
お願い申し上げます。

%NAME%
%POSTCODE%
%ADDRESS%
TEL: %TEL%
E-Mail: %EMAIL%
Webサイト: %WEB%

これで十分伝わるかと思います。

スケジュールの設定

スケジュールの設定で予約可能日を設定します。

mts-simple-booking-15

スケジュールは、チェックを付けた日が予約可能日になります。

mts-simple-booking-16

営業日にチェックをして、休みの日はチェックを入れないようにしてください。

予約品目で時間割を設定

管理画面左メニューから[新規予約品目]を選択します。

mts-simple-booking-17

タイトルは自由ですが、ここでは[WEB予約]、パーマリンクは[reservation]としました。

mts-simple-booking-18

予約時間割に予約可能時間帯を1つずつ設定します。

最短で10分単位で設定が可能です。

mts-simple-booking-19

予約一件あたりの担当可能人数を設定します。

mts-simple-booking-20

一人サロンなら全て一人でOKです。

最後に、上のURLのpost=のあとの数字をメモしておいてください。

mts-simple-booking-08

WEB予約ウィジェットを作成する

次に、WEB予約ウィジェットにMTSSB予約カレンダーを入れます。

IDの部分に先ほどの固定ページの数字を記入してください。

mts-simple-booking-09

電話で予約を入れた場合

電話で予約が入った場合は、ブッキングを避けるために手入力で予約を埋めなくてはいけません。

mts-simple-booking-21

追加・編集ページから予約を店舗側で入れることができます。

mts-simple-booking-22

実際のWeb予約の流れ

それでは、実際のWeb予約の流れを確認してみます。

トップページから希望の日にちを選択します。

mts-simple-booking-23

仮に、15日を選択しました。

すると同画面で時間へと変わります。

mts-simple-booking-24

15時を選択しました。

mts-simple-booking-25

一番初めに作成した固定ページに推移し、お客様の入力するフォームが表示されます。

mts-simple-booking-26

フォーム画面もHealerのCSSでデザイン済みです。

予約がされると予約システム管理画面でお客様の情報を確認することができます。

mts-simple-booking-27

月ごとにソートも可能です。

予約された日付と時間は、すぐに×マークが付いて予約ができなくなります。

mts-simple-booking-28

注意:フェイタルエラーが出た場合の直し方

WordPressの最新バージョンで[MTS Simple Booking]を使用すると、フェイタルエラー(致命的なエラー)が発生してしまうようです。

直し方をメインブログにアップしましたので、もしエラーが出た際は参照してください。

Follow me

-カスタマイズ
-

WEB予約カレンダー(MTS Simple Booking)を設置する方法
この記事はいかがでしたでしょうか。
是非Healerの最新ニュース情報を、
いいねしてチェックしてください!

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。