今回は、WordPressにイベントカレンダーを表示させるプラグイン「Event Organiser」について、ご紹介します!
様々なカスタマイズができますが、今回は基礎編として、カレンダーの作り方と表示方法についてご紹介します。

完成イメージ(カスタマイズ前)

Event Organiserのインストールと有効化

プラグイン>新規追加から、
Event Organiser」をインストールして、有効化します。

STEP
1

新規イベントの作成・カテゴリの登録

プラグインを有効化すると、管理画面に「イベント」のメニューが追加されます。

イベント>新規追加をクリックします。

イベント名イベント内容を入力します。

※必要に応じて、イベント詳細ページのパーマリンクを編集することができます

次に、イベントのカテゴリを登録します。

画面右側のカテゴリから、「新規カテゴリーを追加」をクリックします。

ここでは、「ビギナークラス」というカテゴリ名を入力し、「新規カテゴリーを追加」をクリックします。

これで、「ビギナークラス」というカテゴリが登録され、ビギナークラスというカテゴリの中に、イベントAが存在する状態になります。

※カテゴリにチェックが入っていることを確認しておいてください

STEP
2

ここまでで、イベントの概要が作成できました!
次からは、イベントの詳細について、登録をしていきます。

イベント詳細の登録①

イベントの開始・終了日時

下にスクロールしていくと、イベント詳細の入力欄が出てきます。

まずは、開始日時の日付をクリックします。

すると、日付のカレンダーが出てきます。
今回は、7月1日を選択します。

開始日時を7月1日に変更することができました。

次に、開始日時の時間をクリックします

今回は、午後の1:00を選択します。

これで、イベントの開始日時を登録することができました。

同様の手順で、イベントの終了日時も登録します。

イベントの繰り返しについて

次に、イベントの繰り返しについてです。

今回は、1週間に1回繰り返されるイベントとして登録していきます。

繰り返しのセレクトボックスから、「週ごと」を選択します。

開始・終了日として設定した7月1日が土曜日なので、土曜日にチェックが入っています。

このイベントをいつまで繰り返すかの設定をしていきます。
曜日の下の日付をクリックするとカレンダーが出てくるので、日付を選択します。

今回は、10月28日の土曜日までとしました。

STEP
3

イベント詳細の登録②

イベントの会場について

次に、イベント会場の登録をおこないます。

会場のセレクトボックス下の+ボタンをクリックします。

会場名や住所などを入力します。

これで、会場を設定することができました。

STEP
4

カレンダーの公開

ここまで入力できたら、カレンダーを公開します。

画面右上の公開ボタンをクリックしたら、公開完了です!

STEP
5

これで、カレンダーを作成することができました!
同様の手順で、イベントBとイベントCも作成して、公開をしました。
次は、カテゴリを編集していきます。

カテゴリの編集

次は、カテゴリを編集していきます。

管理画面のイベント>カテゴリを選択します。

ビギナークラスを選択します。

スラッグをbeginnerに変更しておきます。

その後、色のボックスをクリックします。

※色の欄が2つありますが、今回変更するのは上のボックスの色です。

すると、色が選択できるようになるので、任意の色を選択します。

※カラーコードを入力することも可能です

今回はこちらの色を選択しました。
(カラーコード:#f1bae2)

選択できたら、更新ボタンをクリックします。

同様の手順で、エキスパートクラス、プロフェッショナルクラスのカテゴリも編集をおこないました。

※スラッグは、下記を参考に登録してください。
色はお好みの色に調整してください。

【エキスパートクラス】
スラッグ:expert
色のカラーコード:#eef591

【プロフェッショナルクラス】
スラッグ:professional
色のカラーコード:#9ef1fe

STEP
6

会場の編集

カテゴリ同様に、会場も編集していきます。

管理画面のイベント>会場を選択します。

ウェブロード Aホールを選択します。

パーマリンクを変更します。
今回は、hall-a とします。
入力ができたら、会場を更新ボタンをクリックします。

同様に、BホールとCホールのパーマリンクも変更します。
Bホール・・・hall-b
Cホール・・・hall-c
としておきます。

※一覧で、スラッグが変更されていることを確認しておいてください。

STEP
7

これで、カテゴリと会場を編集することができました!
ここからは、作成したカレンダーページに設置する方法や、様々なカレンダーの表示方法についてご紹介します!

カレンダーをページに設置する

作成したカレンダーをページに設置していきます。

今回は固定ページで、「カレンダーテスト用」のページを作成しました。

ブロックの追加ボタンから、ショートコードブロックを挿入します。

下記のショートコードを入力して、ページを公開します。

[eo_fullcalendar]
STEP
8

カレンダーを確認する

公開したページを確認すると、当月のカレンダーが表示されます。

先ほど登録したイベントを確認したいので、カレンダーの右上から、翌月へ進むボタンをクリックします。

すると、翌月のカレンダーが表示され、登録したイベントが表示されます。
※各イベントの背景色は、STEP6のカテゴリ編集で指定した色になります。

STEP
9

ショートコードの入力内容を変更すると、
様々なカレンダーを表示できます

週次カレンダー

[eo_fullcalendar defaultView="basicWeek"]

日次カレンダー

[eo_fullcalendar defaultView="basicDay"]

週次+タイムスケジュールカレンダー

[eo_fullcalendar defaultView="agendaWeek"]

日次+タイムスケジュールカレンダー

[eo_fullcalendar defaultView="agendaDay"]

週次リスト

[eo_fullcalendar defaultView="listWeek"]

日次リスト

[eo_fullcalendar defaultView="agendaDay"]

イベントの詳細を確認する

カレンダーのイベントにカーソルを当てると、イベントの詳細が表示されます。

イベント名をクリックします。

イベントの詳細ページが表示されます。
今後のイベント予定や、イベント作成時に登録をした会場の地図も表示されます。

STEP
9

Event Organiserでは、カスタマイズをおこなうことで、より見やすくご利用目的に合わせたカレンダーを作成できます。
たとえば、下記のようなことが可能です。

カスタマイズ例

  • 年月日の表記の変更(ex. 7月 2023 → 2023年7月)
  • カレンダーの土日を非表示/土日の背景色を変更する
  • タイムスケジュールの表示時間を24時間表記に/表示時間の始まりと終わりを指定
  • 指定したカテゴリや会場のみのカレンダーを表示
  • カテゴリーや会場での絞り込みボタンを設置
  • 日付を指定してジャンプするボタンを設置
  • 表示形式の切り替えボタンを設置(月・週・日)
  • 詳細ページに飛ばないようにリンク設定

次回は、応用編として、Event Organiserで上記のようなカスタマイズをおこなっていきたいと思います!

応用編はこちら
【Event Organiser】WordPressにイベントカレンダーを表示!ー応用編ー

機能体験型のデモサイトで「イベントカレンダー」を体験!

様々な機能を体験できる、Lightningテーマのデモサイトをオープンいたしました!
まずは、下記の記事で、各機能の概要や活用シーンをご確認くださいませ。

【検索・予約・イベントカレンダー】
機能体験型デモサイトをオープン!

今回ご紹介した「イベントカレンダー」も、デモサイトに実装しています。
一度、イメージを確認してみてくださいね。

「ふれあうのページ」に日次のタイムスケジュールのカレンダーがあります

こちらの記事もぜひご覧ください

今回の記事の応用編として、様々なカスタマイズをご紹介しています。

投稿者プロフィール

Mayu
Mayu
Webサイトに興味をもち、独学でHTMLやCSSの勉強を始め、その後、スクールでAdobeソフトの使い方やデザインについての知識を習得する。
同時に、様々なWebサイトがWordPressで作られていることを知り、お客さまに喜んでいただけるサイト作りができるよう、WordPressの仕組みやユーザー視点での文章表現、デザインスキルを日々学ぶ。
2022年10月より、株式会社ウェブロードに入社し、お客様のサイト制作、修正やページ追加、操作サポートを行っている。

お問合せフォームはこちら

弊社サービスをご検討いただきありがとうございます。
相見積もりや社内検討用など、概算お見積りのPDFが必要な場合はこちらでご入力・出力できます。

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須弊社を何で知りましたか

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか?

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか?(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか?(複数選択可)

    SSL(https://~)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか?(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意電話番号(ハイフン無し・半角数字)