Wordpress Tips

2016.03.15

高機能カレンダープラグイン「Event Organiser」 その① 基本機能編

カテゴリー:

期間が限られているイベント記事を管理するために管理画面側で月次、日次でイベントを管理でき、さらにページ上で絞り込んで表示できたら楽ですよね!
そんなニーズに対応可能なプラグイン「Event Organiser」を紹介したいと思います。
尚、ひと記事では機能を紹介しきれないため、「基本機能編」「カスタマイズ編」に分けて紹介させていただきたいと思います。
日本語リファレンスの大変少ないプラグインなので、少しでも参考にしていただければ幸いです!

ダウンロード

月/日/時間でイベントを管理 設定したデータをもとに記事やサイドバー上で絞りこみができる、また管理画面上で同様に管理できる
google連携機能 googlemapを読み込んで表示させたり、googleカレンダーを読み込んで内容の取得が可能
導入までが楽/直感的に管理が可能 非エンジニアでも容易に設置が可能、デフォルトで日本語対応、投稿に表示されるカレンダーと同様のカレンダーを管理画面に表示しそこから管理できる。

インストール

まずは公式サイトか管理画面からインストールを行ってください。

スクリーンショット 2016-03-15 17.18.21

有効化すると、左サイドバーに「イベント」と表示されます!

スクリーンショット 2016-03-15 17.21.04

Event Organiserはカスタム投稿タイプをベースに様々なカスタマイズが施されたプラグインです。
英語ですが、専用リファレンスはおろかcodexまで準備されています!

Function reference | Event Organiser

Event Organiser Codex

それでは基本機能を見ていきたいと思います。

基本機能

イベント投稿画面

スクリーンショット 2016-03-15 17.36.48

一見普通の投稿画面ですが、重要なのはちょっと下の「イベント詳細部分」です、ここでイベントの期間や
開催場所などの入力ができ、ページ上で紐付けて絞り込んだりできるんですね!
ここがEvent Organiserの基本かつ最も重要な機能となっています。

スクリーンショット 2016-03-15 17.39.32

繰り返し日の追加/削除

スクリーンショット 2016-03-15 17.47.58

ここでチェックされた日付は管理画面/ページ上のカレンダーに反映されます!

Venue(イべント会場設定画面)

スクリーンショット 2016-03-15 17.48.06
なんと、会場名や住所を入力すれば会場のgooglemapで表示することもできるんです!
また、googleカレンダーを読み込み、連携する機能まであります!

管理画面

会場

スクリーンショット 2016-03-15 17.52.23

投稿画面から入力する会場を含め、定期的にイベントを開催する会場などはこちらに登録しておき、タグのように会場名を入力して呼び出すことが可能です!

イベントカレンダー

スクリーンショット 2016-03-15 17.54.57

管理画面にもこんなカレンダーが用意してあります。こちらで一覧表示しイベントを把握することが可能。
また、カテゴリや会場ごと、週/月/日 単位でスケジュールを管理することが可能!
サイト上への表示とスケジュールそのものの管理がここだけでできてしまいます!

スクリーンショット 2016-03-15 17.56.23

イベントをクリックするとこのようにポップアップが表示され、ここから各イベントに飛び編集することも可能です。

ウィジェット対応

デフォルトでウィジェットに対応しているので、サイドバーにカレンダーを表示したり日程でイベントを絞り込んでイベントをリスト表示したりといったこともできます!

スクリーンショット 2016-03-16 15.29.24

投稿/固定ページへの表示はショートコードで

スクリーンショット 2016-03-16 15.33.44

投稿や固定ページにカレンダーを表示するにはショートコードを記述して表示します。様々なパラメータを利用することにより表示内容の操作が可能、こちらについては次回解説します。

実際の表示状態

それでは設定したカレンダーがどのように表示されているか見てみましょう!ここではデフォルトのデザインで表示していますが、CSSでのスタイリングも可能です!

投稿画面のカレンダー表示

スクリーンショット 2016-03-16 15.37.11

このように表示されます、管理画面のものと似ており、同様にイベントの表示されて居る箇所をクリックするとイベントページに飛べるようになっています。

イベント単体の表示

スクリーンショット 2016-03-15 17.45.54

表示自体はテーマファイルにも依存するとは思いますがこのように表示されます、アイキャッチに設定した画像がそのまま使用されるので画像は投稿画面での使用前提のサイズを用意してください!

サイドバーの表示

スクリーンショット 2016-03-16 15.52.04

ウィジェットでサイドバーに設置したカレンダーの表示はこのような形となります、設定した期間も反映されていますね。

基本機能編 まとめ

基本的な使用方法はご覧いただいた通り、とても親切な作りになっているので使いやすいと思います。
次回はショートコードの説明や、ちょっとしたカスタマイズ面に切り込んで解説していこうと思います。

ダウンロード

ご相談・ご依頼に関して、まずは

ください。お気軽にどうぞ