お役立ちコラム
WordPress

WordPressの予約システム「Booking Package」の使い方・宿泊施設向け予約カレンダーを作成する方法

※本記事には広告が含まれます

宿泊施設のWebサイトに予約機能を導入したい場合、WordPressを利用しているなら「Booking Package」がおすすめです。

Booking Packageは無料から利用でき、月額660円(税込)の有料版ではStripeやPayPalを使ったオンライン決済にも対応しています。

今回は、WordPressで使える宿泊予約システム「Booking Package」を使って、宿泊施設向けの予約カレンダーを作成する方法を解説します。

■管理者宛自動返信メール(予約送信時)

■管理者宛自動返信メール(予約承認時)

■予約者宛自動返信メール(予約送信時)

■予約者宛自動返信メール(予約承認時)

Booking Packageとは?

Booking Packageは無料から使えて、予約システムが作成できるWordPressプラグインです。

宿泊施設に最適な「日ごと予約」や、ヘアサロンなどにおすすめの「時間ごと予約」など、幅広い予約スタイルに対応しているのが特徴です。

■美容室やクリニック向け予約カレンダー

■ホテル向け予約カレンダー

また、iframeを使わずにHTML内へ直接要素(フォームやカレンダーなど)が挿入される仕組みのため、同一のWebサイト上で予約手続きを完結でき、デザインもCSSで調整できます。

(参考)Booking Packageの予約カレンダーのフォントやボタンをCSSで調整している例

さらに、有料版(税込660円 / 月)に契約すればオンライン決済(Stripe・PayPal)が利用できるほか、宿泊施設向けカレンダーで最低宿泊日数や最大宿泊日数の設定など、より高度な機能が追加されます。

Booking Packageのインストール方法

Booking PackageはWordPressのダッシュボード上からダウンロードできます。

「プラグイン>新規プラグインを追加」から「Booking Package」と検索し、出てきたこちらのプラグインをインストール&有効化します。

Booking Packageが正しくインストール&有効化できていると、左サイドバー上に「Booking Package」と書かれた項目が追加されます。

Booking Packageを使って宿泊施設向け予約カレンダーを作成する方法

Booking Packageを使って宿泊施設向け予約カレンダーを作成する流れは以下の通りです。

ここでは、以下のような予約カレンダーを作成しながらBooking Packageの使い方を解説していきます。

作成する予約カレンダーの仕様

  • 部屋単位での料金設定(ゲストの人数に関係なく、1部屋あたりの料金が一定)
  • 人数の追加による追加料金はなし
  • 子供のみでの予約は不可
  • 予約は承認制で運用
  • メール送信後は、送信完了ページへ自動的に遷移

■管理者宛自動返信メール(予約送信時)

■管理者宛自動返信メール(予約承認時)

■予約者宛自動返信メール(予約送信時)

■予約者宛自動返信メール(予約承認時)

STEP. 1:Booking Packageの初期設定

まずは、Booking Packageの初期設定を行いましょう。

ここで設定した内容は、これから新規で作成するカレンダーに初期設定として適用されます。

「Booking Package>一般設定」をクリックします。

そうすると、複数のタブに分かれた設定画面が表示されます。

設定

設定タブでは、予約カレンダーからフォームが送信された際に通知を受け取るメールアドレスや、送信者名などの設定を行います。

設定項目がたくさんありますが、多くの方にとって編集が必要になる(または編集する可能性がある)項目は以下の通りです。

項目名説明
一般サイト名サイト名を記載します。
メールアドレス【受信用のメールアドレス】
受信用のメールアドレスを指定します。

【送信者名】
メールの送信者名の箇所に表示される「送信者名」を指定します。「○○旅館」など、受信者にわかりやすい名称を設定します。

【送信用メールアドレス】
自動返信メールの送信用メールアドレスを指定します。
基本的にはサイトのドメインと同じドメインのメールアドレスを設定することをおすすめします。(迷惑メールに振り分けられる可能性を低減できるため。)
あわせてレンタルサーバー側でもそのメールアドレスを発行しておきましょう。

例)test-ryokan.com ・・・ info@test-ryokan.comなど。
国を設定します。
通貨通貨を設定します。
タイムゾーンの初期値タイムゾーンを設定します。
日付フォーマット日付フォーマットを設定します。
時刻フォーマット時刻フォーマットを設定します。
日付と時間のポジション予約時に表示される日付と時間の位置関係(時間 – 日付 or 日付 – 時間)を指定します。
曜日の位置予約時に表示される曜日の位置関係(日付の前 or 日付の後)を指定します。
予約の自動承認予約時に自動承認するかどうかを設定します。(デフォルト自動承認オフ)

今回は、予約が行われた後に管理者が内容を確認してから承認するフローを採用したいため、自動承認はオフのままにしておきましょう。

なお、有料版を利用されている場合は、StripeやPayPalとの連携設定もこのタブで行います。

定休日

定休日タブでは、定休日を設定します。

ここで設定した日は、カレンダー上で赤色で表示され、ユーザー画面で予約を受け付けない日として扱われます。

特定の日を定休日にしたい場合は、カレンダー上で定休日にしたい日をクリックします。

祝日

祝日タブでは、祝日を設定します。

有料版をご利用の場合、ここで設定した祝日およびその前日に限り、料金を変更できるようになります。

ブロックリスト(有料機能)

ブロックリストタブでは、繰り返しスパム目的で予約を行うユーザーのメールアドレスを登録し、以後そのユーザーからの予約を自動的に拒否することができます。

ユーザー(有料機能)

ユーザータブでは、ユーザー登録を有効にして未登録ユーザーからの予約を拒否したり、登録ユーザーに関する各種設定を行うことができます。

Sync

Syncタブでは、iCalendarの有効化設定を行うことができます。

この機能を利用すると、Booking Packageで管理している予約情報をGoogleカレンダーなどの外部カレンダーと同期させることが可能になります。

CSS / JavaScript(有料機能)

CSS / JavaScriptタブでは、Booking Packageの管理画面からCSS、JavaScriptコードを編集できます。

なお、JavaScriptコードの編集機能は有料版ユーザーのみが利用可能です。

STEP. 2:宿泊予約カレンダーの新規作成・初期設定

Booking Packageの初期設定ができたら、宿泊予約カレンダーを作成していきます。

Booking Packageでは、部屋ごとに個別のカレンダーを作成する必要があります。

たとえば「和室」「洋室」「スイートルーム」など、各部屋で予約を別々に管理したい場合は、それぞれに対応する専用カレンダーを用意します。

「Booking Package>カレンダーアカウント」をクリックします。

「予約カレンダーを追加」をクリックします。

今回は宿泊施設の予約カレンダーを作成したいので、「宿泊の予約」をクリックします。

そうすると、カレンダーの設定画面が表示されるので、下記の項目を一つずつ入力して「保存」をクリックします。

項目説明
名前カレンダーの名前を設定します。

「4人部屋(和室)」など、どの部屋を管理するカレンダーか分かりやすい名称を付けましょう。
メールアドレス【受信用のメールアドレス】
受信用のメールアドレスを指定します。

【送信者名】
メールの送信者名の箇所に表示される「送信者名」を指定します。「○○旅館」など、受信者にわかりやすい名称を設定します。

【送信用メールアドレス】
自動返信メールの送信用メールアドレスを指定します。
基本的にはサイトのドメインと同じドメインのメールアドレスを設定することをおすすめします。(迷惑メールに振り分けられる可能性を低減できるため。)
あわせてレンタルサーバー側でもそのメールアドレスを発行しておきましょう。

例)test-ryokan.com ・・・ info@test-ryokan.comなど。
カレンダーのステータスカレンダーのステータスを設定します。

「有効」にチェックを入れましょう。
本日からの予約可能日数本日からの予約可能日数を設定します。
本日から予約不可にする日数本日から予約不可にする日数を設定します。
「1」と設定すると、前日まで予約が可能になります。
他のカレンダーの利用可能な時間枠を共有(有料機能)Booking Packageで作成した他の予約カレンダーと時間枠を共有できます。
タイムゾーンタイムゾーンを設定します。
週の始まりカレンダーの週の始まりとなる曜日を指定します。
予約認証コードを送信(有料機能)予約を確定する前に認証コードが送信され、そのコードを入力して手続きを完了させる機能です。
不正な予約を防ぎ、実際に本人が予約を行っていることを確認できるようになります。
支払い方法支払い方法を設定します。無料版では、「現地で支払う」のみ利用できます。
料金曜日、祝日の前日(有料機能)、祝日(有料機能)ごとに料金を設定できます。

本例では、全曜日「5,000円」に設定します。
最低宿泊日数(有料機能)最低宿泊日数が設定できます。
最大宿泊日数(有料機能)最大宿泊日数が設定できます。
利用可能な部屋数利用可能な部屋数を設定します。
1部屋あたりの最大宿泊人数1部屋あたりの最大宿泊人数を設定します。
4人部屋であれば「4」としておきましょう。
最大宿泊者数に子供を含める最大宿泊人数に子供を含めるかどうかを設定します。
本例では「含める」としておきます。
合計滞在期間の表示形式合計滞在期間の表示形式を設定します。
到着/出発の表示形式到着/出発の表示形式を設定します。
カレンダーに残りの枠数を表示カレンダーに残りの枠数を表示するかどうかを設定します。
「数字で表示」とすると、残りの利用可能な部屋数が表示されます。
「テキスト/記号で表示」を選択すると、残り枠数がしきい値で設定した数値を超えたり下回った場合に、指定したテキストや記号が設定した色で表示されます。

本例では、「テキスト/記号で表示」を選択し、以下のように設定しておきましょう。
【しきい値を超える場合】テキスト:〇 カラーコード:#dd3333
【しきい値を下回る場合】テキスト:△ カラーコード:#eeee22
【空き枠がない場合】テキスト:× カラーコード:#666666
カレンダーの固定選択した年・月のカレンダーを固定表示したい場合は、「有効化」にチェックを入れます。
通常の運用ではチェックを入れる必要はありません。
完了ページの前に予約確認ページを挿入(有料機能)完了ページの前に予約確認ページを挿入できます。
リマインダー通知時間(有料機能)設定した時間前に、予約者へリマインダー通知を送信する機能です。
「予約済み顧客」画面にキャンセルされた予約の詳細を残す予約がキャンセルされた場合に、そのキャンセルに関する情報を「予約済みの顧客」画面に残すかどうか設定します。
顧客によるキャンセル(有料機能)予約客が、自動返信メール内に設置されたキャンセルリンクから自身の予約をキャンセルできるように設定できます。
各ステップにカスタムページを挿入予約ステップにおいて独自のカスタムページを表示することができます。
予約完了後に任意のページに移動予約完了時に独自の予約完了ページを表示することができます。

本例では、予約完了後に任意のページにジャンプさせたいので、後から専用の予約完了ページを用意してから設定を行います。

これで、新たにカレンダーが追加されました。

追加されたカレンダーをクリックすると、「Booking Package > 一般設定」画面と同様に、複数のタブに分かれた設定画面が表示されます。

スケジュール

スケジュールタブでは、日ごとに部屋の料金(Rates)や総部屋数、残りの部屋の数を変更したりできます。

変更したい場合は、カレンダーから対象の日/期間を選択し、画面左上の「編集」から変更できます。

定休日

定休日タブでは、現在編集中のカレンダーにのみ適用される定休日を設定できます。

なお、「Booking Package > 一般設定」で設定した定休日は、すべてのカレンダーに共通して適用されます。

入力フィールド

入力フィールドタブでは、実際にユーザーがカレンダー上で予約を行う際に表示される、個人情報入力フォームの各項目を設定できます。

詳しい設定方法は、後ほどの「STEP. 3:入力フィールドを編集する」で解説します。

ゲスト

ゲストタブでは、予約時に大人・子どもの人数を何人まで選択できるようにするか、またゲストの追加ごとに追加料金を加算するかどうかなどの設定を行えます。

詳しい設定方法は、「STEP. 4:ゲストを編集する」にて解説します。

オプション(有料機能)

オプションタブでは、朝食や送迎など、宿泊料金とは別に発生するオプション料金を設定できます。

追加料金 | 税金(有料機能)

「追加料金 | 税金」タブでは、宿泊料金やゲストごとの追加料金を合計した金額に対して、一定の税金を課したり、追加費用を設定したりできます。

通知

通知タブでは、宿泊予約時や予約承認時などのタイミングで送信される自動返信メールの内容を設定できます。

詳しい設定方法は、「STEP. 5:自動返信メールの内容を編集する」にて解説します。

Sync

Syncタブでは、現在編集中のカレンダーに対して、iCalendarの有効化設定を行うことができます。

この機能を利用すると、Booking Packageで管理している予約情報をGoogleカレンダーなどの外部カレンダーと同期させることが可能になります。

カスタマイズ

カスタマイズタブでは、予約フォームに表示されるラベルの文字列や、各種ボタンのデザインをコードで変更できます。

今回は、どちらもデフォルトのOFFのままにしておきます。

設定

設定タブでは、カレンダーの新規作成時に設定した設定項目の変更等が行えます。

なお、「部屋の料金」や「利用可能な総部屋数」を後から変更しても、設定タブでの変更内容は、すでに公開されているスケジュールには反映されません。

すでに公開されているスケジュールを変更するには、スケジュールタブから該当する日に保存されている値を調整する必要があるので、注意しましょう。

STEP. 3:入力フィールドの編集

続いて、入力フィールドを編集していきましょう。

デフォルトでは、「名」「姓」「メール」「電話」「住所」「利用規約」の6項目が表示されるようになっていますが、本例では「名前」「名前(カナ)」「メール」「電話」「利用規約」の5項目が表示されるように変更します。

「新規項目を追加」をクリックします。

そうすると、いくつか項目が表示されます。

今回は、名前入力欄を追加したいので、それぞれ以下のように設定します。

項目内容
ユニークID固有の値を半角英数字で入力します。
この値は、後ほど自動返信メール内で入力内容を取得する際に使用されます。

本例の設定値:name_kanji
名前入力フォームのラベル名を入力します。

本例の設定値:名前
URLURLを設定すると、項目名がクリック可能なリンクとして表示されます。

本例の設定値:空欄
プレースホルダーテキスト記載例として表示されるプレースホルダーテキストを設定します。
ここで設定したテキストは、実際にユーザーが入力を開始すると自動的に消えます。

本例の設定値:空欄
説明項目に関する説明を表示したい場合に入力します。

本例の設定値:空欄
状態「有効」にチェックを入れると、入力フォームに表示されます。

本例の設定値:有効
必須必須項目にするかを設定します。

本例の設定値:はい-フロントエイドとダッシュボード
名前フィールドとして使用本例の設定値:はい
メールフィールドとして使用本例の設定値:いいえ
SMSフィールドとして使用本例の設定値:いいえ
場所フィールドとして使用本例の設定値:いいえ
合意 (利用規約/プライバシーポリシー)フィールドとして使用本例の設定値:いいえ
ユーザーが入力した値を保存本例の設定値:はい
ターゲット本例の設定値:顧客とユーザー
タイプ入力項目の種類を「TEXT」「SELECT」「CHECK」「RADIO」「TEXTAREA」から選択します。

本例の設定値:TEXT

同様に名前(カナ)入力欄を作成します。

ユニークIDと名前のみを設定し、それぞれ「name_kana」「名前(カナ)」とし、その他の設定は名前入力欄と同様の状態で追加します。

追加できたら、不要な項目を「削除」し、「名前」「名前(カナ)」を一番上に移動させます。

以下の動画では、入力フィールドの順番を変更していませんが、変更したい場合は左側の矢印キーをクリックし、順番変更後に「変更した順位を保存」をクリックします。

また、利用規約をクリックすると、利用規約ページに飛ぶように設定したいため、利用規約の入力フィールドを編集し「URL」に利用規約ページへのURLを入力します。

加えて「説明」欄に「利用規約をクリックして確認の上、同意するにチェックを入れてください。」と記載します。

以上で、入力フィールドの設定ができました。

STEP. 4:ゲストの編集

続いて、ゲストの設定画面の編集をします。

デフォルトでは、「Number of adults」「Number of children」の2項目が追加されています。

まずは「Number of adults」を編集します。

名前を「大人(中学生以上)」に変更します。

また、「オプション」の設定がセレクトボックスの選択肢として表示されます。

今回は、大人は最大4名まで予約できるようにしたいため、以下のように変更します。

「追加料金」は0と設定していますが、ここに具体的な金額を入力すると、ゲストが増えるごとに部屋料金にその金額が加算されるようになります。

同様に、「Number of children」の方も編集します。

子どもの場合は、子どものみでの予約ができない(大人の選択を必須としている)ため、大人が少なくとも1名いることを前提に、オプション人数は最大3名までとしておきます。

これでゲストの設定ができました。

STEP. 5:自動返信メールの内容の編集

次に、自動返信メールの内容を編集しましょう。

自動返信メールは「通知」タブから変更できます。

新規予約時のメール内容設定

カレンダーからの新規予約があった際のメール本文は、「新規」から設定します。

「新規」をクリックすると、以下の画面が表示されます。

「顧客向け」「管理者向け」のメール本文は、それぞれ上のタブから切り替えられます。

本例では、顧客向けには以下のメールを送信することとします。

顧客向けメールは、入力フィールド作成時に「メールフィールドとして使用」を選択した項目に入力されたメールアドレス宛てに送信されます。

メール件名:
【テスト旅館】宿泊予約を承りました

メール本文:
[name_kanji]様
ご予約ID:[id]

このたびは、テスト旅館の宿泊予約をご利用いただき、誠にありがとうございます。

以下の内容でご予約のお申し込みを受け付けました。
ご予約内容に問題がないことを確認でき次第、正式な予約確定メールをお送りいたします。

■氏名:[name_kanji]
■氏名(カナ):[name_kana]
■メールアドレス::[email]
■電話番号:[phone]
■利用規約:[terms]

チェックイン日時:[checkIn]
チェックアウト日時:[checkOut]
ゲスト:[guests]
支払い方法:[paymentMethod]
合計金額:[totalAmount]

なお、内容に不明な点などがございました場合は、こちらからご連絡を差し上げることがございますので、あらかじめご了承ください。

翌日になっても予約確定メールが届かない場合は、お手数をおかけいたしますが、ご連絡くださいますようお願い申し上げます。

==============================
テスト旅館
TEL: 0120-XXX-XXXX
E-Mail: info@〇〇〇〇.com
ホームページ: https://〇〇〇〇.com/
==============================

本文内で[name_kanji]や[name_kana]といったショートコードを使用していますが、これは「STEP. 3:入力フィールドの編集」の入力フィールド作成時に設定したユニークIDの値です。

その他、使用できるショートコードは画面の右側で確認できます。

続けて、管理者向けには以下のメールを送信することとします。

メール件名:
【テスト旅館】宿泊のご予約がありました

メール本文:
テスト旅館の宿泊のご予約がありました。
内容を確認の上、予約の承認手続きを行って下さい。

■氏名:[name_kanji]
■氏名(カナ):[name_kana]
■メールアドレス::[email]
■電話番号:[phone]
■利用規約:[terms]

チェックイン日時:[checkIn]
チェックアウト日時:[checkOut]
ゲスト:[guests]
支払い方法:[paymentMethod]
合計金額:[totalAmount][name_kana]

予約承認時のメール内容設定

本例では、新規予約後に管理者が承認を行って予約を完了させるフローで運用したいため、予約承認時にメールが送信されるように設定します。

予約承認時のメール本文は、「承認済み」から設定します。

デフォルトでは、承認時に通知が行われない設定になっているため、「通知」箇所で「メール」にチェックを入れてから保存します。

なお、顧客向けには以下のメールを送信することとします。

メール件名:
【テスト旅館】宿泊予約確定のお知らせ

メール本文:
[name_kanji]様
ご予約ID:[id]

このたびは、テスト旅館の宿泊予約をご利用いただき、誠にありがとうございます。

以下の内容にて、ご予約が確定いたしましたのでご案内申し上げます。

■氏名:[name_kanji]
■氏名(カナ):[name_kana]
■メールアドレス::[email]
■電話番号:[phone]
■利用規約:[terms]

チェックイン日時:[checkIn]
チェックアウト日時:[checkOut]
ゲスト:[guests]
支払い方法:[paymentMethod]
合計金額:[totalAmount]

[name_kanji]様のお越しを、スタッフ一同心よりお待ちしております。

==============================
テスト旅館
TEL: 0120-XXX-XXXX
E-Mail: info@〇〇〇〇.com
ホームページ: https://〇〇〇〇.com/
==============================

管理者向けには以下のメールを送信することとします。

メール件名:
【テスト旅館】宿泊予約確定のお知らせを送信しました

メール本文:
下記の宿泊予約を承認し、予約者へ予約確定メールを送信いたしました。

改めて下記の内容をご確認下さい。

■氏名:[name_kanji]
■氏名(カナ):[name_kana]
■メールアドレス::[email]
■電話番号:[phone]
■利用規約:[terms]

チェックイン日時:[checkIn]
チェックアウト日時:[checkOut]
ゲスト:[guests]
支払い方法:[paymentMethod]
合計金額:[totalAmount]

STEP. 6:予約完了後に任意のページに移動させる設定

デフォルトでは予約完了後は、Booking Packageであらかじめ用意されている予約完了画面が表示されます。

これを独自に用意した固定ページに変えたい場合は、「設定」タブを開きます。

下にスクロールしたところにある「予約完了後に任意のページに移動」箇所で、「URL」にチェックを入れ、予約完了後に表示させたい固定ページのURLを入力します。

これで、予約完了時に設定した固定ページを表示させることができます。

STEP. 7:任意のページへのカレンダーの埋め込み

ここまでできたら最後に、任意のページへカレンダーを埋め込みます。

カレンダーの埋め込みには「Booking Package>カレンダーアカウント」画面に記載のショートコードを使用します。

予約カレンダーを表示したい固定ページを開き、ショートコードブロックを使ってカレンダー用ショートコードを貼り付けます。

これでカレンダーを表示させることができました。

カレンダーが表示できたら、テスト予約を行なってうまく動作しているか確認してみましょう。

フォームを送信して、以下のように顧客と管理者の両方にメールが送信されればOKです。

■管理者宛自動返信メール(予約送信時)

■予約者宛自動返信メール(予約送信時)

予約を承認する方法

予約リクエストを承認するには、「Booking Package>予約済みの顧客」をクリックします。

カレンダーの予約があった日程を見ると赤文字で数字が記載されているので、こちらをクリックします。

予約者の名前をクリックします。

状態(承認待ち)をクリックします。

「承認済み」をクリックします。

「顧客と管理者にメールを送信しますか?」と表示されるので、「はい」をクリックします。

これで予約リクエストを承認できました。予約リクエストが承認されると、承認メールが顧客と管理者に送信されます。

■管理者宛自動返信メール(予約承認時)

■予約者宛自動返信メール(予約承認時)

なお、すでに予約を完了した顧客から後日お電話などでキャンセルがあった場合、無料版のBooking Packageでは、同様の操作画面から該当予約のステータスを「キャンセル済み」に変更して対応します。

こうすることで、同じ日程をほかの顧客が予約できるようになります。

まとめ

今回は、無料で使えるWordPressの予約システム「Booking Package」の使い方・設定方法を解説しました。

無料版では、StripeやPayPalを利用したオンライン決済ができないなど一部の機能に制限がありますが、基本的な予約受付や管理を行うには十分に活用できます。

また、有料版を導入した場合でも月額660円(税込)と手頃な価格で利用できます。

小規模な旅館サイトや民泊サイトなど、コストを抑えてオンライン予約機能を導入したい場合には特におすすめなので、ご興味を持たれた方はぜひBooking Packageの導入をご検討ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。

HOMEお役立ちコラムWordPressWordPressの予約システム「Booking Package」の使い方・宿泊施設向け予約カレンダーを作成する方法