WordPressに「予約システムを導入したい!」と思うことはありませんか?

  • 各種イベント
  • 教室やサロン
  • レストランなどの飲食店

などの時間帯予約にピッタリのプラグイン、「MTS Simple Booking-C」をご紹介します!

MTS Simple Booking-Cのzipファイルをダウンロード

公式サイトにアクセスし、DOWNLOAD >シンプル予約システムをクリックします。

ダウンロード開始をクリックします。
これでzipファイルがダウンロードされます。

STEP
1

管理画面からプラグインをアップロード

管理画面の「プラグイン」>「新規プラグインを追加」を選択し、「プラグインのアップロード」をクリックします。

「ファイルを選択」をクリックして、ダウンロードしたzipファイルを選択します。

選択できたら、「今すぐインストール」をクリックします。

インストールが完了したら、「プラグインを有効化」をクリックします。

※インストール済みプラグインの一覧から有効化してもOKです。

すると、このように管理画面に、

  • 予約品目
  • 予約システム

の2つの項目が追加されます。

STEP
2

【予約システム】予約パラメータ・施設情報・メールの設定

まずは、各種設定をおこなっていきます。

管理画面から、「予約システム」> 「各種設定」を選択します。

予約パラメータ

「予約の受付」にチェックを入れます。

※チェックを入れないと、カレンダーが表示されずに、予約中止中のメッセージが表示されてしまうため、気をつけてください。

その他の項目は、状況に合わせて項目を設定します。

全て設定ができたら、「変更を保存」をクリックします。

施設情報

施設情報を入力します。
ここに入力した情報は、予約が入ったときの自動返信メールに記載されます。
※必要な情報のみで問題ありません

ここでは、サロンの予約システムを作成したいので、施設名称は「テストサロン」としました。

E-mailのところに入力したアドレスは、予約完了メールの送信元アドレスにもなります。

全て設定ができたら、「変更を保存」をクリックします。

予約完了メール

予約完了メールの編集をおこないます。
メールの本文の中には、予約フォームに入力された変数を使用できます。

  • 姓名
    %CLIENT_NAME%
    ※フォームに入力したユーザーの情報を表示
  • 予約ID
    %RESERVE_ID%
    ※予約時にIDが割り当てられます
  • 施設名
    %NAME%
  • 郵便番号
    %POSTCODE%
  • 住所
    %ADDRESS%
  • 電話番号
    %TEL%

※施設名、郵便番号、住所、電話番号は、施設情報に入力したものが反映されます。

実際のメールでは、メール前文とメール後文との間に、予約内容が自動で挿入されます。

STEP
3

【予約品目】予約詳細の設定

次に、予約カレンダーの設定をおこなっていきます。

管理画面から、「予約品目」> 「新規予約品目」を選択します。

タイトル

タイトルを入力します。
ここでは、「サロン予約」としました。

※タイトルは、予約時に日付を選択すると、フォームのタイトルとして表示されます。

予約時間割

下にスクロールをすると、「予約時間割」のメニューがあるので、予約を受付したい時間を登録していきます。

①で時間を選択し、②で時間割追加をクリックすると、一覧に時間が登録されていきます。

※間違えた場合は、一覧の時間の右の削除をクリックすると、削除することができます。

今回はこのように、複数の時間を登録しました。

予約条件設定

予約に関する条件を指定していきます。

  • 制約タイプ
    ・収容人数・・・「人数」で管理する
    ・予約件数・・・「件数」で管理する
    のどちらで予約管理をおこなうかを設定します。
  • 定員数/予約上限
    ・定員数
    制約タイプで「収容人数」を選択した場合は、ここで定員数を設定します。
    定員数以上の予約はできなくなります。

    ・予約上限
    制約タイプで「予約件数」を選択した場合は、ここで予約上限数を設定します。
    予約上限数以上の予約はできなくなります。
  • 最少人数
    予約1件あたりの、必要最少人数を入力します。
    たとえば、2に設定しておくと、2名以上でのみ、予約が可能となります。
  • 最大人数
    予約1件あたりの、上限最大人数を入力します。
    たとえば、5に設定しておくと、5名以下でのみ、予約が可能となります。
  • 人数計算乗率
    たとえば、小人や幼児も予約の対象となる場合、小人を0.5に設定しておくとすると、2人で1人の予約としてカウントします。

ここまで入力ができたら、上にスクロールして、公開します。

STEP
4

【予約システム】予約のスケジュールの設定

最後に、予約を受付する日の選択をおこなっていきます。

管理画面から、「予約システム」> 「スケジュール」を選択します。

左上には、予約品目のところで入力したタイトルが表示されています。
※もし、複数の予約品目を登録した場合は、ここでスケジュールを設定したい品目を選択します。

まず、スケジュール設定をしたい年月を選択します。(選択後に、右横の変更ボタンをクリックしてください)

次に、予約を受付する日にチェックをいれていきます。
ここでは、12月25日以降、月曜日から金曜日の予約を可能としたいと思います。

画像のようにチェックを入れたら、左下の「スケジュール保存」をクリックします。

1月のスケジュールも設定していきます。

①年月を選択
②変更をクリック
③月~金の曜日の横にチェックを入れる
※曜日の横にチェックを入れると、一括でチェックを入れることが可能です
(ex.月の横にチェックを入れると、全ての月曜日にチェックが入る)
「スケジュール保存」をクリック

※ここでは、2月も同じように設定をおこないました。

STEP
5

以上で、各種設定は完了しました!
ここからは、作成した予約カレンダーの埋め込みをおこなっていきます!

予約カレンダーの埋め込み

予約品目のid確認

カレンダーの埋め込みにあたって、作成した予約品目のidを確認していきます。

管理画面から、「予約品目」> 「予約品目」を選択します。

予約品目名を選択します。
ここでは、「サロン予約」を選択します。

アドレスバーを確認します。

post=○○
となっているところの数字を見ます。

ここでは、88という数字をメモしておきます。

ページへの埋め込み

予約カレンダーを埋め込みたいページを作成します。
ここでは、「予約カレンダー表示テスト」という固定ページを作成し、ここに埋め込みをおこなっていきます。

下記の手順で、ショートコードのブロックを挿入します。

①ブロックの追加ボタンを選択
②検索窓に「ショート」と入力
③ショートコードブロックが出てくるので選択

下記のように、ショートコードを入力します。
※●●の部分は、先ほど予約品目のアドレスバーのところで控えた数字を入力します。

[monthly_calendar id=●●]

ページをプレビューします。
STEP5で、予約受付日として設定した日付に○印が表示されていることがわかります。

予約受付日として設定していない土曜日と日曜日は予約ができなくなっています。

STEP
6

これで、予約カレンダーが表示されるようになりました!
続いて、予約確認画面予約完了画面を作成します。

予約確認画面の作成

固定ページで予約確認画面を作成します
下記のとおり、入力とページの公開をおこないます。

  • タイトル
    任意のタイトルを入力
    (予約確認画面のタイトルとして表示されます)
  • 本文
    任意のテキストを入力
    (予約フォームの上に表示されます)
    ※空欄でもOKです
  • パーマリンク
    booking-formと入力
  • ここまで入力できたら、ページを公開
STEP
7

予約完了画面の作成

固定ページで予約完了画面を作成します
下記のとおり、入力とページの公開をおこないます。

  • タイトル
    任意のタイトルを入力
    (予約完了画面のタイトルとして表示されます)
  • 本文
    任意のテキストを入力
    (予約完了画面に表示されます)
  • パーマリンク
    booking-thanksと入力
  • ここまで入力できたら、ページを公開
STEP
8

予約確認画面と予約完了画面を作成することができました!
次のステップでは、実際に予約をおこないながら、動作確認をしていきます。

予約のテスト

予約カレンダーからの予約

ここからは、実際に予約のテストをおこないます。

STEP6で埋め込んだカレンダーを表示させ、日付の下の○印をクリックします。

すると、STEP4で登録した時間が表示されます。
ここでは、10:00に予約を入れます。
時間の横の○印をクリックします。

予約確認画面の確認

予約フォームの画面になります。
フォームの上には、予約確認画面の本文に入力した内容が表示されています。

各項目に入力をおこないます。

  • 人数を入力
    ※もし、STEP4の予約条件設定のところで、最少人数を2に設定していた場合には、1名での予約は不可となります。
  • 必須項目を入力
  • 任意項目を入力
  • ここまで入力できたら、「予約確認」をクリック

入力内容の確認画面が表示されます。
内容に問題がなければ、「予約する」ボタンをクリックします。

※もし、入力内容を修正したい場合は、ブラウザの戻るボタンで戻って編集することが可能です!

予約完了画面の確認

予約完了画面が表示されます。

予約完了画面作成時に入力した、タイトルと本文が表示されていたら、OKです!

予約完了メールの確認

予約が完了すると、入力したメールアドレスに予約完了メールが届きます。

STEP3でおこなったメールの設定が反映されていることがわかります。

STEP
10

予約のテストで、実際に表示される画面やメールの確認をおこなうことができました!
もし、うまく表示されない場合は、どこかのステップが間違っている可能性があるので、見直してみてください。
最後に、予約リストの確認をしていきます。

予約リストの確認

予約リストの確認方法をチェックしていきます。

管理画面から、「予約システム」> 「予約リスト」を選択します。

すると、予約のリストが一覧で確認できます。

確認の下のステータスが、赤色のマイナスマークになっている(未確認)になっていることがわかります。

予約日の下にカーソルを当てると、編集が表示されるので、クリックします。

予約の編集画面となります。
ここで、予約フォームに入力された情報を確認できます。

ここからメールアドレスの情報を取得できるので、別途予約完了のメールなどを送信することも可能です。

必須ではありませんが、右上の「予約確認済み」にチェックを入れて、「予約データ保存」をクリックすると、確認のステータスを変更することができるため、管理がしやすくなります。

ここでは、予約確認済みにチェックを入れて、予約データ保存をクリックしてみます。

もう一度、管理画面から、「予約システム」> 「予約リスト」を選択します。
すると、確認の下のステータスが緑のチェックマーク(確認済)に変わっていることがわかります。

このようにして、予約の管理をおこなうことが可能とです。

STEP
11

特定の日に予約受付可能な時間を変更したい場合は??

そのままだと、予約を受付する日に設定した全ての日で、予約品目のところで登録した全ての時間の予約が可能な状態になっています。
特定の日だけ、予約受付可能な時間を変更したいときに使える方法をご紹介します!

管理画面から、「予約システム」> 「予約カレンダー」を選択します。

変更をおこないたい日付の下の、「表示する」をクリックします。

収容人数を確認します。
ここでは10となっているので、予約を受付不可にしたい時間のテキストボックスに、同じ数字を入力します。

入力ができたら、「調整する」をクリックします。

調整済みと表示されたら、完了です。

予約ができなくなっているか、確認をおこなっていきます。

予約カレンダーから、修正をおこなった日付を選択します。
すると、調整をおこなった時間の予約ができなくなっていることがわかります。

テキストボックスに入力をおこなうことで、予約人数を調整することが可能です。

たとえば、下記の画像のように、14:00のテキストボックスに7と入力して調整し、カレンダーを確認してみると、14:00の表示が△(予約できるのは、あと3名という状態)になります。

WordPressに予約システムを導入したい場合は、ぜひお試しください

今回は、プラグインを使って、WordPressに予約システムを導入する方法をご紹介しました。
MTS Simple Booking-Cを利用すれば、カレンダーから日付を選択するというわかりやすい方法で、予約を受付することが可能です!

機能体験型のデモサイトで「時間帯予約システム」を体験!

弊社のLightningテーマのデモサイトで、時間帯予約システムを実際にご確認いただけます!
一度、実装のイメージを確認してみてくださいね。

体験するのページ
フルーツ狩りの予約を体験できます。

食べるのページ
BBQ広場の予約を体験できます。

投稿者プロフィール

Mayu
Mayu
Webサイトに興味をもち、独学でHTMLやCSSの勉強を始め、その後、スクールでAdobeソフトの使い方やデザインについての知識を習得する。
同時に、様々なWebサイトがWordPressで作られていることを知り、お客さまに喜んでいただけるサイト作りができるよう、WordPressの仕組みやユーザー視点での文章表現、デザインスキルを日々学ぶ。
2022年10月より、株式会社ウェブロードに入社し、お客様のサイト制作、修正やページ追加、操作サポートを行っている。

お問合せフォームはこちら

(※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。)

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか?

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか?(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか?(複数選択可)

    SSL(https://~)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか?(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意電話番号(ハイフン無し・半角数字)