【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

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

関連記事

【HTML】Bootstrap フレームワークを使い作成するレスポンシブサイト

Twitterのデザイナーや開発者が作成した『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレートソースを組み合わせて、レスポンシブ対応...続きを読む

2015.02.06BootstrapHTMLコーディング

【HTML】Adobe Dreamweaverを使いSass・SCSSをコンパイルする方法

前回、ブログにて「Sass・SCSSを使うことでWEBサイトの制作を効率化すること」をとりあげました。そこでSass・SCSSは、どちらもCSSを効率よく記述することができること。そして、Sass・SCSSを変換(コンパイル)してCSSとして書き出してWEBサイトに組み込むことを...続きを読む

2019.05.16HTMLコーディング

【CSS】スタイルシートだけで縦方向と横方向でセンタリングする方法

WEBデザインで画像やレイアウトした要素を中央に揃えるレイアウトを作ることがよくあります。実際にHTMLにコーディングをするときに、横位置をセンターにする場合や、縦位置をセンターにする場合などCSSだけで実現する方法をまとめてみました。 { margin: 0 auto...続きを読む

2015.02.07HTMLコーディング

【WP】プラグイン『Photospace』の利用方法

以前に紹介をした『Photospace』は、jQueryのサムネイル付のスライドショーギャラリーを実装できる「Galleriffic」を、WordPressの標準ギャラリーのショートコードに対応させることができるプラグインです。インストールと標準設定をご紹介しましたが、今回は...続きを読む

2015.06.29WordPress

【フォト】皆既月食「スーパー・ブルー・ブラッドムーン」

みなさんは皆既月食ご覧になりましたか? 2018年1月31日の満月は「スーパームーン」として、普段みることができる月よりも大きく光り輝く月をみることができます。さらに、満月が1カ月に2回見られる「ブルームーン」であり、皆既月食のときにみられる「ブラッドムーン」という、月に関する...続きを読む

2018.01.31フォトギャラリー