Hatena::ブログ(Diary)

Webデザインの勉強 3月22日開講クラス フェリカテクニカルアカデミー

ファリカテクニカルアカデミーWebサイト制作科募集開始


◎Webデザインの勉強 10月7日開講クラス フェリカテクニカルアカデミー◎

◎求職者支援訓練 Webデザインの勉強 | フェリカTA受講生作品紹介◎

◎Webデザインの勉強 08月05日開講クラス 風姿花伝◎

◎Webデザインの勉強 ちょっとだけプログラムの勉強◎

◎Webデザインの勉強 Webサイト制作科用授業解説と演習問題◎


2016-08-19

予約システム

時間単位で予約できる予約ページを作成

  • プラグイン「MTS Simple Booking予約システム」をインストールする

http://mtssb.mt-systems.jp/


http://mtssb.mt-systems.jp/downloadp/


予約システムの設定

f:id:web-css-design:20131211114127j:image


各種設定

  • 詳細設定をしておく

予約パラメータ

カレンダーを表示する

f:id:web-0127:20140711093210p:image


受付を作成直後からにする

f:id:web-0127:20140711093501p:image



予約受付期間

  • 当日から何ヶ月先までの予約を受け付けるかを設定します
  • 最大6ヶ月までの設定が可能です

空きマーク

  • 空きが充分にあるとき予約カレンダーに表示する文字を入力します
  • 初期設定は「○」です
  • 何も入力せずに保存すると予約残数を表示します

残数少マーク

  • 空きが少なくなったとき予約カレンダーに表示する文字を入力します
  • 初期設定は「△」です
  • 何も入力せずに保存すると予約残数を表示します

空きなしマーク

  • 空きがないとき予約カレンダーに表示する文字を入力します
  • 初期設定は「×」です

不可マーク

  • 予約不可のときに表示する文字を入力します
  • 初期設定は「−」です

空き率

  • 空きマーク「○」から残数少マーク「△」切り替えのタイミング設定を、「空き率」に%数値を入力して決めることが可能です
  • 残数がここで設定した率より少なくなると、残数少マークに切り替わります

予約カウント

  • 「大人」「小人」「幼児」「車」の4項目に対し、チェックされた項目が予約データの入力対象となります

メッセージ

  • 「入退場予定入力」の項目にチェックを入れると、予約時に入場時間と退場時間の入力欄が表示されて入力できるようになります
  • ここで入力した入退場時間は、予約通知メールの中のメッセージ項目に追加記載されます
  • 時間ごとの参加人数管理などが便利になります

変更を保存

  • クリックすると入力したデータが保存されます

施設(店舗)

f:id:web-css-design:20131211125602j:image


予約のメール

f:id:web-css-design:20131211130134j:image


f:id:web-css-design:20131211130446j:image


予約品目とスケジュールを登録

予約品目

f:id:web-css-design:20131211232918j:image


f:id:web-css-design:20131211233228j:image


スケジュール

f:id:web-css-design:20131211234109j:image


f:id:web-css-design:20131211234323j:image


予約カレンダーを作成

  • 予約の入力や予約状況を表示させるには、予約カレンダーを動作させるための決められた固定ページが3種類必要です

種類 内容 パーマリンク
予約カレンダー 動作用の固定ページ ページのタイトルは「ご予約」などと入力しておく booking-form
予約の2重登録防止用の固定ページ ページのタイトルは「ありがとうございました」などの謝辞を入力しておく booking-thanks
予約カレンダー表示用の固定ページ ページのタイトルに「予約を受け付けるサービスの名前」を入力しておく。なお、編集ページのテキストボックス内に「monthly_calendar id="xx"」のコードを添付しておく必要がある。 なし(仮にcalendarにしておく)


ご予約ページ作成
  • 新規固定ページ追加
  • パーマリンク名を「 booking-form」に変更して公開します

f:id:web-css-design:20131212111008j:image


予約品目
  • 「予約品目の一覧」から編集したいページの「編集」リンクにマウスをあわせます
  • ページ下に表示される「post=xx」 の数字の「xx」をメモしておきます

f:id:web-css-design:20131212112157j:image


[monthly_calendar id="xx"]

この記述を、「予約カレンダー表示用の固定ページ」の本文に記述します。

公開後、プレビューで「ご予約」ページを確認します。


f:id:web-0127:20140711101322p:image


  • 予約予定日をクリックし実行してみます。

f:id:web-0127:20140711101540p:image


  • 予約時間をクリックし実行してみます。
  • 予約情報を入力します。

f:id:web-0127:20140711101921p:image



f:id:web-0127:20140711102642p:image