【WP】イベントカレンダーを作成できるプラグイン『Event Organizer』

event-calendar-plugin-event-organiser

イベント情報を掲載するサイトを構築するとき、カレンダーで一覧を表示させたり会場の情報を掲載したい要望をいただきます。

カスタム投稿やカスタムフィールドを用いてイベント用の記事を作成したり、Googleカレンダーなどを読み込みカレンダーを表示することもできますが、管理や記事の更新などに手間がかかってしまいます。

WordPressのみで完結できるイベントカレンダーを構築できないかと調べてみたら、『Event Organizer』というプラグインがあったのでご紹介をします。

『Event Organizer』ダウンロード

『Event Organizer』インストール

プラグインをダウンロードしてインストール後、有効化をします。有効化後は、設定メニューに『Event Organizer』が追加されます。

event-calendar-plugin-event-organiser-01

設定内容は初期値のままでもイベントカレンダーを作成できるので、初期値の内容でカレンダーを作成してみます。

イベント情報を公開するためにイベント用のページテンプレートが必要です。ダウンロードしたプラグインのファイル「event-organiser」内に「templates」フォルダがあります。その中に基本的なテンプレートが入っているので、それらを参考にテーマ用のファイルを作成します。

event-calendar-plugin-event-organiser-02

イベント情報の作成

最初に会場情報を登録します。管理画面にイベント情報用の投稿「Events」が追加されています。「Events」メニューを開くと開催地情報を登録できる「Venues」がありますので、「新規追加」で開催地の情報を登録します。

住所情報の入力に合わせて地図も連携しているので便利です。

event-calendar-plugin-event-organiser-03

開催地情報の投稿が完了したら、続けてイベント情報を投稿します。「Events」メニューの「新規追加」でイベント情報を投稿します。

イベント名、イベント内容、開催日時、終了日時を入力することができます。開催地の情報は、登録済みの内容を選択できます。

event-calendar-plugin-event-organiser-04

イベントカレンダーの掲載

イベントカレンダーを公開する場合は、固定ページなどでショートコードを記述します。

event-calendar-plugin-event-organiser-05

/* すべての情報をカレンダーに掲載 */
[eo_fullcalendar]

ショートコードの詳細はプラグインの公式サイトにて解説があります。

[button link=”http://wp-event-organiser.com/documentation/shortcodes/” icon=”59212″ target=”blank” color=”0f0f0f” textcolor=”ffffff” size=”big”]Event Organiser[/button]

月別のカレンダー表示でイベント情報が掲載されます。

event-calendar-plugin-event-organiser-06

イベント名をクリックすると詳細ページが開きます。

event-calendar-plugin-event-organiser-07

イベント情報は、カテゴリーやタグも利用できて、インポート/エクスポートなどの機能もあり管理機能も充実しています。

関連記事

モバイルサイトを構築するときに役立つフレームワーク5選

スマートフォンやタブレットなどのモバイル端末の普及に合わせて、モバイル端末によるWEBサイトへのアクセスやモバイルアプリケーションの需要が多くなってきていることを感じます。 今回はモバイル端末に最適化されたWEBサイトやアプリケーションを制作するときに役立つフレームワー...続きを読む

2015.02.08HTMLコーディング

【WP】管理画面をカスタマイズできるプラグイン「AG Custom Admin」

今回紹介するプラグイン「AG Custom Admin」を使用すると、WordPressの管理画面のログイン、メニュー項目、ダッシュボードなどをカスタマイズできるようになります。 ダッシュボードなど個々にカスタマイズできるプラグインなどはありますが、「AG Custom A...続きを読む

2016.07.08WordPress

【無料】商用利用OKシームレステクスチャ「木目(ヒノキ風)」素材

自然の木目を表現したシームレスの無料で使えるテクスチャです。ヒノキの柱、床材のような木の質感を再現しています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材となっております。 ...続きを読む

2018.09.11シームレステクスチャ

【CSS】Googleマップの埋め込み用HTMLコードをレスポンシブに対応させる

Googleマップで、埋め込み用HTMLコードを発行して、ブログやサイトに貼り付けて使うことがよくあると思います。 サイトがレスポンシブ対応の場合、本文中のGoogleマップが、要素からはみ出して見栄えが崩れたり、案内したい所在地のポインタが表示されないということがあります...続きを読む

2015.02.08CSSHTMLコーディング

【WP】WEBカタログのようなギャラリーを作成することができる『Page Flip Image Gallery』

説明書やページ数のあるカタログをサイトに公開するとき、ページをペラペラとめくることができるWEBカタログの形式で公開したいときがあります。 しかしWEBカタログはページをめくるアニメーションやボタン操作などFlashやJavascriptなどを用いた開発が必要となるので...続きを読む

2015.02.19WordPress