4.予約サイトの準備 | MTS BBQ Booking 資料室

「予約の処理概要」で見たように、ページで表示されるカレンダーが予約を受け付ける入り口になります。そして予約申し込みは、予約入力フォームで必要なデータを入力して送信ボタンを押します。

予約カレンダーの表示は、WordPressのショートコード機能を利用して表示する事ができます。一方、予約入力フォームや予約キャンセルの各ページは、本システムが決めた特定のページ上で処理を実行します。

この節は、Webサイトで予約システムを利用するための上記の設定を説明します。

1.特定な処理を目的とする固定ページ

本システムが処理を実行するために決めた固定ページが３つあり、それぞれ特定の名前で設定されたスラッグ名を持つ固定ページが利用されます。それは以下の通りです。

booking-form：予約入力フォーム
guest-page：予約検索フォーム
policy-page：プライバシーポリシー表示

この中で「policy-page」はプログラムの処理で利用される事はありません。予約入力フォームでチェックするプライバシーポリシーの同意項目で、その内容を表示するリンク先ページになります。

他の２つは入力処理で利用され、フォームを表示するHTMLデータがページ上に出力されます。

３つのページについて、固定ページの新規登録で各スラッグ名を設定して公開設定しておいて下さい。

2.予約カレンダーを表示するショートコード

カレンダー表示のショートコードは次のように指定します。

[booking_calendar ids="xx,yy,…"]

idsは、登録したMTSBQサイトのpost IDをカンマ区切りで指定します。

カレンダーを２カ月続けて表示したい場合、パラメータ「couple=”1″」をショートコードに追加すれば連続表示されるようになります。

3.印刷のためのテンプレートファイル

予約票を印刷するためのテンプレートとアドレスタグを印刷するためのテンプレートファイルは、プラグインディレクトリ配下で次のファイルパス名でPHPプログラムファイルとして登録されています。

予約票
mts-bbq-booking/src/MTSBbqBooking/temp/BookingTagTemplate.php
アドレスタグ
mts-bbq-booking/src/MTSBbqBooking/temp/AddressLabelTemplate.php

印刷するデータはHTMLで表しますが、２段階構造で指定します。１つは印刷ページ全体のフレーム、もう１つはその中に表示する予約データ１件分のHTMLです。

予約票のHTML

ページ全体のフレームは「htmlPage()」メソッドで指定します。

 private static function htmlPage()
 {
 return <<<EOT
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>予約票</title>
 <style type="text/css">
* {
 margin: 0;
 padding: 0;
 font-family: 'メイリオ',Meiryo,'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro';
}

.booking-block {
 padding: 0.5em;
}

.label {
 display: inline-block;
 text-align: right;
 width: 4em;
}

 </style>
</head>
<body>
%CONTENTS%
</body>
</html>

EOT;
 }

「return <<<EOT」から「EOT;」の間にHTMLソースを設定して下さい。

この中の「%CONTENTS%」指定の部分に、次の予約データを挿入します。予約データは現在１件のみの挿入ですが、将来は複数挿入する可能性があります。

さて、予約データ１件分は次の「bookingTag()」メソッドで指定します。

 private static function bookingTag()
 {
 return <<<EOT
 <div class="booking-block">
 <div class="guest-name">%SEI% %MEI% 様</div>
 <div class="booking-info"><span class="label">利用日：</span>%DATE%</div>
 <div class="booking-info"><span class="label">サイト：</span>%TITLE%</div>
 <div class="booking-info"><span class="label">番　号：</span>%NO%</div>
 <div class="booking-info"><span class="label">人　数：</span>%COUNT%</div>
 </div>

EOT;
 }

ページフレーム同様、「return <<<EOT」から「EOT;」の間へ記入します。この中ではメールのテンプレートで利用する同様の変数名が、データ出力する部分で利用できます。

アドレスタグ

手紙を送る際に利用するアドレスタグの印刷データも、予約票と同様な構造でプログラムの中に指定します。

ただしページ指定は同じメソッド名ですが、予約データ１件分のタグ出力のHTMLは「addressTag()」メソッドの中になります。

以上でスタートガイドは終了です。