WordPressに予約カレンダーを設置できる「STORES予約」

WordPress個別サポート

WordPressで制作中のサイトに予約システムを組み込む場合、プラグインを使う方法と外部サービスを利用する方法があります。プラグインを使う方法はこのサイトでも紹介したMTS Simple Booking Cプラグインなどがあります。

ここでは外部の予約サービスとしてSTORES予約を使って予約カレンダーを WordPress の固定ページに表示する方法を紹介します。

「STORES予約」はショッピングサイトを構築できるサイト「STORES(ストアーズ)」が提供する予約システム作成サイトです。(旧サイト名:Coubic)

スポンサーリンク

「STORES予約」による予約カレンダーの作成

まずは、以下の「STORES予約」にアクセスして「無料で試してみる」をクリックします。

予約システム STORES 予約

STORES予約の無料試用
STORES予約の無料試用

IDやメールアドレスなどを入力してユーザー登録します。

IDはURLの一部に使われ、後から変更できないので、それなりの文字を使いましょう。

ユーザー登録(ID設定)
ユーザー登録(ID設定)

完了したら2つのチェックボックスをチェックして、「無料で始める」ボタンをクリックします。

「無料で始める」をクリック
「無料で始める」をクリック

ユーザー登録の完了後、さっそく予約カレンダーを作成します。

予約タイプの選択

STORES予約では予約の用途に応じて4つの予約タイプを選べます。

4つの予約タイプ
  • レッスン・イベントタイプ --- 決まった時間を予約してもらう
  • スクールタイプ --- 特定の曜日・時刻のレッスンに生徒が在籍
  • メニュー・コースタイプ --- 日時を選んで予約
  • メニュー・コースタイプ (複数スタッフ登録) --- 日時・スタッフを選んで予約

ここでは決まった時間を予約してもらうレッスン・イベントタイプの例で説明します。

それには、「レッスン・イベントタイプ」の「このタイプで作成する」をクリックします。

「このタイプで作成する」をクリック
「このタイプで作成する」をクリック

タイトル・説明文・金額の設定

タイトル・説明文・金額を入力します。たとえば、「WordPress講座/説明文/10,000円」などです。

タイトル・説明文・金額を入力
タイトル・説明文・金額を入力

メイン画像・公開設定

メイン画像を選択、公開設定(「公開」で予約可能になる)を設定します。

メイン画像・公開設定
メイン画像・公開設定

その他のオプション設定

合わせて、次のような項目を設定することもできます。

  • アンケートを実施する。
  • 予約を承認制にする。
  • 残席数を表示する。
  • 住所を設定し、予約ページで地図を表示する。
  • 会員登録を必須にする。
  • サービス独自の利用規約を設定し、予約時にユーザーに合意させる。

完了後、「ページを作成する」をクリックします。

予約ページ作成の完了
予約ページ作成の完了

予約日程・定員数の設定

予約対象のスケジュール・定員を設定します。日付を追加するをクリックするか、カレンダーをドラッグして予約可能日(例:講座やセミナーの開催日)を追加することができます。

例えば12月24日の14時から16時を選択して日付を追加してみます。

予約可能にする時間の選択
予約可能にする時間の選択

定員を設定し、画面右下の「OK」ボタンをクリックすると完了です。

定員の設定
定員の設定

「上記の内容で、繰り返し設定する」をチェックすると、毎日・毎週・隔週の同じ時間を予約可能にできます。

同じ時間を予約可能にする
他の日も同じ時間を予約可能にする

完了すると、指定日時が予約可能になります。

指定日時が予約可能に
指定日時が予約可能に

「完了する」をクリックして決済設定に進みます。

事前決済による都度払い (クレジットカード)や当日現地払いなどを選択できます。ここでは、当日現地払いとしました。

決済(お支払い)設定
決済(お支払い)設定

「設定する」をクリックして完了です。

作成した予約カレンダーの確認

「予約ページを見る」をクリックして、作成した予約ページを確認してみましょう。

作成した予約ページの確認
作成した予約ページの確認

開いた予約サイトから「予約・スケジュール」をクリックします。

「予約・スケジュール」をクリック
「予約・スケジュール」をクリック

日時を選択して「次へ」をクリックします。

予約日時を選択
予約日時を選択

名前・メールアドレス・電話番号を入力して「お支払い情報に進む」をクリックします。

お客様情報の入力
お客様情報の入力

支払い情報を設定・確認して「内容確認へ進む」をクリックします。

支払い情報の確認
支払い情報の確認

「予約する」をクリックすると、予約完了です。

予約の実行
予約の実行

問題なければ管理者および予約者に確認メールが届きます。

予約確認メール(管理者宛て)
予約確認メール(管理者宛て)

受け付けた予約は「予約台帳」‐「予約一覧」メニューで確認できます。

予約の確認
予約の確認

WordPressに予約カレンダーを設置

予約ページが完成したら単体で予約システムとして使用可能な状態ですが、ここでは、カレンダーをWordPressに設置してみます。それには、予約ページ左下の「予約ボタン・カレンダーを設置」から「ネット予約はこちら」をクリックします。

STORES予約とWordPressを連携するには、予約カレンダーの他に「予約する」ボタンや予約バナーを設置する方法もあります。

カレンダーの表示方法を設定後、「下記コードをコピーして設置したい場所に貼り付けます。」のコードをコピーします。

予約カレンダーのコードをコピー
予約カレンダーのコードをコピー

WordPressの任意のページの編集画面(ブロックエディタの場合はカスタムHTML)にペーストします。

予約ページのHTMLをWordPressの編集画面にペースト
予約ページのHTMLをWordPressの編集画面にペースト

プレビューすると、ページ内に予約カレンダーが表示されます。このカレンダーはレスポンシブ対応です。

WordPressに予約カレンダーが表示される
WordPressに予約カレンダーが表示される

予約希望日をクリックすると、予約サイトに移動して決済まで完了できるようになります。これで作業完了です。

以上、簡単にですが、STORES予約を使ってWordPressに予約カレンダーを設置する方法を紹介しました。興味がある方は、ぜひお試しください。

WordPressの使い方