WordPressに予約カレンダーを設置できる「STORES予約」
WordPressで制作中のサイトに予約システムを組み込む場合、プラグインを使う方法と外部サービスを利用する方法があります。プラグインを使う方法はこのサイトでも紹介したMTS Simple Booking Cプラグインなどがあります。
ここでは外部の予約サービスとしてSTORES予約を使って予約カレンダーを WordPress の固定ページに表示する方法を紹介します。
「STORES予約」はショッピングサイトを構築できるサイト「STORES(ストアーズ)」が提供する予約システム作成サイトです。(旧サイト名:Coubic)
この記事の内容
「STORES予約」による予約カレンダーの作成
まずは、以下の「STORES予約」にアクセスして「無料で試してみる」をクリックします。
![STORES予約の無料試用](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_14-51-53.png)
IDやメールアドレスなどを入力してユーザー登録します。
IDはURLの一部に使われ、後から変更できないので、それなりの文字を使いましょう。
![ユーザー登録(ID設定)](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_14-55-50.png)
完了したら2つのチェックボックスをチェックして、「無料で始める」ボタンをクリックします。
![「無料で始める」をクリック](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_15-03-03.png)
ユーザー登録の完了後、さっそく予約カレンダーを作成します。
予約タイプの選択
STORES予約では予約の用途に応じて4つの予約タイプを選べます。
- レッスン・イベントタイプ --- 決まった時間を予約してもらう
- スクールタイプ --- 特定の曜日・時刻のレッスンに生徒が在籍
- メニュー・コースタイプ --- 日時を選んで予約
- メニュー・コースタイプ (複数スタッフ登録) --- 日時・スタッフを選んで予約
ここでは決まった時間を予約してもらうレッスン・イベントタイプの例で説明します。
それには、「レッスン・イベントタイプ」の「このタイプで作成する」をクリックします。
![「このタイプで作成する」をクリック](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_15-12-01.png)
タイトル・説明文・金額の設定
タイトル・説明文・金額を入力します。たとえば、「WordPress講座/説明文/10,000円」などです。
![タイトル・説明文・金額を入力](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_15-16-53.png)
メイン画像・公開設定
メイン画像を選択、公開設定(「公開」で予約可能になる)を設定します。
![メイン画像・公開設定](https://www.nishi2002.com/wp-content/uploads/2021/01/2021-01-04_16-04-21.png)
その他のオプション設定
合わせて、次のような項目を設定することもできます。
- アンケートを実施する。
- 予約を承認制にする。
- 残席数を表示する。
- 住所を設定し、予約ページで地図を表示する。
- 会員登録を必須にする。
- サービス独自の利用規約を設定し、予約時にユーザーに合意させる。
完了後、「ページを作成する」をクリックします。
![予約ページ作成の完了](https://www.nishi2002.com/wp-content/uploads/2021/01/2020-12-23_15-20-54.png)
予約日程・定員数の設定
予約対象のスケジュール・定員を設定します。日付を追加するをクリックするか、カレンダーをドラッグして予約可能日(例:講座やセミナーの開催日)を追加することができます。
例えば12月24日の14時から16時を選択して日付を追加してみます。
![予約可能にする時間の選択](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_15-54-01.png)
定員を設定し、画面右下の「OK」ボタンをクリックすると完了です。
![定員の設定](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_15-52-04-710x274.png)
「上記の内容で、繰り返し設定する」をチェックすると、毎日・毎週・隔週の同じ時間を予約可能にできます。
![同じ時間を予約可能にする](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_15-49-32.png)
完了すると、指定日時が予約可能になります。
![指定日時が予約可能に](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_15-59-23.png)
「完了する」をクリックして決済設定に進みます。
事前決済による都度払い (クレジットカード)や当日現地払いなどを選択できます。ここでは、当日現地払いとしました。
![決済(お支払い)設定](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_16-03-20.png)
「設定する」をクリックして完了です。
作成した予約カレンダーの確認
「予約ページを見る」をクリックして、作成した予約ページを確認してみましょう。
![作成した予約ページの確認](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_16-05-20-710x209.png)
開いた予約サイトから「予約・スケジュール」をクリックします。
![「予約・スケジュール」をクリック](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_16-07-59-710x145.png)
日時を選択して「次へ」をクリックします。
![予約日時を選択](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_16-09-32.png)
名前・メールアドレス・電話番号を入力して「お支払い情報に進む」をクリックします。
![お客様情報の入力](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_16-18-58-710x658.png)
支払い情報を設定・確認して「内容確認へ進む」をクリックします。
![支払い情報の確認](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_16-20-31.png)
「予約する」をクリックすると、予約完了です。
![予約の実行](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_16-23-32.png)
問題なければ管理者および予約者に確認メールが届きます。
![予約確認メール(管理者宛て)](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_16-26-35.png)
受け付けた予約は「予約台帳」‐「予約一覧」メニューで確認できます。
![予約の確認](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_16-30-47.png)
WordPressに予約カレンダーを設置
予約ページが完成したら単体で予約システムとして使用可能な状態ですが、ここでは、カレンダーをWordPressに設置してみます。それには、予約ページ左下の「予約ボタン・カレンダーを設置」から「ネット予約はこちら」をクリックします。
カレンダーの表示方法を設定後、「下記コードをコピーして設置したい場所に貼り付けます。」のコードをコピーします。
![予約カレンダーのコードをコピー](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_18-03-07.png)
WordPressの任意のページの編集画面(ブロックエディタの場合はカスタムHTML)にペーストします。
![予約ページのHTMLをWordPressの編集画面にペースト](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_18-07-53.png)
プレビューすると、ページ内に予約カレンダーが表示されます。このカレンダーはレスポンシブ対応です。
![WordPressに予約カレンダーが表示される](https://www.nishi2002.com/wp-content/uploads/2020/12/2020-12-23_18-11-54.png)
予約希望日をクリックすると、予約サイトに移動して決済まで完了できるようになります。これで作業完了です。
以上、簡単にですが、STORES予約を使ってWordPressに予約カレンダーを設置する方法を紹介しました。興味がある方は、ぜひお試しください。