無料でWordPressサイトにイベント予約機能をつける方法

はじめに

HP制作をしていると、クライアントから「イベント予約の機能をつけられますか？」
といったご要望をいただくことがあります。

今回は、WordPressのプラグインを使用して簡単にイベントを登録・管理し、カレンダー表示させる方法をご紹介します！

こんな方に見てほしい

この記事は以下のような方に読んでいただきたくて執筆しています。

完成イメージ

次項目からの流れに沿って作業していただくと、このようなカレンダー表示ができるようになります。

イベント管理プラグイン（Events Manager）を導入する

まずは「Events Manager」というプラグインを導入して、イベントを登録・管理できる機能を実装します。

「Events Manager」は無料で使用できます。
※有料版もありますが、基本的な操作を行うのみなら無料版で十分です。

プラグインをインストールする

ダッシュボードの「新規プラグインを追加」をクリックします。

①「Events Manager」と入力して検索します。
②下の画像と同じプラグインを選択し、「今すぐインストール」をクリックします。
③「有効化」をクリックします。
※似た名前のプラグインがいくつかあるので、間違えないように注意してください。

初期設定をする

次に、「Events Manager」の初期設定を行っていきます。
ここで行う設定は最低限なので、必要に応じて設定を加えていってください。

ダッシュボードの「イベント」→「設定」をクリックすると、「Events Manager」の設定画面が開きます。
設定画面はいくつかのタブに分かれています。

まずは「一般」タブからです。

「基本設定」をクリックし、開きます。
①開催国の初期値を「日本」に変更します。
②「変更を保存（すべて）」をクリックします。

次は「予約」タブです。

「価格の設定」をクリックし、開きます。
①通貨を「JPY」に変更します。
②「変更を保存（すべて）」をクリックします。

「予約フォームの設定」をクリックし、開きます。
①「ログインフォームを表示しますか？」を「いいえ」に変更します。
　「Hide form until tickets selected?」を「いいえ」に変更します。
②「変更を保存（すべて）」をクリックします

次は「メール」タブです。

「メール設定」をクリックし、開きます。
①「自動送信メールの送信者名」に表示させたい名前を入力します。
②「自動送信メールの発信者メールアドレス」に表示させたいアドレスを入力します。
③「変更を保存（すべて）」をクリックします

基本設定は以上です。

ですが、これで止めないでください！！！
この時点では設定の変更が保存されていません！！！

一番下までスクロールすると、「変更を保存」というボタンがあるのでこれをクリックしてください。
これで、変更が保存されます。
（すべてのタブの設定変更が一気に保存されます）

カレンダー表示のプラグイン（WP FullCalendar）を導入する

次は「WP FullCalendar」というプラグインを導入して、登録したイベントをカレンダーに表示できる機能を実装します。

※「Events Manager」にもイベントをカレンダー表示する機能は付いていますが、カスタマイズや細かな設定がしづらいので今回は別のプラグインを使用します。

プラグインをインストールする

ダッシュボードの「新規プラグインを追加」をクリックします。

①「WP FullCalendar」と入力して検索します。
②下の画像と同じプラグインを選択し、「今すぐインストール」をクリックします。
③「有効化」をクリックします。

初期設定をする

次に、登録したイベントをカレンダーに表示させるための初期設定を行っていきます。

①ダッシュボードの「設定」メニューの「WP FullCalendar」をクリックします。
②「イベント」をクリックします。
③「Submit Changes」をクリックします。

これでカレンダー表示のための初期設定は完了です。

④ちなみに、「jQuery CSS Theme?」を変更することでカレンダーのテーマを変更することもできます。あとで試してみてください。

カレンダーを表示させてみる

今回は、「カレンダー」という名前の固定ページを作成してそこにカレンダーを表示させてみます。

ブロックエディタでショートコードのブロックを追加し、[WP FullCalendar]と入力します。

ページを公開し、開いてみると、、、

ちゃんとカレンダーが表示されました！！！

イベントを登録してみる

次にイベントを登録して、それがカレンダーに表示されるか試してみます。

①ダッシュボードの「イベント」メニューの「イベントを新規作成」をクリックします。
②イベントタイトルを入力します。
③パーマリンクに、イベントタイトルと同じ内容が反映されるので修正します。
④イベント内容を入力します。
⑤「イベント開催日」を入力します。
⑥「イベント開催時間」を入力します。

⑦「予約申込みを有効にする」をクリックします。
すると、編集項目が出てきます。
⑧「標準チケット」の下の「編集」をクリックして、金額、席数などの情報を登録します。
⑨「公開」をクリックします。

※予約機能が必要ないイベントの場合は、⑦⑧の手順は不要です。
※「チケットを新規作成」から、複数のチケットを作成することもできます。

イベントの登録はこれで完了です。

※ここでは割愛しましたが、アイキャッチ画像、イベントタグ、イベントカテゴリーなどの設定もできます。

それでは、カレンダーに反映されているか確認してみます。
先ほど作成した「カレンダー」固定ページを更新すると、、、

2月24日に登録したイベントが反映されました！！！

イベントのタイトルをクリックすると、、、

イベントの詳細ページが表示されました！！！

まとめ

今回は、WordPressのプラグインを用いてイベントを登録し、それをカレンダー表示させる方法をご紹介しました。

今回の例では、テーマ「Twenty Twenty-Five」を使用してページを作成しましたが、他のテーマやオリジナルテーマでも同様に使用できます。

記事内でご紹介した設定は最低限なので、見栄えの良いページを作成するためには更に設定をいじったりカスタマイズしてページを整える必要があります。
カレンダーのテーマも色々なものがあるので試してみてください。
CSSがいじれる方は、シンプルなデザインのものを選んで追加CSSで見た目を整えるのがおすすめです。

また、今回の例では単一のイベントを登録しましたが、決まった間隔で同じイベントを繰り返し登録することもできます。
例えば、毎週決まった曜日に定休日になる店舗の場合「繰り返しイベント」を登録しておけば一度の登録で毎週の定休日をカレンダー表示させることも可能です。

「記事の通りにやったけどうまくいかない💦」
「設定がよくわからないんだけど💦」

このように行き詰まった際にはお気軽にDMにてご質問してください🙌

「記事が役に立った！」

という方はブックマーク、いいねしていただけると非常に励みになります！🙏

※この記事は、以下を参考に作成しました。
より詳細な情報が必要な場合はこちらもご参照ください。

にゃんと役立つ！Wordpress手引き書サイト WordPressでイベント予約【Events Manager】
WordPressの勉強がてら 「Events Manager」プラグイン を使ってイベントカレンダーを作成する
【WordPress】オススメの予約プラグイン「Events Manager」の使い方