この節はフロントエンドにおいて、車両の検索から予約フォームへ利用者を導くための、検索ページの作成について説明します。

利用する機能はVer.1.7で追加された検索、および、Ver.1.8で強化されたショートコード出力との連携です。それぞれ、検索機能は「1.7 車両の検索・表示機能」、ショートコードはリファレンスの「便利機能ショートコード」の説明をご覧ください。

フロントページの概要

Ver.1.8においてショートコード車両の検索「rental_finder」、および、車両の一覧を表示する「rental_box」と「rental_calendar」を機能強化し、多彩な検索結果を表示できるようになりました。次の図はその表示例です。

表示形式の指定

検索結果を表示する形式は「rentala_finder」のパラメータ「show」へ、表示用のショートコード(rental_box または rental_calendar)を指定します。rental_boxを利用する場合は、さらに表示タイプ(tno)を指定します。

• カレンダー表示
  検索車両の予約状況をカレンダーで表示します。「1.7 車両の検索・表示機能」ページ下部にある図の出力になります。
  showの設定値(未設定の場合はデフォルト)：rental_calendar
• 詳細一覧表示
  検索車両の画像と詳細情報を組み合わせて表示します。「rental_box その１ 車両情報編」にある図の出力になります。
  showの設定値：rental_box
  tnoの設定値(未設定の場合はデフォルト)：0
• 料金表表示
  検索車両の画像と料金設定を組み合わせて表示します。「rental_box その２ 料金編」にある図の出力になります。
  showの設定値：rental_box
  tnoの設定値：1
• フリースタイル
  独自に設定したHTMLとCSSで表示します。例えばこのページの上部のような一覧表示や、車両について詳細を掲載した一覧表示も可能です。
  showの設定値：rental_box
  tnoの設定値：2
  車両データ：紹介項目にテンプレートページを設定

フリースタイルの設定例

ここでは、検索結果を上図のような一覧表示するための設定例を説明します。

自由に表示するためには、以下の作業が必要になります。

1. テンプレートの設定
   固定ページに入力、下書き保存で登録しておきます。
2. 使用するテンプレートを設定
   車両データの「車両紹介」項目でテンプレートページを設定します。
3. rental_finderのパラメータの指定
   rental_finderに所定のパラメータを設定します。
4. その他
   CSSを利用する場合はスタイルシートに追加編集をしておきます。ここの設定例ではHTMLに直接指定しています。

１．テンプレートの設定と車両データの設定

テンプレートを固定ページに入力して下書き保存し、車両データの紹介でそのページを設定します。下書き保存するのは、公開登録することでテンプレートページが表示されないようにするためです。

固定ページでのテンプレート設定の例です。

車両データの車両紹介のテンプレート設定例です。

検索対象となる車両データの車両紹介は、すべてテンプレートページを設定してください。

２．rental_finderのパラメータ設定

以下は、検索ページにショートコードを設定した入力例です。

[rental_finder show="rental_box" tno="2" name="0" link="0"]

パラメータの「name」は車両の名称タイトルを非表示にする設定、「link」は予約ページのリンクを非表示にする設定です。

「name」や「link」パラメータを設定しない場合を試し、表示を比較するとよいでしょう。

フリースタイルを自在に扱うために

リプレースメントや詳細情報設定など、必要となる機能の解説は以下のページを参照してください。

テンプレートで使用可能なリプレースメント(%で囲った変数名)
▶ rental_boxのリプレースメント

この節は、管理画面の操作メニュー「予約リスト」に関して、予約データの絞り込み検索と検索結果をCSVファイルとしてダウンロードする機能について説明します。

絞り込み検索データのCSVファイルダウンロード機能は、Ver.1.9において追加された機能となります。それ以前のバージョンは機能がありません。

予約データの検索

予約リスト管理では予約データの検索ができます。検索項目は以下４項目の中の１つを使います。

• 貸渡日
• 返却日
• 予約日
• 車両、予約ID

日付の絞り込みは「年月」単位です。車両を特定して絞り込む検索も可能です。

また問合せなどで予約データを検索する場合は、右側のテキストボックスに予約IDを入力して検索することができます。

11桁の予約IDは上６桁が予約日付を表し、下５桁がデータベースに登録されたデータIDを表しますが、この欄にデータIDを入力して検索することも可能です。

ところで本システムでは、予約者の名前や電話番号などによる検索はできません。これは予約者のデータをまとめて暗号化登録しているためで、入力された検索データと一致することがないからです。このセキュリティ機能は、ヨーロッパにおけるGDPR対応のために実装いたしました。

検索結果のCSVファイルダウンロード

検索結果が１件以上の場合、データをCSVファイルに変換してダウンロードする事が可能な、「CSVダウンロード」ボタンが有効になります。

ダウンロードを実行すると、操作中のPCへファイルがダウンロードされるので、ファイル名を付けて保存してください。次の図は上記データのダウンロード例です。

ダウンロード可能なデータの件数について、特に件数は制限しておりません。

ただし、CSVファイルの構成でUTF-8文字をShift-JIS文字へ変換するなど、サーバーのメモリ上で全データを変換します。予約データの件数が多い場合は、処理時間やメモリサイズに影響してサーバー上で強制的に中断される可能性がありますのでご留意ください。

ダウンロードデータの設定

Ver.1.10.0以降利用の場合

Ver.1.10.0から出力項目について、管理画面の各種設定メニュー「CSV出力設定」ページから設定するようになりました。

▶ 各種設定

Ver.1.9.0利用の場合

予約データをCSV形式のデータに変換するとき、複数のデータ項目を繋げて１カラムデータに設定したり、個別にカラム分けして出力するなど出力カラムの定義ができます。この定義はConfig.phpファイルで設定していますが、変更したい場合は当該ファイルを変更する事になります。

定義データは配列データで、Config.phpファイルのcsvColumn()関数内にあります。

配列データには、カラム上部に表示するためのタイトルと、カラムに出力するデータを指定します。出力するデータの指定は、メールテンプレートで利用するリプレースメントを指定します。

▶ メールのリプレースメント一覧

なお設定する場所はPHPプログラム内ですので、変更に誤りがあるとエラーが表示されたり、画面が白くなるなど、不具合が発生しますのでご留意ください。

この節は、予約フォームにおける処理の順番と、フォーム表示でコメントを挿入する方法について説明します。なおコメントの挿入機能はVer.1.9から、となります。表示はバージョンにより内容が変わる事があります。

予約処理の進み方

予約処理はWordPressの特定の固定ページ(スラッグ名 booking-car)を利用して動作します。そして動作は以下の順番でフォーム処理を進めます。

1. レンタル期間の入力
2. 予約フォームの入力
3. フォーム入力の確認と利用規約の承認
4. 予約実行結果の表示
5. 予約の終了表示

コメントの挿入

プログラムから出力される文言は、多言語に対応するための「lang/Translation.php」ファイルの内容を書き換えることで可能です。

予約フォーム上でのコメントの挿入は上記の方法では実現できませんので、ここで予約フォーム上の各項目間にコメントを挿入したい場合の方法を説明します。

作業は予約フォームの固定ページ編集において、WordPressの「カスタムフィールド」を登録するだけです。管理画面で予約フォームの固定ページ編集において、コメントが挿入可能な位置に半角英字の決められた名前を利用し、その名前と挿入するコメント(タグ利用可能)をカスタムフィールドデータとして追加します。

以下は予約フォームの処理順に、挿入可能な位置とカスタムフィールドで設定する名前を表したもので、実際に挿入した表示例です。

設定と表示の例

以下はカスタムフィールドの設定とフォームの表示例です。

↓

実用編は、入門編、導入編、操作編を通してシステム全体を把握した後、Web上で予約サイトを構築する際の利用可能な機能について、個別に詳細な説明をします。

フロントエンドでのページ構築、あるいは管理、運用において、より役立つ内容です。

機能毎詳細な説明を掲載します。順番に読み進める必要はありませんので、必要と思われる箇所を選択して読み進めてください。