WordPressで予約システムを作る際に有名なプラグインとして「MTS Simple Booking C」があります。
このプラグインを使うことで、難しいコードを書く必要なく、誰でも簡単に予約システムをサイト上に構築することができます。
そして何より日本語対応なのがとてもありがたいです。
この記事では、プラグインをインストールするところから、実装し、動作確認するまでの手順を解説しています。
記事を読みながら同じように実装していけば、およそ10〜20分程度で下の画像のようなカレンダータイプの予約システムが構築できます。
完成画像
![MTS Simple Booking C 手順1](https://keimarublog.com/wp-content/uploads/2020/07/Event-reservation-calendar-821-1024x592.jpg)
それでは早速やっていきましょう!
プラグイン「MTS Simple Booking C」をダウンロード
まずはプラグインをダウンロードしていきましょう。
このプラグインは、管理画面のプラグイン検索では出てきませんので、公式サイトよりダウンロードします。
ダウンロードリンクはこちら→MTS Simple Booking
![MTS Simple Booking C 手順2](https://keimarublog.com/wp-content/uploads/2020/07/Simple-reservation-system-821-1024x614.jpg)
[DOWNLOAD] → [シンプル予約システム] をクリックします。
![MTS Simple Booking C 手順3](https://keimarublog.com/wp-content/uploads/2020/07/MTS-Simple-Booking-C-Download-Button-821-1024x614.jpg)
ダウンロード開始ボタンをクリックするとダウンロードが始まります。
プラグイン「MTS Simple Booking C」をアップロード
ダウンロードしたzipファイルをWordPressにアップロードさせましょう。
![MTS Simple Booking C 手順4](https://keimarublog.com/wp-content/uploads/2020/07/Management-screen-plug-in-new-addition-821-1024x614.jpg)
管理画面の左メニュー、[プラグイン] → [新規追加] をクリック。
![MTS Simple Booking C 手順5](https://keimarublog.com/wp-content/uploads/2020/07/Plugin-drag-and-drop-821-1024x614.jpg)
「プラグインをアップロード」より、先程ダウンロードしたプラグインのzipファイルを、ドラック&ドロップします。
アップロードが完了したら、[今すぐインストール]をクリック。
![MTS Simple Booking C 手順6](https://keimarublog.com/wp-content/uploads/2020/07/Enable-plugin-821-1024x614.jpg)
[有効化]させましょう。
MTS Simple Booking Cの設定
プラグインを有効化することができたので、次はMTS Simple Booking Cの設定を行っていきます。
![MTS Simple Booking C 手順7](https://keimarublog.com/wp-content/uploads/2020/07/MTS-Simple-Booking-C-Various-settings-821-1024x614.jpg)
管理画面、左メニューに追加された [予約システム] → [各種設定] をクリックします。
![MTS Simple Booking C 手順8](https://keimarublog.com/wp-content/uploads/2020/07/Reservation-reception-821-1024x614.jpg)
[予約パラメータ]タブの、[予約の受付]にチェックを入れます。
![MTS Simple Booking C 手順9](https://keimarublog.com/wp-content/uploads/2020/07/Various-settings-Facility-informatio-821-1024x614.jpg)
[施設情報]タブで店舗名などを編集します。
連絡用のメールアドレスも設定しましょう。予約があると、ここに記述したアドレスに通知が送信されます。
![MTS Simple Booking C 手順10](https://keimarublog.com/wp-content/uploads/2020/07/0005FBVarious-settings-Reservation-email-821DB-6D2E-4B35-92F2-EFACADBE6F55-scaled-1024x614.jpg)
[予約メール]タブで、予約フォームに入力する際の項目と、予約完了時に相手側に自動送信されるメールの内容を設定することができます。
予約品目の作成
予約品目を作成していきます。
![MTS Simple Booking C 手順11](https://keimarublog.com/wp-content/uploads/2020/07/New-reserved-item-821-1024x614.jpg)
管理画面左メニュー、[予約品目] → [新規予約品目] をクリックします。
![MTS Simple Booking C 手順12](https://keimarublog.com/wp-content/uploads/2020/07/Event-reservation-permalink-821-1024x614.jpg)
タイトルに予約品目を入力し、ページ下にある予約条件設定の入力も完了したら[公開]ボタンをクリックします。
![MTS Simple Booking C 手順13](https://keimarublog.com/wp-content/uploads/2020/07/Event-reservation-page-ID-821-1024x641.jpg)
この時アドレスバーに表示された投稿ID(?post=〇〇)の数字は後ほどショートコードに貼り付けるので、控えておきましょう。
スケジュールカレンダー設定
次は、予約受付日の設定をします。
![MTS Simple Booking C 手順14](https://keimarublog.com/wp-content/uploads/2020/07/Reserved-item-schedule-821-1024x641.jpg)
管理画面左メニュー、[予約システム] → [スケジュール] をクリックします。
![MTS Simple Booking C 手順15](https://keimarublog.com/wp-content/uploads/2020/07/Reservation-system-schedule-management-821-1024x641.jpg)
予約受付日や、曜日にチェックを入れます。
ここにチェックを入れた箇所がカレンダー上で予約受付できる日になります。
チェックが入れ終わったら[スケジュール保存]をクリックします。
予約フォームと予約完了の固定ページを作る
次に予約フォームの固定ページと、予約完了の固定ページの2つを作っていきます。
![MTS Simple Booking C 手順16](https://keimarublog.com/wp-content/uploads/2020/07/Fixed-page-new-addition-821-1024x641.jpg)
[固定ページ] → [新規追加] をクリックします。
![MTS Simple Booking C 手順17](https://keimarublog.com/wp-content/uploads/2020/07/Reservation-form-slug-821-1024x641.jpg)
まずは予約フォームのページを作ります。
タイトルに「予約フォーム」と入れ、下書き保存をしましょう。そしたらパーマリンクのスラッグを変更できるようになるので、スラッグをbooking-form
に変更して[公開]します。
![MTS Simple Booking C 手順18](https://keimarublog.com/wp-content/uploads/2020/07/Reservation-completed-page-slug-821-1024x641.jpg)
同じ様に、予約完了ページを作ります。スラッグはbooking-thanks
になります。
予約カレンダーを表示する
固定ページに、作った予約カレンダーを表示させましょう。
![MTS Simple Booking C 手順19](https://keimarublog.com/wp-content/uploads/2020/07/Short-code-I-821-1024x641.jpg)
[固定ページ] → [新規追加] で、タイトルを入力したら、本文に下記ショートコードを入力します。[monthly_calendar id="〇〇"]
(〇〇の部分は予約品目を作成したときに控えた投稿IDを入力します)
以上で予約カレンダーを作ることができました。
公開ボタンをクリックして、ページを表示してみましょう。
![MTS Simple Booking C 手順20](https://keimarublog.com/wp-content/uploads/2020/07/Reservation-date-821-1024x641.jpg)
予約システム→スケジュールでの設定が反映されています。
適当に日付をクリックします。
![MTS Simple Booking C 手順21](https://keimarublog.com/wp-content/uploads/2020/07/Reservation-time-821-1024x641.jpg)
○をクリックします
![MTS Simple Booking C 手順22](https://keimarublog.com/wp-content/uploads/2020/07/Reservation-form-submission-821-1024x641.jpg)
予約フォームの項目を入力し、[予約する]ボタンをクリックします。
![MTS Simple Booking C 手順23](https://keimarublog.com/wp-content/uploads/2020/07/Reservation-completion-screen-821-1024x641.jpg)
予約完了ページに遷移できました。
自動送信メールは以下のようになります。
↓自分側へのメール
![MTS Simple Booking C 手順24](https://keimarublog.com/wp-content/uploads/2020/07/Reservation-accepted-1024x907.png)
↓相手側へのメール
![MTS Simple Booking C 手順25](https://keimarublog.com/wp-content/uploads/2020/07/Reservation-completion-email-821.jpeg)
ここまで動作確認することができればOKです。
後は自分好みにカスタマイズしていきましょう。
以上でプラグイン 「MTS Simple Booking C」 を使った予約システムの実装を終わりです。
お疲れさまでした(^O^)/