【保存版】予約カレンダーシステムが作れるWordPressプラグイン『MTS Simple Bookin C』の使い方【面白解説】

2016

07/28

Updated

2021.02.15

2016

07/28

Published

2016.07.28

/ 松原 潤一

　 　　

\ この記事を共有 /

B!

リンクをコピーする

【保存版】予約カレンダーシステムが作れるWordPressプラグイン『M...

松原 潤一

B!

リンクをコピーする

どうも！JUNICHIです。

あなたはこんな悩みはありませんか？？

そうそう、特に個人で活動をしているカウンセラーさんやセラピストさんなどは、お客さんからのお申込みをメールで何往復もやり取りをしている人が多いと聞きます。ほんまに手間ですし、スケジュールを手入力とかしないといけないので、ミスも怖いですよね。

そこで今回は、WordPressで作ったホームページやブログに『予約カレンダーシステム』を設置できるプラグイン『MTS Simple Bookin C』の使い方を面白ストーリーと合わせて紹介します。

WordPressに予約カレンダーシステムを導入しよう！

200万！？

・

・

・

・

WordPressに予約カレンダーシステムを設置できるプラグイン『MTS Simple Bookin C』

実は『MTS Simple Bookin C』（無料版）ではちょっと使い勝手が悪い点が…。

じゃあビジネス版を購入しないと…って思った？　ちょっと待った！！

プラグイン『MTS Simple Bookin C』の使い方【実装までの10の手順】

手順１）プラグインをインストールしよう

本来なら、このプラグインを配布しているサイトに飛んで、プラグインのファイルをダウンロードしてもらいます。

でも、今回は使い勝手を良くしたバージョンを使うので以下のボタンをクリックして、プラグインのファイルをダウンロードしてください。

↓　次に、WordPressのダッシュボードから『プラグイン』の中の『新規追加』をクリック

↓　続いて『プラグインのアップロード』をクリック

↓　次に、『ファイルを選択』もしくは『参照』というボタンをクリック

↓　次に、先ほどダウンロードしたmsbc_customというZipファイルを選びます。

↓　『今すぐインストール』をクリック

↓　『プラグインを有効化』をクリック

これでプラグインがWordPressブログのサイトに入って使えるようになります。

手順２：初期設定をしよう

↓　WordPressのダッシュボードの左のメニューに『予約システム』というものができているはずです。その中の『各種設定』をクリック。

↓　まずはこのような画面になります。

• 一番上の『予約受付』にはチェックを入れましょう。入れないと予約カレンダーが出てくれないです。
• 予約受付期間は、あなたのサービスに合わせて本日から何か月間は受付が可能かというものを選んでください。最長で半年後（6か月後）の受付までが可能です。

あとは基本的には変更が不要なので、このまま『変更を保存』をクリックしてください。

↓　次に、一番上のタブの『施設情報』をクリック。

↓　こちらにあなたのお店や会社などについて入力しましょう。

ここも入力が終わったら必ず『変更を保存』をクリックしておいてください。

↓　次に、また上のタブに戻って『予約メール』のタブをクリック

↓　ここで、お客さんに入力してもらう項目と、自動返信メールの設定ができます。

ここまでができたら、必ず『変更を保存』をクリックしておきましょう。

↓　次に一番上の『その他』というタブをクリック

↓　ここは特に何もいじらなくてOKです。

手順３：予約品目の設定をしよう【対応できる時間・人数の設定】

次に『予約品目』というものの設定をします。

↓　ダッシュボードの左のメニューに『予約品目』っていうのが追加されているから、そこから『新規予約品目』をクリック

↓　まずはタイトルを入力。なんでもいいんですが「予約品目」と入れておけばOKです。

↓下の方に行くと、予約時間や予約条件などが設定できます。順番に見ていきましょう。

↓　まずは『予約時間割』という部分です。ここには、何時スタートでお客さんの対応ができるか、という時間を全て登録しておきましょう。

↓　こんな感じでどんどん対応可能なスタート時間を追加していきます。

↓　次に『予約条件設定』という部分です。ここは、対応可能な時間1枠ごとに何人・何件対応が可能なのか？という設定をします。

↓　例えば、個人でカウンセラーとかをしている人は、1対1の相談がメインだと思います。なので同時に対応できるのも1人っていう事が多いですよね。
その場合はこんな風に設定しておくといいです。

• 制約タイプ：『予約件数』
• それ以外は「１」

↓　ここまでできたら、記事を公開するのと同じように『公開』ボタンを押しておきましょう。

↓　公開ができたら、この予約品目の編集ページのURLの『post=●●●●』という数字の部分をメモしておいてください。次の手順４で使います。

これで予約品目の設定はOKです。

手順４：予約カレンダーのページを作ろう

↓　まずは『固定ページ』の『新規追加』をクリック

↓　タイトル、パーマリンクは好きなように入力をしてみてください。
例えばタイトルが『ご予約カレンダー』、パーマリンクの部分は『yoyaku』とかです。
そして本文のところに以下のコードを入れてみてください。

[monthly_calendar id="●●"]

↓　あとは、本文にはそれ以外にも文章を入れることができます。　[monthly_calendar id=”●●”]　という部分に予約カレンダーが出てきます。

↓　ここまでできたら『公開』ボタンをクリック

↓　このページの公開画面を見てみると、ほら！こんな風にちゃんとカレンダーがついていますね。

手順５：予約できるプランを登録しよう（プラグインのプログラムの編集）←要注意

↓　初めは★プランA★、★プランB★、★プランC★、★プランD★の４つが登録されています。

でもこのままじゃダメなので、このプラン名を変えていく作業をします。

↓　ワードプレスのダッシュボードから「プラグイン」＞「インストール済みプラグイン」をクリック

↓　次に『MTS Simple Booking C』の「編集」をクリック

↓　右のほうに「プラグインファイル」っていうのがあるので、ずーっと下に行くと…

↓「mts-simple-booking-c/mtssb-booking-form.php」というファイル名が見つかるので、それをクリック！

↓　ちゃんと編集するファイルがmts-simple-booking-c/mtssb-booking-form.phpになっていることを確認してください。（停止中）って出てますが気にしなくてOK！

↓　このファイルの中に以下のような部分があるので頑張って探してみてください。画面内検索（Ctrl+F）で★を検索するとすぐ見つかるはず！

手順６：予約フォームのページを作ろう

↓予約カレンダーをお客さんがクリックしていくと、こんな予約のフォームが出てくるようにするための作業をします。

↓　まずは『固定ページ』の『新規追加』をクリック

↓　タイトルは、何でもOKなんですが例えば「予約フォーム」としておきましょう。　そして、パーマリンクは絶対に『 booking-form 』にしておいてください。絶対ね！

本文は空のままでOKなので、これで『公開』をしておきましょう。

手順７：予約完了ページを作ろう（サンクスページ）

予約完了ページは、予約フォームからの情報を送信し終わった直後に表示させるページです。
↓　こんな感じのページです。

↓　まずは『固定ページ』の『新規追加』をクリック

↓　次に以下３つの部分を入力していきます。

1. タイトル：好きなタイトルでOKです。例えば『ご予約が完了しました』とか『予約フォームの送信が完了しました』など。
2. パーマリンク：ここは絶対に『 booking-thanks 』にしてください。
   ※パーマリンクが出てこない場合は一度『下書きとして保存』をクリックしてみてください。
3. 本文：必要な情報を書いてあげてください。例えばキャンセルの件や、他に案内することがあればぜひ。

これで予約完了ページが完成です。

手順８：営業日・休みの日を設定しよう

↓　まずはワードプレスのダッシュボードの左のメニューの『予約システム』＞『スケジュール』をクリック

↓　するとこんなカレンダーが出てきます。

↓　まずはスケジュールを設定したい年月に直して『変更』をクリック

↓　あとは、営業日をチェック！休みの日はチェックしない、というようにしていきます。

↓こんな感じでガンガンチェックしていきましょう。

↓　すべてチェックが終わったら『スケジュール保存』をクリックしておきましょう。

▲他の用事が入っていて、半日はお店を開けられないっていう場合は？

↓　WordPressの左のメニューの『予約システム』＞「追加・編集」をクリック

↓　予約の新規追加画面で、以下のように予約が入ると都合が悪い日時を埋めちゃう感じです。

1. 予約日：都合が悪い日
2. 予約対象と時間：都合が悪い時間（スタート時間）
3. 予約人数：予約がいっぱいになる人数（4名枠があるなら「４」、1人枠だけなら「１」など）
4. 名前：自分用に分かる名前を付けておけば分かりやすいですね

↓　この4点を埋めて、「予約の新規追加」をクリック

必要なだけ、これをやっておきましょう。

↓そうすると、こんな風に予約が埋まった状態になるので、普通のお客さんが予約を入れられなくなります。

手順９：予約カレンダーを、ナビゲーションメニューやサイドバーに設置しよう

■ナビゲーションメニューに設置する場合

↓　まずは『外観』＞『メニュー』をクリック

↓　次に、左側の『固定ページ』という中に手順４で作った『ご予約カレンダー』というものが入っているはずなので、チェックを入れて「メニューに追加」をクリック。

↓　そうすると「メニュー構造」という中の一番下に入ります。上→下にいくごとに、公開画面では左→右になります。

↓　例えば、こんな風に上から2番目にもっていくと、、、

↓　公開画面のメニューの左から2番目に入りますね。

こんな感じでナビゲーションメニューに設置ができます。

■サイドバーなどに設置する場合

↓　「外観」＞「ウィジェット」をクリック

↓　「MTSSB予約カレンダー」というものを「サイドバーウィジェット」の中にドラッグ＆ドロップでぐぐっと入れてあげましょう。

↓　すると中に入ってびろーんと広がるので、「保存」をクリック

↓すると、こんな感じでサイドバーに設置することもできます。

手順１０：しっかりと機能するか確認しよう

↓　設置したナビゲーションメニューをクリック

↓　予約カレンダーが出た！　ここで「○」のついた日をクリック

↓　時間帯が出ます。「○」のついた時間をクリック

↓　予約フォームが出た！ここで（※）必須の部分を入力して『予約確認』ボタンをクリック。　E-Mailは実際に自分に届くようにしておくとメール確認ができます。

↓　これで『予約する』ボタンをクリック

↓　サンキューページがキター！

↓　お店側として予約を受ける用のメールと

↓　お客さん側として、予約完了の自動返信メールが来ていればOK！

・

・

・

・

・

・

・

・

応用編

予約の○、△、×をちょっとオシャレな画像にしたい場合。

はっ！！

■○や×を好きな画像に変更する手順

↓　WordPressの左のメニューの『予約システム』＞『各種設定』をクリックすると、こんな画面が出てきます。

↑この「空きマーク」とか「残数少マーク」のところに画像のコードを入れてあげればいいんです。

↓　画像のコードは例えば以下のようにするとゲットできます。
記事に「メディアを追加」で画像を貼ります。そして、画像が出てきたらそれぞれの画像のリンクを切っておきましょう。そのあとに「テキスト」画面へ切り替えます。

↓　するとこんな風に画像のコードが出てきます。これをコピーしてください。

↓　あとはさっきの部分にコードを貼りつけるだけです。

予約してくれた人はどこかに保存されているの？【予約してくれたお客さんの管理】

↓　『予約システム』＞『予約リスト』をクリック

↓そうすると、予約をしてくれた人の一覧がここに出てきます。

MTS Simple Booking Cと相性が悪いプラグイン

これでWordPressサイトに予約カレンダーが設置できるね！

なんじゃこれ！！

何の記事か分かんなくなったところで、まとめに入ります。

まとめ

予約カレンダーの仕組をワードプレスサイトに導入したいなら『MTS Simple Booking C』というプラグインがオススメ。

でも、カスタマイズしたものでなければちょっと使い勝手が悪いので、この記事の解説通りに導入をしてみてください。

あと、幼馴染がなんだかんだ言って結婚するっていうオチが好きというお話でした。

おしまい。