絞れば、出てくる、アイディア。

ワードプレスで予約機能を追加する方法【プラグインで簡単】

ワードプレスで予約システムを追加する方法
【Appointment Hour Bookingの使い方】

飲食店や美容室、スクールの予約などに必要な予約機能をワードプレスに追加することができます!
今回の記事では、ワードプレスに予約機能を追加することができるプラグイン「Appointment Hour Booking(アポイントメント・アワー・ブッキング」をご紹介します。
特徴や使い方も詳しく解説しますので、ワードプレスの予約機能プラグインを探されている方はぜひ参考にしてみてください!

1. Appointment Hour Bookingの特徴

「Appointment Hour Booking(アポイントメント・アワー・ブッキング)」は、日付と時間を指定して予約を受け付けるシンプルで使いやすいWordPressプラグインです。
特に中小規模のビジネスや個人サービスに適していて、手軽にオンライン予約システムを作成できるのが特徴です。

Appointment Hour Booking 公式サイト:https://apphourbooking.dwbooster.com/

機能・特徴無料版でできること無料版ではできないこと
予約フォームの作成   日付と時間を指定できる予約フォームを作成複数スタッフや複数サービスごとの予約フォーム作成
営業日・営業時間の設定営業日と営業時間を簡単に設定複雑なスケジュール設定(例: 特定曜日のみ異なる時間など)
カレンダー機能予約情報をカレンダー表示で管理      Googleカレンダーとの同期
リマインダー通知対応不可有料版のみ対応

Appointment Hour Bookingには無料版有料版の2つのバージョンがあります。
有料版には無料版では出来ない機能も何点かありますが、無料版でも十分な機能が搭載されています。

無料版でも「カレンダーでの日時の設定」「フォームのカスタマイズ」「確認メールの送信」など予約システムに必要な機能は十分揃っていて、設定もシンプルでとても使いやすいプラグインです。

今回は例として、「無料相談会」の予約受付ページを作成します。 ショートコードを使ってワードプレスに簡単に設定することができます。

↑今回は例として、「無料相談会」の予約受付ページを作成します。
上記のようなページをショートコードを使ってワードプレスに簡単に設定することができます。

2. Appointment Hour Bookingの使い方

ここからは実際に「Appointment Hour Booking」使い方について解説していきます!

プラグインのインストールとフォームの設定

ワードプレスのダッシュボードから「プラグイン」→「新規プラグインを追加」を選択し、「プラグインの検索」で「appointment」と入力します。

↑ワードプレスのダッシュボードから「プラグイン」「新規プラグインを追加」を選択し、「プラグインの検索」で「appointment」と入力します。

「Appointment Hour Booking」は、黒地に緑のチェックマークのアイコンが目印です。
「今すぐインストール」をクリックしてプラグインをインストールし、その後「有効化」をクリックします。

プラグインを有効化すると、ワードプレスのメニューに「Appointment Hour Booking」が表示されます。ここをクリックして「新規カレンダー」に名前を入力します。

↑プラグインを有効化すると、ワードプレスのメニューに「Appointment Hour Booking」が表示されます。ここをクリックして「新規カレンダー」に名前を入力します。

「フォーム名」にも名前を入力し、「編集」をクリックします。

「フォーム名」にも名前を入力し、「編集」をクリックします。

フォームの設定を行なっていきます。 設定画面は画面左側に設定できる機能(要素)、画面右側に実際のフォームに設定されているものが表示されています。

フォームの設定を行なっていきます。
設定画面は画面左側に設定できる機能(要素)、画面右側に実際のフォームに設定されているものが表示されています。カレンダーとEmailの入力欄はデフォルトで設定されています。

氏名や電話番号、お問合せ内容といった項目は項目として用意されていないので、「Single Line」というものを使って設定していきます。

氏名や電話番号、お問合せ内容といった項目は項目として用意されていないので、「Single Line」というものを使って設定していきます。

「Single Line」を設定したら、画面上部のタブを「フィールド設定」に変更します。 「Field Label」に「氏名」と入力し、項目を必須にする場合は「Required」にチェックを入れます。

「Single Line」を設定したら、画面上部のタブを「フィールド設定」に変更します。
「Field Label」「氏名」と入力し、項目を必須にする場合は「Required」にチェックを入れます。
電話番号やその他の追加項目も同様に設定可能です。

「Single Line」ではフォームの内容に補足や説明を付け加えることもできます。 備考や相談内容などを設定する際に活用できます。

「Single Line」ではフォームの内容に補足や説明を付け加えることもできます。
備考や相談内容などを設定する際に活用できます。

内容に同意するチェックボックスは「Accept/GDPR」という項目で設置ができます。

↑内容に同意するチェックボックス「Accept/GDPR」という項目で設置ができます。

「Accept/GDPR」の項目でも項目名を設定することができます。 画面上部のタブで「フィールド設定」を選択し、「Field Label」から内容を編集できます。

「Accept/GDPR」の項目でも項目名を設定することができます。
画面上部のタブで「フィールド設定」を選択し、「Field Label」から内容を編集できます。

カレンダーの設定

画面右側に表示されているカレンダーを選択した状態で、「フィールド設定」を選択します。 「Field Label」と「Services」の「Name」という箇所にカレンダーの名称を入力します。

↑画面右側に表示されているカレンダーを選択した状態で、「フィールド設定」を選択します。
「Field Label」「Services」の「Name」という箇所にカレンダーの名称を入力します。

「Services」の「Duration」では相談会の実施時間を設定できます。(飲食店や美容院などサービスの時間によって設定可能です) また、「Padding time before and after」に時間を設定すると、各予約可能時間の間の時間も設定することができます。

「Services」「Duration」では相談会の実施時間を設定できます。(飲食店や美容院などサービスの時間によって設定可能です)
また、「Padding time before and after」に時間を設定すると、各予約可能時間の間の時間も設定することができます。

その下の「Open hours Default」では予約可能な日時を設定できます。
曜日別で設定できるので、定休日や休業日に合わせて設定できます。時間帯ももちろん設定可能です。

画面の下へスクロールすると、フォームを送信設定するときの文言の設定ができます。 デフォルトでは全て英語になっているので、必要に応じて日本語に設定を変更します。

↑画面の下へスクロールすると、フォームを送信設定するときの文言の設定ができます。
デフォルトでは全て英語になっているので、必要に応じて日本語に設定を変更します。

確認メールの設定

フォームが設定できたら、確認メール(予約完了後にお客様に送られるメールと管理者に送られるメール)の設定を行います。

画面上部の「③通知メール」を選択します。 「『差出人』メール(固定の「差出人」アドレスの場合)」と、「宛先メール(カンマ区切り)」の2箇所にメールアドレスを設定します。 確認メールの送信内容も同時に設定します。

↑画面上部の「③通知メール」を選択します。
「『差出人』メール(固定の「差出人」アドレスの場合)」と、「宛先メール(カンマ区切り)」の2箇所にメールアドレスを設定します。
※ここに設定するメールアドレスは「独自ドメイン」のアドレスを設定してください。gmailなどフリーメールのアドレスはスパムと判断され正しくメールが送信されない可能性があります。

独自ドメインのメールアドレス設定についてはこちら↓の記事で詳しく紹介しています!

確認メールの内容も編集可能です。
「<%INFO%>」の部分は自動でフォームの内容が表示される部分になるので消さずに残しておきます。

管理者向けとお客様向けの設定箇所が別々ですが、基本的には同じ内容で問題ありません。
デフォルトが英語になっているので、日本語に変更して「保存して戻る」をクリックしたら設定は完了です。

3. 固定ページにフォームを設置

フォームの設定、確認メールの設定が完了したら、フォームをショートコードで固定ページに設置します。

フォームの設定をした「カレンダーリスト」の画面から、設置したいフォームのショートコードをコピーします。

↑フォームの設定をした「カレンダーリスト」の画面から、設置したいフォームのショートコードをコピーします。

今回の例では「無料相談会予約ページ」という固定ページにショートコードを設置します。

↑今回の例では「無料相談会予約ページ」という固定ページにショートコードを設置します。

フォームを送信した直後に表示されるページも作成します。 「無料相談受付完了」固定ページを新規作成して公開し、URLをコピーしておきます。

↑フォームを送信した直後に表示されるページも作成します。
「無料相談受付完了」固定ページを新規作成して公開し、URLをコピーしておきます。

もう一度「Appointment Hour Booking」の設定画面から、フォームの設定をした「カレンダーリスト」の画面の「編集」をクリックし「②一般設定」の画面に入ります。 「確認 / サンクスページ」の欄に先ほどコピーした受付完了ページのURLを貼り付けて保存します。

↑もう一度「Appointment Hour Booking」の設定画面から、フォームの設定をした「カレンダーリスト」の画面の「編集」をクリックし「②一般設定」の画面に入ります。
「確認 / サンクスページ」の欄に先ほどコピーした受付完了ページのURLを貼り付けて保存します。

今回は例として、「無料相談会」の予約受付ページを作成します。 ショートコードを使ってワードプレスに簡単に設定することができます。

↑ページを保存して公開すると、予約フォームが表示されます!

予約フォームを送信すると、フォームに入力したメールアドレス(=お客様のメールアドレス)には上記のようなメールが届きます。

予約フォームを送信すると、フォームに入力したメールアドレス(=お客様のメールアドレス)には上記のようなメールが届きます。
同様のメールが、フォームの設定の際に入力した管理者のアドレスにも届きます。

申し込みの内容とスケジュールは「カレンダーリスト」の「予約注文一覧」と「スケジュール画面」から確認することができます。

申し込みの内容とスケジュール「カレンダーリスト」「予約注文一覧」「スケジュール画面」から確認することができます。

既に予約が入っている時間帯は、もちろんフォーム上でも選択出来ないようになっているので安心です!

まとめ😺

今回の記事では、無料で高機能な予約システム「Appointment Hour Booking」の特徴と使い方をご紹介しました。
無料で使えるのに、時間や日程の細かい設定はもちろん、確認メールの自動送信やスケジュール表への反映まで行ってくれるとても便利なプラグインです。

ワードプレスで作成したうぇぶサイトに予約機能を追加したいと考えている方は、ぜひ今回の記事を参考にしてみてください!

2025-02-14
Friday

weblemonの筆者

YUKINKO

20代後半のWEBマーケター&WEBデザイナー
新卒で商社に入社しWEBマーケターとして勤務後、
カナダに渡航し現地企業のWEB制作と
マーケティング支援を行う。
現在は帰国し某企業でWEBマーケターをしています。

 自分がWEBマーケター・WEBデザイナーとして
仕事をしているときに気になった事を
調べた経緯を残しておきたいなという思いと、
それを誰かのお悩み解決に
役立てることができたらいいなと思っています。

“ネコとレモンのWEBマーケ&デザインブログ”
みたいな感じで覚えてもらえたら嬉しいです😺🍋

POPULAR POST

LATEST POST