施設予約システム

Puffy

今回のテーマ

  • WordPressで作ったサイト上に、野球グラウンドやテニスコードなどの施設を予約するシステムを作る

 

使うもの

プラグイン

プラグイン 説明
Attendance Manager 出勤表を管理できるプラグインです。
今回は、スタッフを各施設に見立てて使います。
予約システムモジュール Attendance Manager のカスタマイズモジュール（有料）です。
出勤表からの予約ができるようになります。
WP User Avatar ユーザーのプロフィール写真を設定するプラグインです。
各施設のアイコンとして登録します。
Real-Time Find and Replace サイト内の文字列を置換するプラグインです。
「スタッフ」の表記を「施設」に置き換えます。

その他

  • 各施設のアイコンまたは画像を用意しておきます

 

WP User Avatar のインストール

  1. WordPress管理画面から「プラグイン：新規追加」を開きます

  2. キーワード「WP User Avatar」で検索します

  3. WP User Avatar をインストールし、有効化します

 

Attendance Manager のインストール

  1. WordPress管理画面から「プラグイン：新規追加」を開きます

  2. キーワード「attmgr」で検索します

  3. Attendance Manager をインストールし、有効化します

 

有効化したときに追加されるページ

Attendance Manager を有効化すると５つのページが自動的に作られます。
以下に、施設予約サイトとしては要らないページを「×」で示しています。
それらは「下書き」（もしくはゴミ箱行き）にします。

ページ 使う
出勤管理（スタッフ用） ×
出勤管理（管理者用） ●
本日の出勤状況 ×
週間スケジュール ×
月間スケジュール ×

 

Attendance Manager のプラグイン設定

  1. WordPress管理画面から「Attendance Manager：全般」を開きます

  2. 「ポートレイト」で「アバターを使う」を選んで保存します

 

施設の登録

Attendance Manager は本来、「スタッフの出勤表」を管理するプラグインです。
ここではスタッフを各施設に見立ててユーザー登録をします。

登録にあたり、各施設ごとにメールアドレスを用意する必要がありますが、もし各施設を共通の（同一の）メールアドレスで登録したい場合は、「 Allow Multiple Accounts」 というプラグインを使えばできます。

以下、施設の登録手順です。

  1. WordPress管理画面から「ユーザー：新規追加」を開きます

  2. 「名」欄に施設名を入力します（「姓」は空欄）

  3. 「このユーザーはスタッフです」をチェックして登録します

     

  4. 同様にして、すべての施設をユーザーとして登録します

     

  5. 各ユーザー（施設）のプロフィールを編集し、プロフィール写真を登録します

     

  6. すべての施設分のプロフィール写真を登録するとこうなります

 

予約システムモジュールのインストール

予約システムモジュールは有料のカスタマイズモジュールなので、購入します。

  1. ダウンロードしたファイルを解凍します

  2. WordPressのプラグインディレクトリ（/wp-content/plugins/）に"attmgr-ext-booking"フォルダをアップロードします

  3. "ATTMGR Extension: Booking"プラグインを有効化します

 

有効化したときに追加されるページ

予約システムモジュールを有効化すると５つのページが自動的に作られます。
以下に、施設予約サイトとしては要らないページを「×」で示しています。
それらは「下書き」（もしくはゴミ箱行き）にします。

ページ 使う
出勤表（1日の出勤スタッフを表示） ×
スケジュールページ（1日のタイムテーブルを表示） ●
予約フォーム ●
キャンセルフォーム ●
予約一覧（スタッフと管理者のみアクセスできます） ●

 

各施設の利用可能な時間帯を設定

  1. 固定ページの「出勤管理（管理者用）」を開きます
    （ついでに、このページをブックマークに保存しておきます）

  2. 出勤〜退出時間を「施設の利用可能な時間」に見立てて設定します

     

  3. 利用感等な時間を設定したら、固定ページ「スケジュール」を開いて確認します

 

施設ごとの週間スケジュール

施設ごとに個別のページを作れば、それぞれの施設の予約空き状況を示すこともできます。

  1. WordPress管理画面から「投稿：新規追加」を開きます

  2. 記事タイトルにに施設名を入力します

  3. 本文欄にショートコード [attmgr_booking_weekly id="xx"] を入力します
    （id="xx"の xx は各ユーザーのID番号（整数）です）

     

  4. これは以下のように表示されます。

 

希望する時間帯を予約

  1. 一旦、WordPressからログアウトして一般の訪問者になります

  2. 固定ページ「スケジュール」を開き、予約したい開始時間のセルをクリックするか、
    または、セレクターから開始時間を選択します

     

  3. 予約フォームが開きます

     

  4. 必要事項を入力して利用時間を選択します

     

  5. 「予約する」を押すと予約手続きが完了します

  6. 予約通知メールが送信されます

     

    予約フォームと予約通知メールの中で予約対象が「スタッフ」となっているので、後ほどこれを「施設」に変えていきます。

 

予約一覧

  1. 管理者としてWordPressにログインし直します

  2. 固定ページ「予約一覧」を開きます
    （ついでに、このページもブックマークしておきます）

  3. 予約一覧が表示されます

     

  4. 予約情報の右側「×」をクリックすると「キャンセルフォーム」が開きます

     

  5. 「予約キャンセル」を押すとキャンセル手続きが完了します

  6. キャンセル通知メールが送信されます

 

「スタッフ」の表記を「施設」に置換

Attendance Manager では「スタッフ」という表記が使われています。
施設予約として使うのにあたり、「スタッフ」の表記を「施設」に置き換える必要があります。
文字列を置換するには、Real-Time Find and Replace プラグインが便利です。

 

Real-Time Find and Replace のインストール

  1. WordPress管理画面から「プラグイン：新規追加」を開きます

  2. キーワード「Real-Time Find and Replace」で検索します

  3. Real-Time Find and Replace をインストールし、有効化します

     

  4. WordPress管理画面から「ツール：Real-Time Find and Replace」を開きます

  5. 「Add」ボタンを押して、置換条件を登録します
    「Find:」欄に「スタッフ」と入力し、「Replace with:」欄に「施設」と入力します

     

  6. 「Update settings」ボタンを押して、置換条件を保存します

  7. 「予約一覧」や「予約フォーム」を確認すると、「スタッフ」が「施設」に変わっています

 

通知メール本文の変更

予約通知メールの本文にも「スタッフ」という表記が入っています。
こちらは、直接編集できるので「スタッフ」の箇所を「施設」に変更します。

  1. WordPress管理画面から「Attendance Manager：予約システム」を開きます

  2. 上部のタブのうち「メール」タブを開きます

  3. すべての通知文の「スタッフ」の表記を「施設」に変更します

    例）予約通知

    %USER_NAME% 様
     
    予約を受け付けました。
    [予約ID] %BOOKING_ID%
    [施設] %ROOM_NAME%
    [日時] %DATE% %TIME%
    [利用時間] %USING_TIME%
    [メッセージ]
    %MESSAGE%
     
    (Received: %SEND_TIME%)
     
    キャンセルする場合は、以下のURLからお申込みください。 開始時刻の%CANCEL_DEADLINE%まで
    %CANCEL_URL%
     

  4. 下段の「更新」を押して設定を保存します

 

仕上げ

訪問者が見ることのできるサイトのメニュー（あるいはナビ、サイトマップなど）に載せるべきリンクは、

  • 「スケジュール」ページ
  • 「予約フォーム」ページ

サイトのメニューには載せず、ブックマークしておくべきリンクは、

  • 「出勤管理（管理者用）」ページ
  • 「予約一覧」ページ

 

参考にした記事