「予約システム」と聞くと複雑な実装が必要なイメージがありますが、プラグイン「Amelia」を使用するとそんな悩みが解決されます。
基本的に内部的なシステム構築は必要なく、フロント上でどのように表示させるかのカスタマイズをすれば良いので実装のハードルが下がります。
今回はAmeliaの実装方法とショートコードを応用したカスタマイズ方法を紹介します。
ぜひ最後までご覧ください！
目次
Ameliaとは
簡単にオンライン予約システムを実装できるWordPressのプラグインです。
Amelia – WordPress Appointment and Event Booking Plugin
無料版と有料版が用意されています。
カスタマイズや決済設定の面では、やはり有料版の方が幅広く設定できます。
有料版のライセンスプランについては下記グラフ（税抜きで表記）をご確認ください。
| プラン | Annual(年払い) | Lifetime(買い切り) | 使用できるドメイン数 |
|---|---|---|---|
| BASIC | 毎年 : ¥10,844 | ¥27,305 | 1 |
| PRO | 毎年 : ¥16,328 | ¥54,748 | 3 |
| DEVELOPER | 毎年 : ¥34,166 | ¥80,818 | 無限 |
(2023/05 現在)
参考 : Pricing – Amelia WordPress Booking Plugin
インストール
「無料版」を使用する場合は、管理画面からプラグインを選択し、新規追加をクリックします。
Amelia と検索し、プラグインをインストール・有効化します。
管理画面のサイドバーに「Amelia」が追加されていればOKです！
「有料版」を使用する場合は、プラグイン購入後プラグインファイルをダウンロードしたら
管理画面からプラグインを選択し、新規追加をクリックします。
「プラグインのアップロード」をクリックするとアップロード画面が出てくるので、ダウンロードしたファイルをアップロードしてください。
各種設定
サービスを開始するために最低限設定しておきたい項目は、
です。
サービス
提供するサービスを設定します。
登録する項目は下記です。
| 項目名 | 入力方法 | 備考 |
|---|---|---|
| カテゴリー名 | 自由入力 | カテゴリー名を入力する。 例のようにサービスを代表した名前を付ける。 例 : 「オンラインカウンセリング」「グループカウンセリング」 |
| 画像 | アップロード | サービスを象徴する画像を登録する。フロント側に表示することもできる。 |
| サービス名 | 自由入力 | サービス名を入力する。 |
| カテゴリー選択 | 登録したカテゴリーを選択（複数選択不可） | 「カテゴリー名」で入力したカテゴリーから1つ選択する。 |
| 所要時間 | 選択 | 所要時間を選択する。 |
| 価格 | 自由入力 | 価格を入力する。1円単位まで入力できる。 |
| 予約前後の時間調整 | 選択 | 予約から次の予約までの時間を設定する。 |
| 予約最少人数と最大人数 | 自由入力 | 予約最少人数と最大人数を入力する。 |
| ギャラリー | アップロード | フロント側で見せたい画像をアップロードする。 スライドショーや詳細画像として利用できる。 |
| 追加オプション | 自由入力 | 追加オプションを追加できる。 オプション名・所要時間・価格・制限人数を設定する。 追加オプションは複数追加することができる。 |
| サービスの詳細設定 | 選択または自由入力 | サービスの詳細設定・支払いの設定・開催方法(Integrations)を選択できる。 (Integrationsは Amelia > 設定 より設定できる。) |
| 従業員 | 選択（複数選択可） | サービスを担当する従業員を選択する。 |
STEP 1
① Amelia > サービスを選択します。
②「+ カテゴリーを追加」を選択します。
STEP 2
① サービスのカテゴリーを入力します。
② ①の入力を反映させるために、✔を押してください。（押さないと反映されないので要注意です…！）
③「+ サービスを追加」を選択します。
STEP 3
サービス情報入力時に必ず設定して頂きたいのは①の「サービスの詳細」と②の「設定」です。
①「サービスの詳細」でサービス名や所要時間、価格などを設定します。
②「設定」で支払方法の設定やサービスを実施する場所を設定します。
通知
続いてメールの設定をしていきましょう。
無料版と有料版では送信できるメールの数がかなり異なります。
| 種類 | 無料版 | 有料版 |
|---|---|---|
| 予約完了メール（承認済みのアポイントメント） | 〇 | 〇 |
| 仮予約メール（保留中のアポイントメント） | 〇 | 〇 |
| 予約拒否メール（拒否済みのアポイントメント） | ✕ | 〇 |
| キャンセルメール（キャンセル済みのアポイントメント） | ✕ | 〇 |
| 予約変更メール（再スケジュールのアポイントメント） | ✕ | 〇 |
| 予約前日メール（翌日リマインダーのアポイントメント） | ✕ | 〇 |
| 利用後メール（フォローアップのアポイントメント） | ✕ | 〇 |
他にも有料版ですと、任意のタイミングで送信できるメールを新規で作成できます。
「お客様宛て」と「従業員宛て」のメールを分けて文面を作成することが可能です。
また予約の情報をメールに乗せたい場合は、Show Email Placeholdersから生成されたコードを本文に入れます。
メールを新規追加したい場合は、「Create New Notification」を押し、
① メール（通知）の名前を入力します。
② メールを有効にする場合、オンにします。
③ Action triggered notification（アクショントリガー通知）か Scheduled notification（予定された通知）を選択します。
④ どの状態の時、メールを送信するのか選択します。
⑤ 限られたサービスの時のみ送信したい場合、選択します。
Send only this notification ➡ オンにしたメールのみ送信を設定してください。
設定
設定の画面は以下のようになっています。
無料版と有料版で少し異なる点はありますが、そこまで大きな違いはありません。
① 基本設定
プラグインの基本設定とサービスのデフォルト設定を行います。
設定するべき項目は以下です。
デフォルト時間枠のステップ
プラグイン全体の時間枠を決めます。
予約の時間枠にサービス期間を使用する
無効の場合 : 9:00 ~ 9:30, 9:15 ~ 9:45, 9:30 ~ 10:00
有効の場合 : 9:00 ~ 9:30, 9:30 ~ 10:00, 10:00 ~ 10:30
のように有効にすると予約の時間が固定になります。ご予約の前に最低限必要な準備時間
予約の準備時間 = 予約当日から何日(何時間)以内で予約できるようにするか設定できます
② 会社
会社名や住所・電話番号を設定します。
③ 通知
メールサービスや送信者名、送信者メールアドレスなどを設定します。
メールサービスはデフォルトで「PHPメール」が設定されていますが、公式から非推奨とされているので、他のメールサービスを使用することをオススメします。
④ 営業時間 & 休業日
サービス全体の営業日や休業日を設定します。
⑤ 支払い
国や価格シンボル、サービス全体の決済方法を設定します。
無料版だと決済方法が「オンサイト」（現場支払い）しか選択できません。
オンラインサービスを提供したい場合は有料版を検討する必要がありそうですね…！
⑥ Integrations
GoogleカレンダーやZoomなどの外部サービスとの連携設定ができます。
⑦ アポイントメント
各予約に参加できる最大人数や最少人数についての設定をします。
⑧ ラベル
フロント側で表示されるラベルの表示名を変更できます。
⑨ ユーザー権限の設定
従業員やお客様にどのような権限を与えるかを設定できます。
従業員の権限を決めるには有料版を購入する必要があります。
⑩ Activation
プラグインをアクティブ化することで有料版でもプラグイン自動の自動更新をすることが可能になります。
ショートコード
Ameliaはショートコードを使用し、フロント側に出力させます。
Ameliaのショートコードはさまざまな指定方法がありますので、一覧にまとめて紹介します。
一覧
下記グラフのように表示させたい場合に応じて、予約フォームの表示を変えることができます。
| ショートコード | 説明 |
|---|---|
| [ameliabooking] | すべてのサービスの予約フォームを出力 |
| [ameliabooking category=1] | カテゴリID : 1の予約フォームを出力 |
| [ameliabooking service=1] | サービスID : 1の予約フォームを出力 |
| [ameliabooking employee=1] | 従業員ID : 1の予約フォームを出力 |
| [ameliabooking location=1] | 場所ID : 1の予約フォームを出力 |
| [ameliabooking category=1 employee=1] | カテゴリID : 1 かつ 従業員ID : 1の予約フォームを出力 |
参考 : List of Amelia Shortcodes – Amelia WordPress Booking Plugin
応用編 : 動的に出力させる
現在Ameliaでは動的出力用の関数やフィルターフックは用意されていません。
そのため動的出力をさせたい場合、SQLを実行しDBから直で取得する必要があります。
今回はSQLを実行し、従業員とその従業員が担当する予約のフォームを動的に出力させる方法を紹介します。
1従業員を動的に出力させる
WordPressでSQLを扱う時、必ず使用するのが「wpdb」クラスです。
もとからグローバル変数 $wpdb として用意されています。
またDB通信用の関数を簡単にまとめましたので、下記に目を通してから先に進んでいただければと思います。
| 関数 | 説明 |
|---|---|
| get_results | SQL文の全結果を配列に返します |
| get_col | SQL文で指定した列だけ配列で返します。 |
| get_var | SQL文で指定した変数を1つだけ返します |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <?php global $wpdb; $provider_array = $wpdb->get_col("SELECT id FROM 'wp_amelia_users' WHERE type = 'provider' "); foreach ($provider_array as $provider_id) : // 画像のURL $img_url = $wpdb->get_var("SELECT pictureFullPath FROM 'wp_amelia_users' WHERE id = $provider_id "); // 名前 $first_name = $wpdb->get_var("SELECT firstName FROM 'wp_amelia_users' WHERE id = $provider_id "); $last_name = $wpdb->get_var("SELECT lastName FROM 'wp_amelia_users' WHERE id = $provider_id "); ?> // ループさせたいコンテンツ <div class="box"> <div class="img"><img src="<?php echo $img_url; ?>" alt=""></div> <p class="name"><?php echo $first_name . ' ' . $last_name; ?></p> </div> <?php endforeach; ?> |
細かく説明していくと、
1 2 3 4 5 6 7 8 | <?php // ① global $wpdb; // ② $provider_array = $wpdb->get_col("SELECT id FROM 'wp_amelia_users' WHERE type = 'provider' "); ?> |
① global $wpdb; でグローバル変数 $wpdb を呼び出します。
② $provider_array = $wpdb->get_col(“SELECT id FROM ‘wp_amelia_users’ WHERE type = ‘provider’ “); では、
テーブル : wp_amelia_users の中から type が provider(従業員) に振り分けられたユーザーの id を取得しています。
該当する id はすべて配列で $provider_array に入ります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | ・ ・ // ③ foreach ($provider_array as $provider_id) : // 画像のURL $img_url = $wpdb->get_var("SELECT pictureFullPath FROM 'wp_amelia_users' WHERE id = $provider_id "); // 名前 $first_name = $wpdb->get_var("SELECT firstName FROM 'wp_amelia_users' WHERE id = $provider_id "); $last_name = $wpdb->get_var("SELECT lastName FROM 'wp_amelia_users' WHERE id = $provider_id "); ?> // ループさせたいコンテンツ <div class="box"> // ④ <div class="img"><img src="<?php echo $img_url; ?>" alt=""></div> <p class="name"><?php echo $first_name . ' ' . $last_name; ?></p> </div> <?php endforeach; ?> |
③ $provider_array を配列で回すことにより従業員の回数分ループさせることができます。
$img_url, $first_name, $last_name はそれぞれ id を指定して取得しています。
④ 出力はシンプルに ‘echo’ で問題ありません。
非表示に設定した従業員を表示させたくない場合は、先ほどの従業員のループ内に数行追加することで解決します。
1 2 3 4 5 6 7 8 9 10 11 12 | ・ ・ foreach ($provider_array as $provider_id) : // 追加 $check_status = $wpdb->get_var("SELECT status FROM " . $table . " WHERE id = $provider_id "); if($check_status != 'hidden'): ?> // ループさせたいコンテンツ <?php endif; ?> <?php endforeach; ?> |
2従業員ごとの予約フォームを動的に出力させる
従業員の一覧だけでなく、「予約フォームもそれぞれ表示させたい！！」という時は、SQLの実行結果 と ショートコード を上手く組み合わせると実現できます。
記述は先ほどの従業員のループ内に追記します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | ・ ・ foreach ($provider_array as $provider_id) : // ① $get_provider_service = $wpdb->get_col("SELECT * FROM 'wp_amelia_providers_to_services' WHERE userId = $provider_id "); ?> <div class="box"> // ② <?php if(!empty($get_provider_service)): ?> // ③ <?php echo do_shortcode('[ameliabooking category=1 employee=' . $provider_id . ']'); ?> <?php else: ?> <p>申し訳ございません。ただいま予約を受け付けておりません。</p> <?php endif; ?> </div> <?php endforeach; ?> |
① $get_provider_service = $wpdb->get_col(“SELECT * FROM ‘wp_amelia_providers_to_services’ WHERE userId = $provider_id “); で
従業員が担当しているサービスを取得します。
② その下のif文で $get_provider_service 内に値が入っているか判定します。
$get_provider_service 内に値が入っていない = 従業員が担当しているサービスがない と判断できますね。
③ echo do_shortcode(‘[ameliabooking category=1 employee=’ . $provider_id . ‘]’); でフォームを出力させます。
WooCommerce
最後にWooCommerceを経由した決済の設定方法を紹介します。
こちらは有料版のAmeliaでのみ設定が可能となっていますので、ご注意いただければと思います。
インストール
まずはプラグイン : WooCommerce をインストールしてください。
初期設定については以下のブログを参考に進めてください。
WooCommerce内での登録
初期設定が完了しましたら、管理画面のサイドバーから「商品」を選択し、「新規追加」を押してください。
このような商品追加ページが表示されます。
それぞれのサービスごとに1つずつ追加してください。
① 商品名を入力します。
② オンライン予約はバーチャルな商品なので、✔を入れます。
③ 価格を入力します。（Amelia で設定した価格と必ず同じになるようにしてください）
④ 入力が完了したら、「公開」を押します。
Amelia内での登録
管理画面のサイドバー Amelia から サービスへ移動し、
それぞれのサービスをクリックします。
① タブから「設定」を選択します。
② 支払いをクリックします。
③ WooCommerce で登録したものをそれぞれ登録します。
（間違ったものを登録すると間違った料金が請求されてしまうので注意です！）
Amelia内で登録が完了できたら、決済の設定は完了です。
まとめ
いかがでしたでしょうか。
プラグイン : Amelia を導入すると簡単に予約システムを実装できます。
またWordPress側の管理画面も直感的に使用できるような仕様になっているので、ユーザーも使いやすいのではないかと思います！
カスタマイズする際にはあまり日本語の情報がなかったので、Amelia を提供している TMS-Plugins さんのサイトで検索してみるとお悩みが解決するかもしれません！（私も何度も助けられました…！）
以上、最後までお読みいただきありがとうございました！！
