今回は、WordPressにイベントカレンダーを表示させるプラグイン「Event Organiser」について、ご紹介します！
様々なカスタマイズができますが、今回は基礎編として、カレンダーの作り方と表示方法についてご紹介します。
完成イメージ（カスタマイズ前）
Event Organiserのインストールと有効化
プラグイン>新規追加から、
「Event Organiser」をインストールして、有効化します。
→
新規イベントの作成・カテゴリの登録
プラグインを有効化すると、管理画面に「イベント」のメニューが追加されます。
イベント>新規追加をクリックします。
イベント名とイベント内容を入力します。
※必要に応じて、イベント詳細ページのパーマリンクを編集することができます
次に、イベントのカテゴリを登録します。
画面右側のカテゴリから、「新規カテゴリーを追加」をクリックします。
ここでは、「ビギナークラス」というカテゴリ名を入力し、「新規カテゴリーを追加」をクリックします。
これで、「ビギナークラス」というカテゴリが登録され、ビギナークラスというカテゴリの中に、イベントAが存在する状態になります。
※カテゴリにチェックが入っていることを確認しておいてください
ここまでで、イベントの概要が作成できました！
次からは、イベントの詳細について、登録をしていきます。
イベント詳細の登録①
イベントの開始・終了日時
下にスクロールしていくと、イベント詳細の入力欄が出てきます。
まずは、開始日時の日付をクリックします。
すると、日付のカレンダーが出てきます。
今回は、7月1日を選択します。
開始日時を7月1日に変更することができました。
次に、開始日時の時間をクリックします
今回は、午後の1:00を選択します。
これで、イベントの開始日時を登録することができました。
同様の手順で、イベントの終了日時も登録します。
イベントの繰り返しについて
次に、イベントの繰り返しについてです。
今回は、1週間に1回繰り返されるイベントとして登録していきます。
繰り返しのセレクトボックスから、「週ごと」を選択します。
開始・終了日として設定した7月1日が土曜日なので、土曜日にチェックが入っています。
このイベントをいつまで繰り返すかの設定をしていきます。
曜日の下の日付をクリックするとカレンダーが出てくるので、日付を選択します。
今回は、10月28日の土曜日までとしました。
イベント詳細の登録②
イベントの会場について
次に、イベント会場の登録をおこないます。
会場のセレクトボックス下の＋ボタンをクリックします。
会場名や住所などを入力します。
これで、会場を設定することができました。
カレンダーの公開
ここまで入力できたら、カレンダーを公開します。
画面右上の公開ボタンをクリックしたら、公開完了です！
これで、カレンダーを作成することができました！
同様の手順で、イベントBとイベントCも作成して、公開をしました。
次は、カテゴリを編集していきます。
カテゴリの編集
次は、カテゴリを編集していきます。
管理画面のイベント>カテゴリを選択します。
ビギナークラスを選択します。
スラッグをbeginnerに変更しておきます。
その後、色のボックスをクリックします。
※色の欄が２つありますが、今回変更するのは上のボックスの色です。
すると、色が選択できるようになるので、任意の色を選択します。
※カラーコードを入力することも可能です
今回はこちらの色を選択しました。
（カラーコード：#f1bae2）
選択できたら、更新ボタンをクリックします。
同様の手順で、エキスパートクラス、プロフェッショナルクラスのカテゴリも編集をおこないました。
※スラッグは、下記を参考に登録してください。
色はお好みの色に調整してください。
【エキスパートクラス】
スラッグ：expert
色のカラーコード：#eef591
【プロフェッショナルクラス】
スラッグ：professional
色のカラーコード：#9ef1fe
会場の編集
カテゴリ同様に、会場も編集していきます。
管理画面のイベント>会場を選択します。
ウェブロード Aホールを選択します。
パーマリンクを変更します。
今回は、hall-a とします。
入力ができたら、会場を更新ボタンをクリックします。
同様に、BホールとCホールのパーマリンクも変更します。
Bホール・・・hall-b
Cホール・・・hall-c
としておきます。
※一覧で、スラッグが変更されていることを確認しておいてください。
これで、カテゴリと会場を編集することができました！
ここからは、作成したカレンダーページに設置する方法や、様々なカレンダーの表示方法についてご紹介します！
カレンダーをページに設置する
作成したカレンダーをページに設置していきます。
今回は固定ページで、「カレンダーテスト用」のページを作成しました。
ブロックの追加ボタンから、ショートコードブロックを挿入します。
下記のショートコードを入力して、ページを公開します。
[eo_fullcalendar]
カレンダーを確認する
公開したページを確認すると、当月のカレンダーが表示されます。
先ほど登録したイベントを確認したいので、カレンダーの右上から、翌月へ進むボタンをクリックします。
すると、翌月のカレンダーが表示され、登録したイベントが表示されます。
※各イベントの背景色は、STEP6のカテゴリ編集で指定した色になります。
ショートコードの入力内容を変更すると、
様々なカレンダーを表示できます
週次カレンダー
[eo_fullcalendar defaultView="basicWeek"]
日次カレンダー
[eo_fullcalendar defaultView="basicDay"]
週次＋タイムスケジュールカレンダー
[eo_fullcalendar defaultView="agendaWeek"]
日次＋タイムスケジュールカレンダー
[eo_fullcalendar defaultView="agendaDay"]
週次リスト
[eo_fullcalendar defaultView="listWeek"]
日次リスト
[eo_fullcalendar defaultView="agendaDay"]
イベントの詳細を確認する
カレンダーのイベントにカーソルを当てると、イベントの詳細が表示されます。
イベント名をクリックします。
イベントの詳細ページが表示されます。
今後のイベント予定や、イベント作成時に登録をした会場の地図も表示されます。
Event Organiserでは、カスタマイズをおこなうことで、より見やすくご利用目的に合わせたカレンダーを作成できます。
たとえば、下記のようなことが可能です。
カスタマイズ例
- 年月日の表記の変更（ex. 7月 2023 → 2023年7月）
- カレンダーの土日を非表示／土日の背景色を変更する
- タイムスケジュールの表示時間を24時間表記に／表示時間の始まりと終わりを指定
- 指定したカテゴリや会場のみのカレンダーを表示
- カテゴリーや会場での絞り込みボタンを設置
- 日付を指定してジャンプするボタンを設置
- 表示形式の切り替えボタンを設置（月・週・日）
- 詳細ページに飛ばないようにリンク設定
次回は、応用編として、Event Organiserで上記のようなカスタマイズをおこなっていきたいと思います！
応用編はこちら
【Event Organiser】WordPressにイベントカレンダーを表示！ー応用編ー
機能体験型のデモサイトで「イベントカレンダー」を体験！
様々な機能を体験できる、Lightningテーマのデモサイトをオープンいたしました！
まずは、下記の記事で、各機能の概要や活用シーンをご確認くださいませ。
【検索・予約・イベントカレンダー】
機能体験型デモサイトをオープン！
今回ご紹介した「イベントカレンダー」も、デモサイトに実装しています。
一度、イメージを確認してみてくださいね。
※「ふれあうのページ」に日次のタイムスケジュールのカレンダーがあります
投稿者プロフィール
-
Webサイトに興味をもち、独学でHTMLやCSSの勉強を始め、その後、スクールでAdobeソフトの使い方やデザインについての知識を習得する。
同時に、様々なWebサイトがWordPressで作られていることを知り、お客さまに喜んでいただけるサイト作りができるよう、WordPressの仕組みやユーザー視点での文章表現、デザインスキルを日々学ぶ。
2022年10月より、株式会社ウェブロードに入社し、お客様のサイト制作、修正やページ追加、操作サポートを行っている。
お問合せフォームはこちら
（※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。）
お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。
